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><强调></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命令
hrefhello world
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单表格单元格元格 | 表格单表格单元格表格单元格元格 | 表格单表格单元格元格 |
| 表格单元格 | 表格单表格单元格元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单表格单元格元格 |
| 表格单元格 | 表格单表格单元格元格 | 表格单元格 |
| 表格单元格 | 表格表格单元格单元格 | 表格单元格 |
| 表格单表格单元格元格 | 表格单元格 | 表格单元格 |
| 表格单表格单元格元格 | 表格单元格 | 表格单表格单元格元格 |