Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 进入bootstrap的大门之表格
Blogger Information
Blog 34
fans 0
comment 0
visits 20553
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
进入bootstrap的大门之表格
小庄
Original
474 people have browsed it

进入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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post