<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>イベント編集・作成</h1> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> イベントを選択 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">選抜戦</a></li> <li><a href="#">ドラゴンクロス</a></li> <li><a href="#">もにゃもにゃ</a></li> </ul> </div> </div> </div> <div class="row"> <div class="col-md-12"> <h2>・選抜戦</h2> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>告知開始</th> <th>開始</th> <th>終了</th> <th></th> </tr> </thead> <tbody> <tr class="active"> <th scope="row">30</th> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</button> <button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Copy</button> <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</button> </td> </tr> <tr> <th scope="row">29</th> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</button> <button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Copy</button> <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</button> </td> </tr> <tr class="success"> <th scope="row">28</th> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</button> <button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Copy</button> <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</button> </td> </tr> <tr> <th scope="row">27</th> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</button> <button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Copy</button> <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</button> </td> </tr> <tr class="info"> <th scope="row">26</th> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</button> <button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Copy</button> <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</button> </td> </tr> <tr> <th scope="row">25</th> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</button> <button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Copy</button> <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</button> </td> </tr> <tr class="warning"> <th scope="row">24</th> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</button> <button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Copy</button> <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</button> </td> </tr> <tr> <th scope="row">23</th> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</button> <button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Copy</button> <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</button> </td> </tr> <tr class="danger"> <th scope="row">22</th> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td>2016/12/26 18:00</td> <td> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</button> <button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Copy</button> <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</button> </td> </tr> </tbody> </table> </div> </div> </div> <div class="row"> <div class="col-md-12"> <nav aria-label="Page navigation"> <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div> </div>