进入bootstrap的大门之表格

说说你对响应式布局和网格的理解
1.响应式布局：减轻工作量，做好适配即可多端不同尺寸屏幕显示。
2.网格：将整个页面分为12个格子，其中每个格子中又可以无限分为12个格子（理论上可以进行无限分割），开发者只需要在格子中填入数据即可，无需为了布局定位而烦恼。

练习代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  9. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  10. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  11. <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  12. </head>
  13. <body>
  14.     <table class="table table-striped table-hover">
  15.         <thead>
  16.             <tr>
  17.                 <td>id</td>
  18.                 <td>姓名</td>
  19.                 <td>年龄</td>
  20.                 <td>地址</td>
  21.             </tr>
  22.         </thead>
  23.         <tbody>
  24.             <tr>
  25.                 <th>001</th>
  26.                 <td>小黄</td>
  27.                 <td>28</td>
  28.                 <td>合肥</td>
  29.             </tr>
  30.             <tr>
  31.                 <th>002</th>
  32.                 <td>小王</td>
  33.                 <td>24</td>
  34.                 <td>北京</td>
  35.             </tr>
  36.             <tr>
  37.                 <th>003</th>
  38.                 <td>小陈</td>
  39.                 <td>22</td>
  40.                 <td>天津</td>
  41.             </tr>
  42.             <tr>
  43.                 <th>004</th>
  44.                 <td>小李</td>
  45.                 <td>18</td>
  46.                 <td>重庆</td>
  47.             </tr>
  48.             <tr>
  49.                 <th>005</th>
  50.                 <td>小庄</td>
  51.                 <td>30</td>
  52.                 <td>成都</td>
  53.             </tr>
  54.             <tr>
  55.                 <th>006</th>
  56.                 <td>小周</td>
  57.                 <td>35</td>
  58.                 <td>西安</td>
  59.             </tr>
  60.             <tr>
  61.                 <th>007</th>
  62.                 <td>小齐</td>
  63.                 <td>19</td>
  64.                 <td>南京</td>
  65.             </tr>
  66.         </tbody>
  67.     </table>
  68.     <div class="container">
  69.         <div class="row">
  70.             <div class="col-md-1">第1列</div>
  71.             <div class="col-md-1">第2列</div>
  72.             <div class="col-md-1">第3列</div>
  73.             <div class="col-md-1">第4列</div>
  74.             <div class="col-md-3 text-center">
  75.                 占3列
  76.             <!-- 分页 1 -->
  77.             <nav aria-label="Page navigation">
  78.                 <ul class="pagination">
  79.                   <li>
  80.                     <a href="#" aria-label="Previous">
  81.                       <span aria-hidden="true">&laquo;</span>
  82.                     </a>
  83.                   </li>
  84.                   <li><a href="#">1</a></li>
  85.                   <li><a href="#">2</a></li>
  86.                   <li><a href="#">3</a></li>
  87.                   <li><a href="#">4</a></li>
  88.                   <li><a href="#">5</a></li>
  89.                   <li>
  90.                     <a href="#" aria-label="Next">
  91.                       <span aria-hidden="true">&raquo;</span>
  92.                     </a>
  93.                   </li>
  94.                 </ul>
  95.             </nav>
  96.             <!-- 分页 2 -->
  97.             <nav aria-label="...">
  98.               <ul class="pagination">
  99.                 <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
  100.                 <li><a href="#">1 <span class="sr-only">(current)</span></a></li>
  101.                 <li><a href="#">2 <span class="sr-only">(current)</span></a></li>
  102.                 <li class="active"><a href="#">3 <span class="sr-only">(current)</span></a></li>
  103.                 <li><a href="#">4 <span class="sr-only">(current)</span></a></li>
  104.                 <li><a href="#">5 <span class="sr-only">(current)</span></a></li>
  105.                 <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
  106.               </ul>
  107.             </nav>
  109.             </div>
  110.             <div class="col-md-1">第6列</div>
  111.             <div class="col-md-1">第7列</div>
  112.             <div class="col-md-1">第8列</div>
  113.             <div class="col-md-1">第9列</div>
  114.             <div class="col-md-1">第10列</div>
  115.           </div>
  116.     </div>
  118. </body>
  119. </html>

更多相关文章

  1. C# | 批量将CAD图幅网格外扩生成新图框（附源代码下载）
  2. 服务网格：8种方式简化微服务部署
  3. PHP:使用定界符输出九格宫表格,颜色各异,每个小格子宽高50px ,用
  4. 智慧平安社区综合管理平台建设，社区网格化管理系统开发方案
  5. 可行性验证：API管理与ServiceMesh的集成
  6. grid对齐方式与基础实战
  7. grid的描述
  8. 210329 CSS 媒体查询 grid布局
  9. 实现全托管，腾讯云服务网格的架构演进

随机推荐

  1. golang判断字符串是否数字的方法
  2. golang数组和切片的区别是什么
  3. golang用什么ide
  4. golang中协程和线程的区别是什么？
  5. golang编程语言能开发啥
  6. golang数据类型有哪些
  7. golang数组与切片的区别是什么？
  8. golang语言可以做些什么
  9. golang如何判断数据类型
  10. golang是什么语言？