Bootstrap笔记——Checkbox选项组

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>
View Code

 

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">&laquo;</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">&raquo;</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>
View Code

 

8.效果

 

posted @ 2020-03-28 16:03  YorkShare  阅读(1696)  评论(0)  编辑  收藏  举报