1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script src="../js/jquery.min.js" type="text/javascript"></script> 6 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"> 7 <script src="../js/bootstrap.min.js" type="text/javascript"></script> 8 <style type="text/css"> 9 #bjys{ 10 background-color: #abcdef; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="container"> 16 <!--按钮示例--> 17 <button class="btn btn-default">button</button> 18 <button class="btn btn-primary">提交按钮</button> 19 <button class="btn btn-success">成功按钮</button> 20 <button class="btn btn-info">信息按钮</button> 21 <button class="btn btn-warning">警告按钮</button> 22 <button class="btn btn-danger">危险按钮</button> 23 <button class="btn btn-link">表现链接按钮</button> 24 <button class="btn btn-lg">大一点按钮</button> 25 <button class="btn btn-sm">小一点按钮</button> 26 <button class="btn btn-xs">最小按钮</button> 27 <button class="btn active">激活状态按钮</button> 28 <button class="btn disabled">无效按钮</button> 29 <button class="btn disabled btn-danger">多种按钮样式混用</button> 30 <br /> 31 32 33 <!-- 表格示例 --> 34 <table class="table table-striped"> 35 <h3>斑马线表格</h3> 36 <th>ID</th> 37 <th>Name</th> 38 <th>PWd</th> 39 <tr> 40 <td>001</td> 41 <td>number1</td> 42 <td>123456</td> 43 </tr> 44 <tr> 45 <td>002</td> 46 <td>number2</td> 47 <td>123456</td> 48 </tr> 49 </table> 50 51 <table class="table table-bordered"> 52 <h3>带边框表格</h3> 53 <th>ID</th> 54 <th>Name</th> 55 <th>PWd</th> 56 <tr> 57 <td>001</td> 58 <td>number1</td> 59 <td>123456</td> 60 </tr> 61 <tr> 62 <td>002</td> 63 <td>number2</td> 64 <td>123456</td> 65 </tr> 66 </table> 67 68 <table class="table table-hover"> 69 <h3>带鼠标悬停效果表格</h3> 70 <th>ID</th> 71 <th>Name</th> 72 <th>PWd</th> 73 <tr> 74 <td>001</td> 75 <td>number1</td> 76 <td>123456</td> 77 </tr> 78 <tr> 79 <td>002</td> 80 <td>number2</td> 81 <td>123456</td> 82 </tr> 83 </table> 84 85 <table class="table table-condensed"> 86 <h3>上下间隔紧凑效果表格</h3> 87 <th>ID</th> 88 <th>Name</th> 89 <th>PWd</th> 90 <tr> 91 <td>001</td> 92 <td>number1</td> 93 <td>123456</td> 94 </tr> 95 <tr> 96 <td>002</td> 97 <td>number2</td> 98 <td>123456</td> 99 </tr> 100 </table> 101 102 <table class="table table-striped table-bordered table-hover table-condensed"> 103 <h3>带多种混合效果表格</h3> 104 <th>ID</th> 105 <th>Name</th> 106 <th>PWd</th> 107 <tr> 108 <td>001</td> 109 <td>number1</td> 110 <td>123456</td> 111 </tr> 112 <tr> 113 <td>002</td> 114 <td>number2</td> 115 <td>123456</td> 116 </tr> 117 </table> 118 119 <table class="table"> 120 <h3>被激活,成功，信息，危险，警告状态表格</h3> 121 <th>ID</th> 122 <th>Name</th> 123 <th>PWd</th> 124 <tr class="active"> 125 <td>001</td> 126 <td>number1</td> 127 <td>123456</td> 128 </tr> 129 <tr class="success"> 130 <td>002</td> 131 <td>number2</td> 132 <td>123456</td> 133 </tr> 134 <tr class="info"> 135 <td>003</td> 136 <td>number3</td> 137 <td>123456</td> 138 </tr> 139 <tr class="danger"> 140 <td>004</td> 141 <td>number4</td> 142 <td>123456</td> 143 </tr> 144 <tr class="warning"> 145 <td>005</td> 146 <td>number5</td> 147 <td>123456</td> 148 </tr> 149 </table> 150 151 <!-- 图片示例 --> 152 <h3>圆角图片</h3> 153 <img class="img img-rounded" src="../images/img3.jpg" width="200px" height="200px"> 154 <h3>圆形图片</h3> 155 <img class="img img-circle" src="../images/img1.jpg"> 156 <h3>缩略图图片</h3> 157 <img class="img img-thumbnail" src="../images/img4.jpg" width="200px" height="200px"> 158 159 <!-- 表单示例 --> 160 <form class="form-control"> 161 <input class="form-control" type="text" name="name" placeholder="name" width="300px"> 162 <input class="form-control" type="password" name="pwd" placeholder="password" width="300px"> 163 <textarea name="textarea" class="form-control" cols="10"> 164 文本域... 165 </textarea> 166 <select name="selt" class="form-control"> 167 <option>选项一</option> 168 <option>选项二</option> 169 <option>选项三</option> 170 <option>选项四</option> 171 </select> 172 <input type="radio" name="out" class=""> 173 <input type="radio" name="int" class=""> 174 <input type="checkbox" name="list"> 175 <input type="checkbox" name="list"> 176 <button class="btn btn-primary">提交</button> 177 </form> 178 179 <!-- 文本 --> 180 <span class="text-muted">Never try ,never know 浅灰色文本</span> 181 <span class="text-primary">Never try ,never know 强调文本</span> 182 <span class="text-info">Never try ,never know 提示信息文本</span> 183 <span class="text-success">Never try ,never know 操作成功文本</span> 184 <span class="text-warning">Never try ,never know 警告文本</span> 185 <span class="text-danger">Never try ,never know 危险提示文本</span> 186 187 <!-- 基本样式 背景 --> 188 <p class="bg-primary">强调</p> 189 <p class="bg-success">操作成功</p> 190 <p class="bg-info">提示文字</p> 191 <p class="bg-warning">警告语</p> 192 <p class="bg-danger">危险语</p> 193 194 <!-- 其它样式 --> 195 <!-- <button class="close" aria-hidden="true"></button> 196 <button class="caret"></button> --> 197 <div class="pull-left">文字靠左边</div> 198 <div class="pull-right">文字靠右边</div> 199 <!-- <div class="show">show</div> 200 <div class="hidden">hidden</div> 201 <div class="invisible">invisible</div> --> 202 <br /> 203 204 <!-- 栅格布局 --> 205 <div class="row"> 206 <div id="bjys" class="col-xs-6">66分</div> 207 <div id="bjys" class="col-xs-6">66分</div> 208 </div> 209 <div class="row"> 210 <div id="bjys" class="col-xs-3">33分</div> 211 <div id="bjys" class="col-xs-4">44分</div> 212 <div id="bjys" class="col-xs-6">55分</div> 213 </div> 214 215 </div> 216 <!-- 下拉菜单 --> 217 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 218 <li><a tabindex="-1" href="#">功能一</a></li> 219 <li><a tabindex="-1" href="#">功能二</a></li> 220 <li><a tabindex="-1" href="#">功能三</a></li> 221 <li class="divider"></li> 222 <li><a tabindex="-1" href="#">功能四</a></li> 223 </ul> 224 225 <!-- 导航 --> 226 <div class="navbar"> 227 <div class="navbar-inner"> 228 <a class="brand" href="#">Title</a> 229 <ul class="nav"> 230 <li class="active"><a href="#">首页</a></li> 231 <li><a href="#">功能一</a></li> 232 <li><a href="#">功能二</a></li> 233 </ul> 234 </div> 235 236 237 <!-- 按钮组 --> 238 <h3>单一按钮组</h3> 239 <div class="btn-group"> 240 <button class="btn">Left</button> 241 <button class="btn">Middle</button> 242 <button class="btn">Right</button> 243 </div> 244 245 <!-- 多维按钮 --> 246 <h3>多维按钮</h3> 247 <div class="btn-toolbar"> 248 <div class="btn-group"> 249 <button class="btn">按钮一</button> 250 <button class="btn">按钮一</button> 251 <button class="btn">按钮一</button> 252 </div> 253 <div class="btn-group"> 254 <button class="btn">按钮四</button> 255 <button class="btn">按钮五</button> 256 </div> 257 <button class="btn">按钮六</button> 258 </div> 259 260 <h3>垂直按钮组</h3> 261 <div class="btn-group btn-group-vertical"> 262 <button class="btn">按钮一</button> 263 <button class="btn">按钮一</button> 264 <button class="btn">按钮一</button> 265 </div> 266 267 <!-- 按钮式下拉菜单 --> 268 <h3>按钮式下拉菜单</h3> 269 <div class="btn-group"> 270 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 271 Action 272 <span class="caret"></span> 273 </a> 274 <ul class="dropdown-menu"> 275 <!-- dropdown menu links --> 276 </ul> 277 </div> 278 279 <h3>分列式下拉菜单</h3> 280 <div class="btn-group"> 281 <button class="btn">Action</button> 282 <button class="btn dropdown-toggle" data-toggle="dropdown"> 283 <span class="caret"></span> 284 </button> 285 <ul class="dropdown-menu"> 286 <!-- dropdown menu links --> 287 </ul> 288 </div> 289 290 <h3>向上弹出式菜单</h3> 291 <div class="btn-group dropup"> 292 <button class="btn">Dropup</button> 293 <button class="btn dropdown-toggle" data-toggle="dropdown"> 294 <span class="caret"></span> 295 </button> 296 <ul class="dropdown-menu"> 297 <!-- dropdown menu links --> 298 </ul> 299 </div> 300 301 <!-- 导航 --> 302 <h3>标签页导航</h3> 303 <ul class="nav nav-tabs"> 304 <li class="active"> 305 <a href="#">首页</a> 306 </li> 307 <li><a href="#">功能一</a></li> 308 <li><a href="#">功能二</a></li> 309 </ul> 310 311 <div class="tabbable"> <!-- Only required for left/right tabs --> 312 <ul class="nav nav-tabs"> 313 <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 314 <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 315 </ul> 316 <div class="tab-content"> 317 <div class="tab-pane fade active" id="tab1"> 318 <p>I'm in Section 1.</p> 319 </div> 320 <div class="tab-pane fade" id="tab2"> 321 <p>Howdy, I'm in Section 2.</p> 322 </div> 323 </div> 324 </div> 325 326 <h3>基本pills导航</h3> 327 <ul class="nav nav-pills"> 328 <li class="active"> 329 <a href="#">首页</a> 330 </li> 331 <li><a href="#">功能一</a></li> 332 <li><a href="#">功能二</a></li> 333 <li class="disabled"><a href="#">禁用状态功能</a></li> 334 </ul> 335 336 <br /> 337 <!-- 表单 --> 338 <h3>表单</h3> 339 <form class="navbar-form"> 340 <input type="text" class="span2"> 341 <button type="submit" class="btn">Submit</button> 342 </form> 343 344 <h3>搜索表单</h3> 345 <form class="navbar-search pull-left"> 346 <input type="text" class="search-query" placeholder="Search"> 347 </form> 348 <hr> 349 <h3>响应式导航条</h3> 350 <div class="navbar"> 351 <div class="navbar-inner"> 352 <div class="container"> 353 354 <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 355 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 356 <span class="icon-bar"></span> 357 <span class="icon-bar"></span> 358 <span class="icon-bar"></span> 359 </a> 360 361 <!-- Be sure to leave the brand out there if you want it shown --> 362 <a class="brand" href="#">Project name</a> 363 364 <!-- Everything you want hidden at 940px or less, place within here --> 365 <div class="nav-collapse collapse"> 366 <!-- .nav, .navbar-search, .navbar-form, etc --> 367 </div> 368 369 </div> 370 </div> 371 </div> 372 </div> 373 </body> 374 </html>