example18.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <link href="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div class="row clearfix">
  11. <div class="col-md-2 column">
  12. <img alt="140x140" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/140/140/default.jpg" />
  13. </div>
  14. <div class="col-md-10 column">
  15. <h3>
  16. h3. 这是一套可视化布局系统.
  17. </h3>
  18. <ul class="nav nav-tabs">
  19. <li class="active">
  20. <a href="#">首页</a>
  21. </li>
  22. <li>
  23. <a href="#">简介</a>
  24. </li>
  25. <li class="disabled">
  26. <a href="#">信息</a>
  27. </li>
  28. <li class="dropdown pull-right">
  29. <a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
  30. <ul class="dropdown-menu">
  31. <li>
  32. <a href="#">操作</a>
  33. </li>
  34. <li>
  35. <a href="#">设置栏目</a>
  36. </li>
  37. <li>
  38. <a href="#">更多设置</a>
  39. </li>
  40. <li class="divider">
  41. </li>
  42. <li>
  43. <a href="#">分割线</a>
  44. </li>
  45. </ul>
  46. </li>
  47. </ul>
  48. </div>
  49. </div>
  50. <div class="row clearfix">
  51. <div class="col-md-12 column">
  52. <div class="carousel slide" id="carousel-830515">
  53. <ol class="carousel-indicators">
  54. <li class="active" data-slide-to="0" data-target="#carousel-830515">
  55. </li>
  56. <li data-slide-to="1" data-target="#carousel-830515">
  57. </li>
  58. <li data-slide-to="2" data-target="#carousel-830515">
  59. </li>
  60. </ol>
  61. <div class="carousel-inner">
  62. <div class="item active">
  63. <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
  64. <div class="carousel-caption">
  65. <h4>
  66. First Thumbnail label
  67. </h4>
  68. <p>
  69. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  70. </p>
  71. </div>
  72. </div>
  73. <div class="item">
  74. <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
  75. <div class="carousel-caption">
  76. <h4>
  77. Second Thumbnail label
  78. </h4>
  79. <p>
  80. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  81. </p>
  82. </div>
  83. </div>
  84. <div class="item">
  85. <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
  86. <div class="carousel-caption">
  87. <h4>
  88. Third Thumbnail label
  89. </h4>
  90. <p>
  91. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  92. </p>
  93. </div>
  94. </div>
  95. </div>
  96. <a class="left carousel-control" href="#carousel-830515" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  97. <a class="right carousel-control" href="#carousel-830515" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="row clearfix">
  102. <div class="col-md-8 column">
  103. <p>
  104. <em>Git</em> 是一个分布式的版本控制系统,最初由 <strong>Linus Torvalds</strong> 编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在 <small>Ruby</small> 社区中。
  105. </p>
  106. <table class="table">
  107. <thead>
  108. <tr>
  109. <th>
  110. 编号
  111. </th>
  112. <th>
  113. 产品
  114. </th>
  115. <th>
  116. 交付时间
  117. </th>
  118. <th>
  119. 状态
  120. </th>
  121. </tr>
  122. </thead>
  123. <tbody>
  124. <tr>
  125. <td>
  126. 1
  127. </td>
  128. <td>
  129. TB - Monthly
  130. </td>
  131. <td>
  132. 01/04/2012
  133. </td>
  134. <td>
  135. Default
  136. </td>
  137. </tr>
  138. <tr class="success">
  139. <td>
  140. 1
  141. </td>
  142. <td>
  143. TB - Monthly
  144. </td>
  145. <td>
  146. 01/04/2012
  147. </td>
  148. <td>
  149. Approved
  150. </td>
  151. </tr>
  152. <tr class="error">
  153. <td>
  154. 2
  155. </td>
  156. <td>
  157. TB - Monthly
  158. </td>
  159. <td>
  160. 02/04/2012
  161. </td>
  162. <td>
  163. Declined
  164. </td>
  165. </tr>
  166. <tr class="warning">
  167. <td>
  168. 3
  169. </td>
  170. <td>
  171. TB - Monthly
  172. </td>
  173. <td>
  174. 03/04/2012
  175. </td>
  176. <td>
  177. Pending
  178. </td>
  179. </tr>
  180. <tr class="info">
  181. <td>
  182. 4
  183. </td>
  184. <td>
  185. TB - Monthly
  186. </td>
  187. <td>
  188. 04/04/2012
  189. </td>
  190. <td>
  191. Call in to confirm
  192. </td>
  193. </tr>
  194. </tbody>
  195. </table>
  196. <ul class="pagination">
  197. <li>
  198. <a href="#">Prev</a>
  199. </li>
  200. <li>
  201. <a href="#">1</a>
  202. </li>
  203. <li>
  204. <a href="#">2</a>
  205. </li>
  206. <li>
  207. <a href="#">3</a>
  208. </li>
  209. <li>
  210. <a href="#">4</a>
  211. </li>
  212. <li>
  213. <a href="#">5</a>
  214. </li>
  215. <li>
  216. <a href="#">Next</a>
  217. </li>
  218. </ul>
  219. </div>
  220. <div class="col-md-4 column">
  221. <ul>
  222. <li>
  223. Lorem ipsum dolor sit amet
  224. </li>
  225. <li>
  226. Consectetur adipiscing elit
  227. </li>
  228. <li>
  229. Integer molestie lorem at massa
  230. </li>
  231. <li>
  232. Facilisis in pretium nisl aliquet
  233. </li>
  234. <li>
  235. Nulla volutpat aliquam velit
  236. </li>
  237. <li>
  238. Faucibus porta lacus fringilla vel
  239. </li>
  240. <li>
  241. Aenean sit amet erat nunc
  242. </li>
  243. <li>
  244. Eget porttitor lorem
  245. </li>
  246. </ul>
  247. <ol>
  248. <li>
  249. Lorem ipsum dolor sit amet
  250. </li>
  251. <li>
  252. Consectetur adipiscing elit
  253. </li>
  254. <li>
  255. Integer molestie lorem at massa
  256. </li>
  257. <li>
  258. Facilisis in pretium nisl aliquet
  259. </li>
  260. <li>
  261. Nulla volutpat aliquam velit
  262. </li>
  263. <li>
  264. Faucibus porta lacus fringilla vel
  265. </li>
  266. <li>
  267. Aenean sit amet erat nunc
  268. </li>
  269. <li>
  270. Eget porttitor lorem
  271. </li>
  272. </ol>
  273. </div>
  274. </div>
  275. <div class="row clearfix">
  276. <div class="col-md-4 column">
  277. <p>
  278. <em>Git</em> 是一个分布式的版本控制系统,最初由 <strong>Linus Torvalds</strong> 编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在 <small>Ruby</small> 社区中。
  279. </p>
  280. </div>
  281. <div class="col-md-4 column">
  282. <p>
  283. <em>Git</em> 是一个分布式的版本控制系统,最初由 <strong>Linus Torvalds</strong> 编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在 <small>Ruby</small> 社区中。
  284. </p>
  285. </div>
  286. <div class="col-md-4 column">
  287. <p>
  288. <em>Git</em> 是一个分布式的版本控制系统,最初由 <strong>Linus Torvalds</strong> 编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在 <small>Ruby</small> 社区中。
  289. </p>
  290. </div>
  291. </div>
  292. </div>
  293. <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  294. <script src="https://cdn.bootcss.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
  295. </body>
  296. </html>