bootstrap css栅格、代码、表格

最新推荐文章于 2021-12-15 15:59:10 发布

dfl2099

最新推荐文章于 2021-12-15 15:59:10 发布

阅读量87

点赞数

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

版权

  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

欢迎来到我的家园

.col-md-1

.col-md-8

.col-md-4

.col-md-3

.col-md-9

重点<强调>一下我希望现在能够输入CMD命令

href

hello world

表格标题	表格标题	表格标题
表格单表格单元格元格	表格单表格单元格表格单元格元格	表格单表格单元格元格
表格单元格	表格单表格单元格元格	表格单元格
表格单元格	表格单元格	表格单表格单元格元格
表格单元格	表格单表格单元格元格	表格单元格
表格单元格	表格表格单元格单元格	表格单元格
表格单表格单元格元格	表格单元格	表格单元格
表格单表格单元格元格	表格单元格	表格单表格单元格元格