博客列表 >Bootstrap表格

Bootstrap表格

Pengsir
Pengsir原创
2017年12月24日 19:26:22848浏览

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="dist/css/bootstrap.css">
   <script src="jquery-3.2.1.min.js"></script>
   <script src="dist/js/bootstrap.js"></script>
   <title>表格</title>

   <style>
       td{text-align: center}
       .grid{
           border: 1px solid #696969;
           border-radius: 5px;
           background-color: yellow;
           min-height: 30px;
           text-align: center;
           line-height: 30px;
       }
       .green{
           background-color:lightgreen ;
       }
       .plank{
           background-color: lightpink;
       }
   </style>

</head>
<body>
<div class="container">
   <div class="row">
       <div class="col-md-12 ">
           <table class="table text-center table-bordered table-responsive table table-hover" >
               <caption class="text-center h3">DNF商品信息表</caption>
               <!--table>tr*10>td{数据}*6-->
<tr class="bg-success">
                   <td>诞生之芽</td>
                   <td>超速胶囊</td>
                   <td>挑战书</td>
                   <td>上级元素结晶</td>
                   <td>无尽的永恒</td>
                   <td>游戏币</td>
               </tr>
               <tr>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
               </tr>
               <tr>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
               </tr>
               <tr>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
               </tr>
               <tr>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
               </tr>
               <tr>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
               </tr>
               <tr>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
               </tr>
               <tr>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
               </tr>
               <tr>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
               </tr>
               <tr>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
                   <td>晶石</td>
               </tr>
           </table>
       </div>
       <div class="row">
           <div class="col-md-12">
               <nav class="text-center" >
                   <ul class="pagination">
                       <li><span><span>首页</span></span> </li>

                       <li class="active">
                           <span>1 <span class="sr-only">(current)</span></span>
                       </li>
                       <li><span>2<span class="sr-only">(current)</span></span></li>
                       <li><span>3<span class="sr-only">(current)</span></span></li>
                       <li><span>4<span class="sr-only">(current)</span></span></li>
                       <li><span>5<span class="sr-only">(current)</span></span></li>
                       <li><span>6<span class="sr-only">(current)</span></span></li>
                       <li><span><span>尾页</span></span> </li>
                   </ul>
               </nav>
           </div>
       </div>
   </div>
</div>

</body>
</html>Bootstrap.png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议