1.創建一個面板
https://v3.bootcss.com/components/#panels-footer
2.創建一個帶鼠標懸停的表格，放置在form標簽中
https://v3.bootcss.com/css/#tables-hover-rows
3.在4行4列的表格中添加Checkbox按鈕和普通按鈕
https://v3.bootcss.com/css/#buttons-options
4.選擇按鈕圖標
https://v3.bootcss.com/components/#glyphicons
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
5.選擇分頁樣式
https://v3.bootcss.com/components/#pagination
6.添加自定義css樣式
<style> .tablefruit { width: 100%; text-align: left; } .footeradd{ padding: 0 15px; } .panel{ width: 50%; } .add{ padding: 10px 0 5px 15px; } .table>tbody>tr>td,.table>tbody>tr>th { vertical-align:middle; text-align: left; } .manual{ width: 15%; } </style>
7.所有代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap筆記——Checkbox選項組</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .tablefruit { width: 100%; text-align: left; } .footeradd{ padding: 0 15px; } .panel{ width: 50%; } .add{ padding: 10px 0 5px 15px; } .table>tbody>tr>td,.table>tbody>tr>th { vertical-align:middle; text-align: left; } .manual{ width: 15%; } </style> </head> <body> <h3>水果選項組</h3> <!-- 面板 --> <div class="panel panel-primary"> <div class="panel-heading">列表</div> <div class="add"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加</button></div> <div class="panel-body"> <form action="" method="POST"> <table class="table table-hover tablefruit"> <tr> <th><input type="checkbox" name="fruits" id="fruits">全選</th> <th>水果名稱</th> <th colspan="2">操作說明</th> </tr> <tr> <td><input type="checkbox" name="fruits" id="fruits" value="蘋果"></td> <td>蘋果</td> <td class="manual"><button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td> <td class="manual"><button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除</button></td> </tr> <tr> <td><input type="checkbox" name="fruits" id="fruits" value="梨子"></td> <td>梨子</td> <td class="manual"><button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td> <td class="manual"><button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除</button></td> </tr> <tr> <td><input type="checkbox" name="fruits" id="fruits" value="香蕉"></td> <td>香蕉</td> <td><button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td> <td><button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除</button></td> </tr> <tr> <td><input type="checkbox" name="fruits" id="fruits" value="芒果"></td> <td>芒果</td> <td><button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td> <td><button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除</button></td> </tr> <tr> <td><input type="button" value="提交" name="submitBtn" id="submitBtn" class="btn btn-default btn-sm"></td> <td colspan="3"></td> </tr> </table> </form> </div> <!-- 頁碼 --> <div class="panel-footer footeradd"> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</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> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <script> </script> </body> </html>
8.效果
