css-tests.html 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CSS Tests · Twitter Bootstrap</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <!-- Le styles -->
  10. <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
  11. <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
  12. <link href="../../docs/assets/css/docs.css" rel="stylesheet">
  13. <link href="../../docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
  14. <!-- CSS just for the tests page -->
  15. <link href="css-tests.css" rel="stylesheet">
  16. <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  17. <!--[if lt IE 9]>
  18. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  19. <![endif]-->
  20. <!-- Le fav and touch icons -->
  21. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
  22. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
  23. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
  24. <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
  25. <link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
  26. </head>
  27. <body>
  28. <!-- Navbar
  29. ================================================== -->
  30. <div class="navbar navbar-inverse navbar-fixed-top">
  31. <div class="navbar-inner">
  32. <div class="container">
  33. <a class="brand" href="../../docs/index.html">Bootstrap</a>
  34. </div>
  35. </div>
  36. </div>
  37. <!-- Masthead
  38. ================================================== -->
  39. <header class="jumbotron subhead" id="overview">
  40. <div class="container">
  41. <h1>CSS Tests</h1>
  42. <p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p>
  43. </div>
  44. </header>
  45. <div class="bs-docs-canvas">
  46. <div class="container">
  47. <!-- Typography
  48. ================================================== -->
  49. <div class="page-header">
  50. <h1>Typography</h1>
  51. </div>
  52. <div class="row">
  53. <div class="span6">
  54. <div class="type-test">
  55. <h1>h1. Heading 1</h1>
  56. <h2>h2. Heading 2</h2>
  57. <h3>h3. Heading 3</h3>
  58. <h4>h4. Heading 4</h4>
  59. <h5>h5. Heading 5</h5>
  60. <h6>h6. Heading 6</h6>
  61. <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  62. </div>
  63. </div>
  64. <div class="span6">
  65. <div class="type-test">
  66. <h1>h1. Heading 1</h1>
  67. <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  68. <h2>h2. Heading 2</h2>
  69. <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  70. <h3>h3. Heading 3</h3>
  71. <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  72. <h4>h4. Heading 4</h4>
  73. <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  74. <h5>h5. Heading 5</h5>
  75. <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  76. <h6>h6. Heading 6</h6>
  77. <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  78. </div>
  79. </div>
  80. </div>
  81. <!-- Responsive images
  82. ================================================== -->
  83. <div class="page-header">
  84. <h1>Responsive images</h1>
  85. </div>
  86. <div class="row">
  87. <div class="span4">
  88. <img data-src="holder.js/600x600" height="200">
  89. </div>
  90. <div class="span4">
  91. <img data-src="holder.js/600x600">
  92. </div>
  93. <div class="span4">
  94. <img data-src="holder.js/600x600">
  95. </div>
  96. </div>
  97. <br>
  98. <div class="row">
  99. <div class="span4">
  100. <img data-src="holder.js/600x900" style="width: 200px;">
  101. </div>
  102. <div class="span4">
  103. <img data-src="holder.js/200x300">
  104. </div>
  105. <div class="span4">
  106. <img data-src="holder.js/600x600">
  107. </div>
  108. </div>
  109. <br><br>
  110. <!-- Fluid grid
  111. ================================================== -->
  112. <div class="page-header">
  113. <h1>Fluid grids</h1>
  114. </div>
  115. <div class="fluid-grid">
  116. <div class="row">
  117. <div class="span12">12
  118. <div class="row-fluid">
  119. <div class="span1">1</div>
  120. <div class="span1">1</div>
  121. <div class="span1">1</div>
  122. <div class="span1">1</div>
  123. <div class="span1">1</div>
  124. <div class="span1">1</div>
  125. <div class="span1">1</div>
  126. <div class="span1">1</div>
  127. <div class="span1">1</div>
  128. <div class="span1">1</div>
  129. <div class="span1">1</div>
  130. <div class="span1">1</div>
  131. </div>
  132. </div>
  133. </div>
  134. <div class="row">
  135. <div class="span11">11
  136. <div class="row-fluid">
  137. <div class="span1">1</div>
  138. <div class="span1">1</div>
  139. <div class="span1">1</div>
  140. <div class="span1">1</div>
  141. <div class="span1">1</div>
  142. <div class="span1">1</div>
  143. <div class="span1">1</div>
  144. <div class="span1">1</div>
  145. <div class="span1">1</div>
  146. <div class="span1">1</div>
  147. <div class="span1">1</div>
  148. <div class="span1">1</div>
  149. </div>
  150. </div>
  151. <div class="span1">1
  152. <div class="row-fluid">
  153. <div class="span1">1</div>
  154. <div class="span1">1</div>
  155. <div class="span1">1</div>
  156. <div class="span1">1</div>
  157. <div class="span1">1</div>
  158. <div class="span1">1</div>
  159. <div class="span1">1</div>
  160. <div class="span1">1</div>
  161. <div class="span1">1</div>
  162. <div class="span1">1</div>
  163. <div class="span1">1</div>
  164. <div class="span1">1</div>
  165. </div>
  166. </div>
  167. </div>
  168. <div class="row">
  169. <div class="span10">10
  170. <div class="row-fluid">
  171. <div class="span1">1</div>
  172. <div class="span1">1</div>
  173. <div class="span1">1</div>
  174. <div class="span1">1</div>
  175. <div class="span1">1</div>
  176. <div class="span1">1</div>
  177. <div class="span1">1</div>
  178. <div class="span1">1</div>
  179. <div class="span1">1</div>
  180. <div class="span1">1</div>
  181. <div class="span1">1</div>
  182. <div class="span1">1</div>
  183. </div>
  184. </div>
  185. <div class="span2">2
  186. <div class="row-fluid">
  187. <div class="span1">1</div>
  188. <div class="span1">1</div>
  189. <div class="span1">1</div>
  190. <div class="span1">1</div>
  191. <div class="span1">1</div>
  192. <div class="span1">1</div>
  193. <div class="span1">1</div>
  194. <div class="span1">1</div>
  195. <div class="span1">1</div>
  196. <div class="span1">1</div>
  197. <div class="span1">1</div>
  198. <div class="span1">1</div>
  199. </div>
  200. </div>
  201. </div>
  202. <div class="row">
  203. <div class="span9">9
  204. <div class="row-fluid">
  205. <div class="span1">1</div>
  206. <div class="span1">1</div>
  207. <div class="span1">1</div>
  208. <div class="span1">1</div>
  209. <div class="span1">1</div>
  210. <div class="span1">1</div>
  211. <div class="span1">1</div>
  212. <div class="span1">1</div>
  213. <div class="span1">1</div>
  214. <div class="span1">1</div>
  215. <div class="span1">1</div>
  216. <div class="span1">1</div>
  217. </div>
  218. </div>
  219. <div class="span3">3
  220. <div class="row-fluid">
  221. <div class="span1">1</div>
  222. <div class="span1">1</div>
  223. <div class="span1">1</div>
  224. <div class="span1">1</div>
  225. <div class="span1">1</div>
  226. <div class="span1">1</div>
  227. <div class="span1">1</div>
  228. <div class="span1">1</div>
  229. <div class="span1">1</div>
  230. <div class="span1">1</div>
  231. <div class="span1">1</div>
  232. <div class="span1">1</div>
  233. </div>
  234. </div>
  235. </div>
  236. <div class="row">
  237. <div class="span8">8
  238. <div class="row-fluid">
  239. <div class="span1">1</div>
  240. <div class="span1">1</div>
  241. <div class="span1">1</div>
  242. <div class="span1">1</div>
  243. <div class="span1">1</div>
  244. <div class="span1">1</div>
  245. <div class="span1">1</div>
  246. <div class="span1">1</div>
  247. <div class="span1">1</div>
  248. <div class="span1">1</div>
  249. <div class="span1">1</div>
  250. <div class="span1">1</div>
  251. </div>
  252. </div>
  253. <div class="span4">4
  254. <div class="row-fluid">
  255. <div class="span1">1</div>
  256. <div class="span1">1</div>
  257. <div class="span1">1</div>
  258. <div class="span1">1</div>
  259. <div class="span1">1</div>
  260. <div class="span1">1</div>
  261. <div class="span1">1</div>
  262. <div class="span1">1</div>
  263. <div class="span1">1</div>
  264. <div class="span1">1</div>
  265. <div class="span1">1</div>
  266. <div class="span1">1</div>
  267. </div>
  268. </div>
  269. </div>
  270. <div class="row">
  271. <div class="span7">7
  272. <div class="row-fluid">
  273. <div class="span1">1</div>
  274. <div class="span1">1</div>
  275. <div class="span1">1</div>
  276. <div class="span1">1</div>
  277. <div class="span1">1</div>
  278. <div class="span1">1</div>
  279. <div class="span1">1</div>
  280. <div class="span1">1</div>
  281. <div class="span1">1</div>
  282. <div class="span1">1</div>
  283. <div class="span1">1</div>
  284. <div class="span1">1</div>
  285. </div>
  286. </div>
  287. <div class="span5">5
  288. <div class="row-fluid">
  289. <div class="span1">1</div>
  290. <div class="span1">1</div>
  291. <div class="span1">1</div>
  292. <div class="span1">1</div>
  293. <div class="span1">1</div>
  294. <div class="span1">1</div>
  295. <div class="span1">1</div>
  296. <div class="span1">1</div>
  297. <div class="span1">1</div>
  298. <div class="span1">1</div>
  299. <div class="span1">1</div>
  300. <div class="span1">1</div>
  301. </div>
  302. </div>
  303. </div>
  304. <div class="row">
  305. <div class="span6">6
  306. <div class="row-fluid">
  307. <div class="span1">1</div>
  308. <div class="span1">1</div>
  309. <div class="span1">1</div>
  310. <div class="span1">1</div>
  311. <div class="span1">1</div>
  312. <div class="span1">1</div>
  313. <div class="span1">1</div>
  314. <div class="span1">1</div>
  315. <div class="span1">1</div>
  316. <div class="span1">1</div>
  317. <div class="span1">1</div>
  318. <div class="span1">1</div>
  319. </div>
  320. </div>
  321. <div class="span6">6
  322. <div class="row-fluid">
  323. <div class="span1">1</div>
  324. <div class="span1">1</div>
  325. <div class="span1">1</div>
  326. <div class="span1">1</div>
  327. <div class="span1">1</div>
  328. <div class="span1">1</div>
  329. <div class="span1">1</div>
  330. <div class="span1">1</div>
  331. <div class="span1">1</div>
  332. <div class="span1">1</div>
  333. <div class="span1">1</div>
  334. <div class="span1">1</div>
  335. </div>
  336. </div>
  337. </div>
  338. </div> <!-- fluid grids -->
  339. <!-- Tables
  340. ================================================== -->
  341. <div class="page-header">
  342. <h1>Tables</h1>
  343. </div>
  344. <div class="row">
  345. <div class="span6">
  346. <h4>Bordered without thead</h4>
  347. <table class="table table-bordered">
  348. <tbody>
  349. <tr>
  350. <td>1</td>
  351. <td>2</td>
  352. <td>3</td>
  353. </tr>
  354. <tr>
  355. <td>1</td>
  356. <td>2</td>
  357. <td>3</td>
  358. </tr>
  359. <tr>
  360. <td>1</td>
  361. <td>2</td>
  362. <td>3</td>
  363. </tr>
  364. </tbody>
  365. </table>
  366. <h4>Bordered without thead, with caption</h4>
  367. <table class="table table-bordered">
  368. <caption>Table caption</caption>
  369. <tbody>
  370. <tr>
  371. <td>1</td>
  372. <td>2</td>
  373. <td>3</td>
  374. </tr>
  375. <tr>
  376. <td>1</td>
  377. <td>2</td>
  378. <td>3</td>
  379. </tr>
  380. <tr>
  381. <td>1</td>
  382. <td>2</td>
  383. <td>3</td>
  384. </tr>
  385. </tbody>
  386. </table>
  387. <h4>Bordered without thead, with colgroup</h4>
  388. <table class="table table-bordered">
  389. <colgroup>
  390. <col class="col1">
  391. <col class="col2">
  392. <col class="col3">
  393. </colgroup>
  394. <tbody>
  395. <tr>
  396. <td>1</td>
  397. <td>2</td>
  398. <td>3</td>
  399. </tr>
  400. <tr>
  401. <td>1</td>
  402. <td>2</td>
  403. <td>3</td>
  404. </tr>
  405. <tr>
  406. <td>1</td>
  407. <td>2</td>
  408. <td>3</td>
  409. </tr>
  410. </tbody>
  411. <tfoot>
  412. <tr>
  413. <td>3</td>
  414. <td>6</td>
  415. <td>9</td>
  416. </tr>
  417. </tfoot>
  418. </table>
  419. <h4>Bordered with thead, with colgroup</h4>
  420. <table class="table table-bordered">
  421. <colgroup>
  422. <col class="col1">
  423. <col class="col2">
  424. <col class="col3">
  425. </colgroup>
  426. <thead>
  427. <tr>
  428. <th>A</th>
  429. <th>B</th>
  430. <th>C</th>
  431. </tr>
  432. </thead>
  433. <tbody>
  434. <tr>
  435. <td>1</td>
  436. <td>2</td>
  437. <td>3</td>
  438. </tr>
  439. <tr>
  440. <td>1</td>
  441. <td>2</td>
  442. <td>3</td>
  443. </tr>
  444. <tr>
  445. <td>1</td>
  446. <td>2</td>
  447. <td>3</td>
  448. </tr>
  449. </tbody>
  450. <tfoot>
  451. <tr>
  452. <td>3</td>
  453. <td>6</td>
  454. <td>9</td>
  455. </tr>
  456. </tfoot>
  457. </table>
  458. </div><!--/span-->
  459. <div class="span6">
  460. <h4>Bordered with thead and caption</h4>
  461. <table class="table table-bordered">
  462. <caption>Table caption</caption>
  463. <thead>
  464. <tr>
  465. <th>1</th>
  466. <th>2</th>
  467. <th>3</th>
  468. </tr>
  469. </thead>
  470. <tbody>
  471. <tr>
  472. <td>1</td>
  473. <td>2</td>
  474. <td>3</td>
  475. </tr>
  476. <tr>
  477. <td>1</td>
  478. <td>2</td>
  479. <td>3</td>
  480. </tr>
  481. <tr>
  482. <td>1</td>
  483. <td>2</td>
  484. <td>3</td>
  485. </tr>
  486. </tbody>
  487. <tfoot>
  488. <tr>
  489. <td>3</td>
  490. <td>6</td>
  491. <td>9</td>
  492. </tr>
  493. </tfoot>
  494. </table>
  495. <h4>Bordered with rowspan and colspan</h4>
  496. <table class="table table-bordered">
  497. <thead>
  498. <tr>
  499. <th>1</th>
  500. <th>2</th>
  501. <th>3</th>
  502. </tr>
  503. </thead>
  504. <tbody>
  505. <tr>
  506. <td colspan="2">1 and 2</td>
  507. <td>3</td>
  508. </tr>
  509. <tr>
  510. <td>1</td>
  511. <td rowspan="2">2</td>
  512. <td>3</td>
  513. </tr>
  514. <tr>
  515. <td rowspan="2">1</td>
  516. <td>3</td>
  517. </tr>
  518. <tr>
  519. <td colspan="2">2 and 3</td>
  520. </tr>
  521. </tbody>
  522. </table>
  523. </div><!--/span-->
  524. </div><!--/row-->
  525. <h4>Grid sizing</h4>
  526. <div class="row">
  527. <div class="span12">
  528. <table class="table table-bordered">
  529. <thead>
  530. <tr>
  531. <th class="span3">1</th>
  532. <th class="span4">2</th>
  533. <th>3</th>
  534. </tr>
  535. </thead>
  536. <tbody>
  537. <tr>
  538. <td colspan="2">1 and 2</td>
  539. <td>3</td>
  540. </tr>
  541. <tr>
  542. <td>1</td>
  543. <td rowspan="2">2</td>
  544. <td>3</td>
  545. </tr>
  546. <tr>
  547. <td rowspan="2">1</td>
  548. <td>3</td>
  549. </tr>
  550. <tr>
  551. <td colspan="2">2 and 3</td>
  552. </tr>
  553. </tbody>
  554. </table>
  555. </div>
  556. </div><!--/row-->
  557. <h4>Nesting and striping</h4>
  558. <table class="table table-bordered table-striped">
  559. <thead>
  560. <tr>
  561. <th>Test</th>
  562. </tr>
  563. </thead>
  564. <tbody>
  565. <tr>
  566. <td>
  567. <table class="table table-bordered table-striped">
  568. <thead>
  569. <tr>
  570. <th>Test</th>
  571. <th>Test</th>
  572. </tr>
  573. </thead>
  574. <tbody>
  575. <tr>
  576. <td>
  577. test
  578. </td>
  579. <td>
  580. test
  581. </td>
  582. </tr>
  583. <tr>
  584. <td>
  585. test
  586. </td>
  587. <td>
  588. test
  589. </td>
  590. </tr>
  591. <tr>
  592. <td>
  593. test
  594. </td>
  595. <td>
  596. test
  597. </td>
  598. </tr>
  599. </tbody>
  600. </table>
  601. </td>
  602. </tr>
  603. </tbody>
  604. </table>
  605. <h4>Fluid grid sizing</h4>
  606. <div class="row-fluid">
  607. <div class="span12">
  608. <table class="table table-bordered">
  609. <thead>
  610. <tr>
  611. <th class="span3">1</th>
  612. <th class="span4">2</th>
  613. <th>3</th>
  614. </tr>
  615. </thead>
  616. <tbody>
  617. <tr>
  618. <td colspan="2">1 and 2</td>
  619. <td>3</td>
  620. </tr>
  621. <tr>
  622. <td>1</td>
  623. <td rowspan="2">2</td>
  624. <td>3</td>
  625. </tr>
  626. <tr>
  627. <td rowspan="2">1</td>
  628. <td>3</td>
  629. </tr>
  630. <tr>
  631. <td colspan="2">2 and 3</td>
  632. </tr>
  633. </tbody>
  634. </table>
  635. </div>
  636. </div><!--/row-->
  637. <!-- Forms
  638. ================================================== -->
  639. <div class="page-header">
  640. <h1>Forms</h1>
  641. </div>
  642. <h4>Buttons and button groups</h4>
  643. <form class="form-inline">
  644. <button class="btn btn-success">Save</button>
  645. <button class="btn btn-info">Add new</button>
  646. <div class="btn-group">
  647. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  648. <i class="icon-user"></i> User
  649. <span class="caret"></span>
  650. </a>
  651. <ul class="dropdown-menu">
  652. <li><a href="#">Profile</a></li>
  653. <li class="divider"></li>
  654. <li><a href="#">Sign Out</a></li>
  655. </ul>
  656. </div>
  657. </form>
  658. <h4>Horizontal form errors</h4>
  659. <form class="form-horizontal">
  660. <div class="control-group error">
  661. <label class="control-label" for="inputError">Radio with error</label>
  662. <div class="controls">
  663. <label class="radio">
  664. <input type="radio" id="inputError"> Oh hai
  665. </label>
  666. <span class="help-inline">Please correct the error</span>
  667. </div>
  668. </div>
  669. </form>
  670. <div class="row">
  671. <div class="span4">
  672. <h4>Prepend and append on inputs</h4>
  673. <form>
  674. <div class="controls">
  675. <div class="input-prepend">
  676. <span class="add-on">@</span>
  677. <input class="span2" id="prependedInput" size="16" type="text">
  678. </div>
  679. </div>
  680. <div class="controls">
  681. <div class="input-append">
  682. <input class="span2" id="prependedInput" size="16" type="text">
  683. <span class="add-on">@</span>
  684. </div>
  685. </div>
  686. <div class="controls">
  687. <div class="input-prepend input-append">
  688. <span class="add-on">$</span>
  689. <input class="span2" id="prependedInput" size="16" type="text">
  690. <span class="add-on">.00</span>
  691. </div>
  692. </div>
  693. </form>
  694. </div><!--/span-->
  695. <div class="span4">
  696. <h4>Prepend and append with uneditable</h4>
  697. <form>
  698. <div class="input-prepend">
  699. <span class="add-on">$</span>
  700. <span class="span2 uneditable-input">Some value here</span>
  701. </div>
  702. <div class="input-append">
  703. <span class="span2 uneditable-input">Some value here</span>
  704. <span class="add-on">.00</span>
  705. </div>
  706. <div class="input-prepend input-append">
  707. <span class="add-on">$</span>
  708. <span class="span2 uneditable-input">Some value here</span>
  709. <span class="add-on">.00</span>
  710. </div>
  711. </form>
  712. </div><!--/span-->
  713. <div class="span4">
  714. <h4>Prepend with type="submit"</h4>
  715. <form class="form-search">
  716. <div class="input-append">
  717. <input type="text" class="span2 search-query" value="" name="q">
  718. <input type="submit" value="Search" class="btn">
  719. </div>
  720. </form>
  721. <div class="input-append">
  722. <input type="text" class="span2" value="" name="">
  723. <input type="submit" value="Button" class="btn">
  724. </div>
  725. <div class="input-append">
  726. <input type="text" size="16" id="appendedInputButtons" class="span2">
  727. <input type="submit" value="Search" class="btn">
  728. <button type="button" class="btn">Options</button>
  729. </div>
  730. </div><!--/span-->
  731. </div><!--/row-->
  732. <h4>Fluid prepended and appended inputs</h4>
  733. <div class="row-fluid">
  734. <div class="span6">
  735. <form>
  736. <div class="controls">
  737. <div class="input-prepend">
  738. <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
  739. </div>
  740. </div>
  741. <div class="controls">
  742. <div class="input-append">
  743. <input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
  744. </div>
  745. </div>
  746. <div class="controls">
  747. <div class="input-prepend input-append">
  748. <span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
  749. </div>
  750. </div>
  751. </form>
  752. </div>
  753. </div>
  754. <h4>Fixed row with inputs</h4>
  755. <p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
  756. <div class="rowInputs">
  757. <div class="row">
  758. <div class="span12">
  759. <input type="text" class="span1" placeholder="span1">
  760. </div><!--/span-->
  761. </div><!--/row-->
  762. <div class="row">
  763. <div class="span12">
  764. <input type="text" class="span2" placeholder="span2">
  765. </div><!--/span-->
  766. </div><!--/row-->
  767. <div class="row">
  768. <div class="span12">
  769. <input type="text" class="span3" placeholder="span3">
  770. </div><!--/span-->
  771. </div><!--/row-->
  772. <div class="row">
  773. <div class="span12">
  774. <input type="text" class="span4" placeholder="span4">
  775. </div><!--/span-->
  776. </div><!--/row-->
  777. <div class="row">
  778. <div class="span12">
  779. <input type="text" class="span5" placeholder="span5">
  780. </div><!--/span-->
  781. </div><!--/row-->
  782. <div class="row">
  783. <div class="span12">
  784. <input type="text" class="span6" placeholder="span6">
  785. </div><!--/span-->
  786. </div><!--/row-->
  787. <div class="row">
  788. <div class="span12">
  789. <input type="text" class="span7" placeholder="span7">
  790. </div><!--/span-->
  791. </div><!--/row-->
  792. <div class="row">
  793. <div class="span12">
  794. <input type="text" class="span8" placeholder="span8">
  795. </div><!--/span-->
  796. </div><!--/row-->
  797. <div class="row">
  798. <div class="span12">
  799. <input type="text" class="span9" placeholder="span9">
  800. </div><!--/span-->
  801. </div><!--/row-->
  802. <div class="row">
  803. <div class="span12">
  804. <input type="text" class="span10" placeholder="span10">
  805. </div><!--/span-->
  806. </div><!--/row-->
  807. <div class="row">
  808. <div class="span12">
  809. <input type="text" class="span11" placeholder="span11">
  810. </div><!--/span-->
  811. </div><!--/row-->
  812. <div class="row">
  813. <div class="span12">
  814. <input type="text" class="span12" placeholder="span12">
  815. </div><!--/span-->
  816. </div><!--/row-->
  817. </div>
  818. <br>
  819. <h4>Fluid row with inputs</h4>
  820. <p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
  821. <div id="fluidRowInputs">
  822. <div class="row-fluid">
  823. <div class="span12">
  824. <input type="text" class="span1" placeholder="span1">
  825. </div><!--/span-->
  826. </div><!--/row-->
  827. <div class="row-fluid">
  828. <div class="span12">
  829. <input type="text" class="span2" placeholder="span2">
  830. </div><!--/span-->
  831. </div><!--/row-->
  832. <div class="row-fluid">
  833. <div class="span12">
  834. <input type="text" class="span3" placeholder="span3">
  835. </div><!--/span-->
  836. </div><!--/row-->
  837. <div class="row-fluid">
  838. <div class="span12">
  839. <input type="text" class="span4" placeholder="span4">
  840. </div><!--/span-->
  841. </div><!--/row-->
  842. <div class="row-fluid">
  843. <div class="span12">
  844. <input type="text" class="span5" placeholder="span5">
  845. </div><!--/span-->
  846. </div><!--/row-->
  847. <div class="row-fluid">
  848. <div class="span12">
  849. <input type="text" class="span6" placeholder="span6">
  850. </div><!--/span-->
  851. </div><!--/row-->
  852. <div class="row-fluid">
  853. <div class="span12">
  854. <input type="text" class="span7" placeholder="span7">
  855. </div><!--/span-->
  856. </div><!--/row-->
  857. <div class="row-fluid">
  858. <div class="span12">
  859. <input type="text" class="span8" placeholder="span8">
  860. </div><!--/span-->
  861. </div><!--/row-->
  862. <div class="row-fluid">
  863. <div class="span12">
  864. <input type="text" class="span9" placeholder="span9">
  865. </div><!--/span-->
  866. </div><!--/row-->
  867. <div class="row-fluid">
  868. <div class="span12">
  869. <input type="text" class="span10" placeholder="span10">
  870. </div><!--/span-->
  871. </div><!--/row-->
  872. <div class="row-fluid">
  873. <div class="span12">
  874. <input type="text" class="span11" placeholder="span11">
  875. </div><!--/span-->
  876. </div><!--/row-->
  877. <div class="row-fluid">
  878. <div class="span12">
  879. <input type="text" class="span12" placeholder="span12">
  880. </div><!--/span-->
  881. </div><!--/row-->
  882. </div>
  883. <br>
  884. <h4>Inline form in fluid row</h4>
  885. <div class="row-fluid">
  886. <div class="span12">
  887. <form class="form-inline">
  888. <input type="text" class="span3" placeholder="Email">
  889. <input type="password" class="span3" placeholder="Password">
  890. <label class="checkbox">
  891. <input type="checkbox"> Remember me
  892. </label>
  893. <button type="submit" class="btn">Sign in</button>
  894. </form>
  895. </div>
  896. </div>
  897. <br>
  898. <h4>Fluid textarea at .span12</h4>
  899. <div class="row-fluid">
  900. <div class="span12">
  901. <textarea class="span12"></textarea>
  902. </div>
  903. </div>
  904. <br>
  905. <h4>Selects</h4>
  906. <form>
  907. <select class="span4">
  908. <option>Option</option>
  909. </select>
  910. </form>
  911. <br>
  912. <!-- Dropdowns
  913. ================================================== -->
  914. <div class="page-header">
  915. <h1>Dropdowns</h1>
  916. </div>
  917. <h4>Dropdown link with hash URL</h4>
  918. <ul class="nav nav-pills">
  919. <li class="active"><a href="#">Link</a></li>
  920. <li><a href="#">Example link</a></li>
  921. <li class="dropdown">
  922. <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  923. Dropdown <span class="caret"></span>
  924. </a>
  925. <ul class="dropdown-menu">
  926. <li><a href="#">Action</a></li>
  927. <li><a href="#">Another action</a></li>
  928. <li><a href="#">Something else here</a></li>
  929. <li class="divider"></li>
  930. <li><a href="#">Separated link</a></li>
  931. </ul>
  932. </li>
  933. </ul>
  934. <h4>Dropdown link with custom URL and data-target</h4>
  935. <ul class="nav nav-pills">
  936. <li class="active"><a href="#">Link</a></li>
  937. <li><a href="#">Example link</a></li>
  938. <li class="dropdown">
  939. <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
  940. Dropdown <span class="caret"></span>
  941. </a>
  942. <ul class="dropdown-menu">
  943. <li><a href="#">Action</a></li>
  944. <li><a href="#">Another action</a></li>
  945. <li><a href="#">Something else here</a></li>
  946. <li class="divider"></li>
  947. <li><a href="#">Separated link</a></li>
  948. </ul>
  949. </li>
  950. </ul>
  951. <h4>Dropdown on a button</h4>
  952. <div style="position: relative;">
  953. <button class="btn" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
  954. <ul class="dropdown-menu">
  955. <li><a href="#">Action</a></li>
  956. <li><a href="#">Another action</a></li>
  957. <li><a href="#">Something else here</a></li>
  958. <li class="divider"></li>
  959. <li><a href="#">Separated link</a></li>
  960. </ul>
  961. </div>
  962. <br>
  963. <!-- Thumbnails
  964. ================================================== -->
  965. <div class="page-header">
  966. <h1>Thumbnails</h1>
  967. </div>
  968. <h4>Default thumbnails (no grid sizing)</h4>
  969. <ul class="thumbnails">
  970. <li class="thumbnail">
  971. <img data-src="holder.js/260x180" alt="">
  972. </li>
  973. <li class="thumbnail">
  974. <img data-src="holder.js/260x180" alt="">
  975. </li>
  976. <li class="thumbnail">
  977. <img data-src="holder.js/260x180" alt="">
  978. </li>
  979. <li class="thumbnail">
  980. <img data-src="holder.js/260x180" alt="">
  981. </li>
  982. </ul>
  983. <!-- NOT CURRENTLY SUPPORTED
  984. <h4>Offset thumbnails</h4>
  985. <ul class="thumbnails">
  986. <li class="span3 offset3">
  987. <a href="#" class="thumbnail">
  988. <img data-src="holder.js/260x180" alt="">
  989. </a>
  990. </li>
  991. <li class="span3">
  992. <a href="#" class="thumbnail">
  993. <img data-src="holder.js/260x180" alt="">
  994. </a>
  995. </li>
  996. <li class="span3">
  997. <a href="#" class="thumbnail">
  998. <img data-src="holder.js/260x180" alt="">
  999. </a>
  1000. </li>
  1001. </ul>
  1002. -->
  1003. <h4>Standard grid sizing</h4>
  1004. <ul class="thumbnails">
  1005. <li class="span3">
  1006. <a href="#" class="thumbnail">
  1007. <img data-src="holder.js/260x180" alt="">
  1008. </a>
  1009. </li>
  1010. <li class="span3 offset3">
  1011. <a href="#" class="thumbnail">
  1012. <img data-src="holder.js/260x180" alt="">
  1013. </a>
  1014. </li>
  1015. <li class="span3">
  1016. <a href="#" class="thumbnail">
  1017. <img data-src="holder.js/260x180" alt="">
  1018. </a>
  1019. </li>
  1020. </ul>
  1021. <h4>Fluid thumbnails</h4>
  1022. <div class="row-fluid">
  1023. <div class="span8">
  1024. <ul class="thumbnails">
  1025. <li class="span4">
  1026. <a href="#" class="thumbnail">
  1027. <img data-src="holder.js/260x180" alt="">
  1028. </a>
  1029. </li>
  1030. <li class="span4">
  1031. <a href="#" class="thumbnail">
  1032. <img data-src="holder.js/260x180" alt="">
  1033. </a>
  1034. </li>
  1035. <li class="span4">
  1036. <a href="#" class="thumbnail">
  1037. <img data-src="holder.js/260x180" alt="">
  1038. </a>
  1039. </li>
  1040. </ul>
  1041. </div>
  1042. </div>
  1043. <!-- Tabs
  1044. ================================================== -->
  1045. <div class="page-header">
  1046. <h1>Tabs</h1>
  1047. </div>
  1048. <div class="tabbable tabs-left" style="margin-bottom: 18px;">
  1049. <ul class="nav nav-tabs">
  1050. <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
  1051. <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  1052. <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
  1053. </ul>
  1054. <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
  1055. <div class="tab-pane active" id="tab1">
  1056. <p>I'm in Section 1.</p>
  1057. <div class="tabbable" style="background: #f5f5f5; padding: 20px;">
  1058. <ul class="nav nav-tabs">
  1059. <li class="active"><a href="#tab1-1" data-toggle="tab">1.1</a></li>
  1060. <li><a href="#tab1-2" data-toggle="tab">1.2</a></li>
  1061. <li><a href="#tab1-3" data-toggle="tab">1.3</a></li>
  1062. </ul>
  1063. <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
  1064. <div class="tab-pane active" id="tab1-1">
  1065. <p>I'm in Section 1.1.</p>
  1066. </div>
  1067. <div class="tab-pane" id="tab1-2">
  1068. <p>I'm in Section 1.2.</p>
  1069. </div>
  1070. <div class="tab-pane" id="tab1-3">
  1071. <p>I'm in Section 1.3.</p>
  1072. </div>
  1073. </div>
  1074. </div>
  1075. </div>
  1076. <div class="tab-pane" id="tab2">
  1077. <p>Howdy, I'm in Section 2.</p>
  1078. </div>
  1079. <div class="tab-pane" id="tab3">
  1080. <p>What up girl, this is Section 3.</p>
  1081. </div>
  1082. </div>
  1083. </div> <!-- /tabbable -->
  1084. <br>
  1085. <!-- Labels
  1086. ================================================== -->
  1087. <div class="page-header">
  1088. <h1>Labels</h1>
  1089. </div>
  1090. <div class="row">
  1091. <div class="span4">
  1092. <h4>Inline label</h4>
  1093. <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam <span class="label label-warning">Label name</span> eget risus varius blandit sit amet non magna. Fusce <code>.class-name</code> dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  1094. </div><!--/span-->
  1095. <div class="span4">
  1096. <form class="form-horizontal">
  1097. <label>Example label</label>
  1098. <input type="text" placeholder="Input"> <span class="help-inline"><span class="label">Hey!</span> Read this.</span>
  1099. </form>
  1100. </div><!--/span-->
  1101. <div class="span4">
  1102. <button class="btn">Action <span class="badge">2</span></button>
  1103. <button class="btn">Action <span class="label">2</span></button>
  1104. </div><!--/span-->
  1105. </div><!--/row-->
  1106. <br>
  1107. <!-- Button groups
  1108. ================================================== -->
  1109. <div class="page-header">
  1110. <h1>Buttons</h1>
  1111. </div>
  1112. <table class="table table-bordered">
  1113. <tbody>
  1114. <tr>
  1115. <td>
  1116. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  1117. </td>
  1118. <td>
  1119. <div class="btn-group">
  1120. <button class="btn">1</button>
  1121. <button class="btn">2</button>
  1122. <button class="btn">3</button>
  1123. <button class="btn">4</button>
  1124. </div>
  1125. </td>
  1126. </tr>
  1127. </tbody>
  1128. </table>
  1129. <h4>Mini buttons: text and icon</h4>
  1130. <div class="btn-group">
  1131. <button class="btn btn-mini">Button text</button>
  1132. <button class="btn btn-mini"><i class="icon-cog"></i></button>
  1133. </div>
  1134. <br>
  1135. <!-- Responsive utility classes
  1136. ================================================== -->
  1137. <div class="page-header">
  1138. <h1>Responsive utility classes</h1>
  1139. </div>
  1140. <h4>Visible on...</h4>
  1141. <ul class="responsive-utilities-test visible-on">
  1142. <li>Phone<span class="visible-phone">✔ Phone</span></li>
  1143. <li>Tablet<span class="visible-tablet">✔ Tablet</span></li>
  1144. <li>Desktop<span class="visible-desktop">✔ Desktop</span></li>
  1145. </ul>
  1146. <ul class="responsive-utilities-test visible-on">
  1147. <li>Phone + Tablet<span class="visible-phone visible-tablet">✔ Phone + Tablet</span></li>
  1148. <li>Tablet + Desktop<span class="visible-tablet visible-desktop">✔ Tablet + Desktop</span></li>
  1149. <li>All<span class="visible-phone visible-tablet visible-desktop">✔ All</span></li>
  1150. </ul>
  1151. <h4>Hidden on...</h4>
  1152. <ul class="responsive-utilities-test hidden-on">
  1153. <li>Phone<span class="hidden-phone">✔ Phone</span></li>
  1154. <li>Tablet<span class="hidden-tablet">✔ Tablet</span></li>
  1155. <li>Desktop<span class="hidden-desktop">✔ Desktop</span></li>
  1156. </ul>
  1157. <ul class="responsive-utilities-test hidden-on">
  1158. <li>Phone + Tablet<span class="hidden-phone hidden-tablet">✔ Phone + Tablet</span></li>
  1159. <li>Tablet + Desktop<span class="hidden-tablet hidden-desktop">✔ Tablet + Desktop</span></li>
  1160. <li>All<span class="hidden-phone hidden-tablet hidden-desktop">✔ All</span></li>
  1161. </ul>
  1162. <!-- Gradients
  1163. ================================================== -->
  1164. <div class="page-header">
  1165. <h1>Gradients</h1>
  1166. </div>
  1167. <h4>Horizontal</h4>
  1168. <div class="gradient-horizontal"></div>
  1169. <h4>Vertical</h4>
  1170. <div class="gradient-vertical"></div>
  1171. <h4>Directional</h4>
  1172. <div class="gradient-directional"></div>
  1173. <h4>Three colors</h4>
  1174. <div class="gradient-vertical-three"></div>
  1175. <h4>Radial</h4>
  1176. <div class="gradient-radial"></div>
  1177. <h4>Striped</h4>
  1178. <div class="gradient-striped"></div>
  1179. <h4>Horizontal three colors</h4>
  1180. <div class="gradient-horizontal-three"></div>
  1181. <div class="page-header">
  1182. <h1>Alerts</h1>
  1183. </div>
  1184. <h4>Alert default</h4>
  1185. <div class="alert">
  1186. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1187. <strong>Alert!</strong> Best check yourself, you're not looking too good.
  1188. </div>
  1189. <div class="alert alert-block">
  1190. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1191. <p><strong>Alert!</strong> Best check yourself, you're not looking too good.</p>
  1192. </div>
  1193. <h4>Success</h4>
  1194. <div class="alert alert-success">
  1195. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1196. <strong>Success!</strong> Best check yourself, you're not looking too good.
  1197. </div>
  1198. <div class="alert alert-block alert-success">
  1199. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1200. <p><strong>Success!</strong> Best check yourself, you're not looking too good.</p>
  1201. </div>
  1202. <h4>Info</h4>
  1203. <div class="alert alert-info">
  1204. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1205. <strong>Info!</strong> Best check yourself, you're not looking too good.
  1206. </div>
  1207. <div class="alert alert-block alert-info">
  1208. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1209. <p><strong>Info!</strong> Best check yourself, you're not looking too good.</p>
  1210. </div>
  1211. <h4>Warning</h4>
  1212. <div class="alert ">
  1213. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1214. <strong>Warning!</strong> Best check yourself, you're not looking too good.
  1215. </div>
  1216. <div class="alert alert-block alert-warning">
  1217. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1218. <p><strong>Warning!</strong> Best check yourself, you're not looking too good.</p>
  1219. </div>
  1220. <h4>Error</h4>
  1221. <div class="alert alert-error">
  1222. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1223. <strong>Error!</strong> Best check yourself, you're not looking too good.
  1224. </div>
  1225. <div class="alert alert-block alert-error">
  1226. <button type="button" class="close" data-dismiss="alert">&times;</button>
  1227. <p><strong>Error!</strong> Best check yourself, you're not looking too good.</p>
  1228. </div>
  1229. </div><!-- /container -->
  1230. <!-- Footer
  1231. ================================================== -->
  1232. <footer class="footer">
  1233. <div class="container">
  1234. <p class="pull-right"><a href="#">Back to top</a></p>
  1235. <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
  1236. <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
  1237. <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
  1238. <ul class="footer-links">
  1239. <li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
  1240. <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Submit issues</a></li>
  1241. <li><a href="https://github.com/twbs/bootstrap/wiki">Roadmap and changelog</a></li>
  1242. </ul>
  1243. </div>
  1244. </footer>
  1245. </div>
  1246. <!-- Le javascript
  1247. ================================================== -->
  1248. <!-- Placed at the end of the document so the pages load faster -->
  1249. <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  1250. <script src="../../docs/assets/js/jquery.js"></script>
  1251. <script src="../../docs/assets/js/google-code-prettify/prettify.js"></script>
  1252. <script src="../../docs/assets/js/bootstrap-transition.js"></script>
  1253. <script src="../../docs/assets/js/bootstrap-alert.js"></script>
  1254. <script src="../../docs/assets/js/bootstrap-modal.js"></script>
  1255. <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
  1256. <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
  1257. <script src="../../docs/assets/js/bootstrap-tab.js"></script>
  1258. <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
  1259. <script src="../../docs/assets/js/bootstrap-popover.js"></script>
  1260. <script src="../../docs/assets/js/bootstrap-button.js"></script>
  1261. <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
  1262. <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
  1263. <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
  1264. <script src="../../docs/assets/js/application.js"></script>
  1265. </body>
  1266. </html>