首页 > Web开发 > 详细

bootstrap css栅格、代码、表格

时间:2017-02-07 22:21:26      阅读:241      评论:0      收藏:0      [点我收藏+]
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1">
  6     <title>bootstrap</title>
  7     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  8     <style>
  9         body{
 10             padding-top:50px;;
 11         }
 12         .starter{
 13             padding:20px 15px;
 14             text-align: center;;
 15         }
 16         .row{
 17             margin-bottom:20px;
 18         }
 19         .row .row{
 20             margin-top:10px;
 21             margin-bottom:0;
 22         }
 23         [class*="col-"]{
 24             padding-top:15px;
 25             padding-bottom:15px;
 26             background-color: #eee;
 27             background-color: rgba(86,61,124,.15);
 28             border:1px solid #FA8700;
 29             border:1px solid rgba(86,61,124,.2);
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <nav class="nav navbar-inverse navbar-fixed-top"role="navigation">
 35         <div class="container">
 36             <div class="navbar-header">
 37                 <a href="" class="navbar-brand">logo</a>
 38             </div>
 39             <div id="navbar" class="collapse navbar-collapse">
 40                 <ul class="nav navbar-nav">
 41                     <li class="active"><a href="">home</a></li>
 42                     <li><a href="">about</a></li>
 43                     <li><a href="">content</a></li>
 44                 </ul>
 45             </div>
 46         </div>
 47     </nav>
 48 <div class="container">
 49     <div class="starter">
 50         <h1>bootstrap</h1>
 51         <p class="lead">欢迎来到我的家园</p>
 52     </div>
 53     <div class="row">
 54         <div class="col-md-1">.col-md-1</div>
 55         <div class="col-md-1">.col-md-1</div>
 56         <div class="col-md-1">.col-md-1</div>
 57         <div class="col-md-1">.col-md-1</div>
 58         <div class="col-md-1">.col-md-1</div>
 59         <div class="col-md-1">.col-md-1</div>
 60         <div class="col-md-1">.col-md-1</div>
 61         <div class="col-md-1">.col-md-1</div>
 62         <div class="col-md-1">.col-md-1</div>
 63         <div class="col-md-1">.col-md-1</div>
 64         <div class="col-md-1">.col-md-1</div>
 65         <div class="col-md-1">.col-md-1</div>
 66     </div>
 67     <div class="row">
 68         <div class="col-md-8">.col-md-8</div>
 69         <div class="col-md-4">.col-md-4</div>
 70     </div>
 71     <div class="row">
 72         <div class="col-md-4">.col-md-4</div>
 73         <div class="col-md-4">.col-md-4</div>
 74         <div class="col-md-4">.col-md-4</div>
 75     </div>
 76     <div class="row">
 77         <!--前后位置互换-->
 78         <div class="col-md-3 col-md-push-9" >.col-md-3</div>
 79         <div class="col-md-9 col-md-pull-3" >.col-md-9</div>
 80     </div>
 81     <span>重点<code>&lt;强调&gt;</code>一下
 82     我希望现在能够输入<kbd>CMD</kbd>命令
 83     <pre>href</pre>
 84     <!--samp程序输出-->
 85     <samp>hello world</samp>
 86     </span>
 87 </div>
 88     <div class="table-responsive">
 89         <table class="table table-bordered">
 90             <thead>
 91             <tr class="active">
 92                 <th>表格标题</th>
 93                 <th>表格标题</th>
 94                 <th>表格标题</th>
 95             </tr>
 96             </thead>
 97             <tbody>
 98             <tr class="success">
 99                 <th>表格单表格单元格元格</th>
100                 <th>表格单表格单元格表格单元格元格</th>
101                 <th>表格单表格单元格元格</th>
102             </tr>
103             <tr class="danger">
104                 <th>表格单元格</th>
105                 <th>表格单表格单元格元格</th>
106                 <th>表格单元格</th>
107             </tr>
108             <tr class="info">
109                 <th>表格单元格</th>
110                 <th>表格单元格</th>
111                 <th>表格单表格单元格元格</th>
112             </tr>
113             <tr class="warning">
114                 <th>表格单元格</th>
115                 <th>表格单表格单元格元格</th>
116                 <th>表格单元格</th>
117             </tr>
118             <tr>
119                 <th>表格单元格</th>
120                 <th>表格表格单元格单元格</th>
121                 <th>表格单元格</th>
122             </tr>
123             <tr>
124                 <th>表格单表格单元格元格</th>
125                 <th>表格单元格</th>
126                 <th>表格单元格</th>
127             </tr>
128             <tr>
129                 <th>表格单表格单元格元格</th>
130                 <th>表格单元格</th>
131                 <th>表格单表格单元格元格</th>
132             </tr>
133             </tbody>
134         </table>
135     </div>
136 
137 
138 
139 </body>
140 </html>

 

bootstrap

bootstrap

欢迎来到我的家园

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-9
重点<强调>一下 我希望现在能够输入CMD命令
href
hello world
表格标题表格标题表格标题
表格单表格单元格元格表格单表格单元格表格单元格元格表格单表格单元格元格
表格单元格表格单表格单元格元格表格单元格
表格单元格表格单元格表格单表格单元格元格
表格单元格表格单表格单元格元格表格单元格
表格单元格表格表格单元格单元格表格单元格
表格单表格单元格元格表格单元格表格单元格
表格单表格单元格元格表格单元格表格单表格单元格元格

bootstrap css栅格、代码、表格

原文:http://www.cnblogs.com/qianjilou/p/6376057.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!