目录

1. Glyphicons字体图标

2.下拉菜单

3.按钮组

4. 输入框组

5.导航

6. 导航条

7. 路径导航

1. Glyphicons字体图标

出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。图标类只能应用在不包含任何文本内容或子元素的元素上。

 <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

这些图标可以应用到按钮、工具条中的按钮组、导航或输入框等地方。

aaarticlea/png;base64,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" alt="" />

 <button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button> <button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

2.下拉菜单

aaarticlea/png;base64,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" alt="" />

 <!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>        //jquery必须在bootstrap.js之前引入
<script src='js/bootstrap.min.js'></script>
</head> <body>
<div class='dropdown'>
<button class='btn btn-primary dropdown-toggle' data-toggle='dropdown' id='dropdownmenu'>Dropdown    //button作为下拉菜单触发器
<span class='caret'></span>
</button>
<ul class='dropdown-menu'>
<li class='dropdown-header'>Number</li>        //菜单标题
<li><a href='#'>One</a></li>
<li class='disabled'><a href='#'>Two</a></li>    //禁用菜单项
<li><a href='#'>Three</a></li>
<li class='divider'></li>    //分隔线
<li><a href='#'>Four</a></li> </ul>
</div>
</body>
</html>

3.按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWEAAADdCAIAAADl4lQ6AAAUU0lEQVR4nO2dS28bx5pA/T9mP8sMEv6Ju9aSgH9ChBngbpwFAcMrTYgEMKw9AcUIEkPZXFwEiONrU2YkS9QrtgfjtiS3RNMSRbJJ0RKlkZmkZ1FkqfpVIqUm+6FzUIDJYnezq7vr6Kuv6a5bj1/8j295vvlu9W3tVeVoq36exFI29p+s/O8vS6+DStIbGFbZaZzvtT5VWp+26ueV1qdK69NO43yn0X8tKvdan3Ya0e/q1Urqr4RX//bvQ5arbf9W5C2kUChxLjiCQqHoCo6gUCi6giMoFIqu4AgKhaIrt378dYNCoVCCyq1VuGHkYQgePHjw6NGjVqtl33huRfv1q6ur0e5AKCSrFfl8/tdff33y5Mm/BjyFp0+fPn36L4Vffvnl0aNH9+/fbzabUZ+xiMERIZCsVuTzeeGFZ8+eFQcswMKCPBrPnj0Tynj06NGPP/4Y9RmLGBwRAslqRT6fF3Z4/vx5qVQqlUq/wQBxQJ4/f76wsPDs2bMnT57Mzs5GfcYiBkeEQLJakc/nFxYWSqXS4uLi0tLSiwHLNxt5HJaWlhYXF3/77bfnz58Xi8V8Ph/1GYsYHBECyWpFPp8Xgnjx4sXKykq5XC6Xy1ElUONGuVxeWVlZXl5eWloSmsAROCIEktWKfD4vBFEul9fW1tbX19fX1zdgY2NjY2N9fX1tbW11dXVlZUVoAkfgiBBIVivy+fzS0tLKyooQxObm5u8wYHNzU5hidXV1eXl5cXERR+CIEEhWK/L5vAgipCBevnz58uXLVzcecRx+//33jY2NtbU1EUrgCBwRAslqheoIIYio+2a8ePny5ebm5vr6erlcfvHiBY7AESGQrFYIR6yurm5sbEhHvIbXr1+/fi0cIUKJ1dVVHGGPyRGmaQ65ZLJ6VxBxaMXwxzyfzy8vL0tHiD+eUffNuCCOBo5Q8XWEWchmsgVzhM0Uc5lMJpPJZAvFkdYduneJL8gVPfs5qCzmfL+2mPOs5aoPWHEUhm6F2GEnF19+6Z4ENWa08zW0Ix7PTLn2dWrm8Xi65tx0JjM9N55tj4TLEcvLyzgiHEcoF+9o647iiGw26+whZiHrqdPsWUD9pB3h3JuRDlcEjnB03LnpzJi6Mo6IMaM6QvlLOFhiEENkMplsVn6q7bmSkRxRKOTUzZqFbK4gO53a1eUeZQsFtVv51qsr+rQu1FZ4HaF+/6VNKOYymVxB7qNYWNnn4Y751R0hqvrBxOOZqamZmWklvlDijouAY246MzUzJz9Rtzc3LZeeUR3h3Y6yJ49npgaLDnbG9RXXCnZwhJeRHOGoV99MJo4omEVFEmYhmyuaXke492uwZ0H1viuO1oywHVHMSUf1DXDhCHmgXQtNIo5wSOLxzJTaH5W+K3p//yMhguAO7l7GfzsXuzI3PTU1JVacmxYfOr5C+WocEQ6jOMId6jo66EQcYV9Iwixkc0Xb6wjXTsq3QfVBK/r25+u2wrtNpaere6IcQbOQzXgPs+PdBB1xMSpQO7l3WbmYaxQxeBtQHbidgQ8ez0xNT09npueURZ3b8hu23Lt3z5MHyty7dw9HDMMIjvBLuCl/+CbiCLOQlX/0+++dXd399YMFguodKwa0LrxW+H2Jo9M72ySr4+oIR890/PWWBnF90K93CsbZ3wO3I1wxNTM3M9UfYgxCi8sc4dWEryBwhC8jOiLgSpyYIxQ3DN6G6Iir5i6vFkcUc64UQhIc4RxrTNARj2emxHrTc8IOomJoR7x+/frOnTtCEN98842vIHCEL9cZa/h+MmZHCDsUlXBiXGONEbjyWMOpiQSMNZw5S+XTcY81xChjRnihny5V0xnDOEJoQiMIHOHLyDlLZ+r9Its2KUf043XljU/qUc3rqR3Jr965ol/rwmuFfz5C2St92jVqRzjufbo+HSpnqdSry1+es5RLDbKVU1NTjqWGdMSl4AgvgY4IGDarHzl+/SMvXkcm/jKu4AhHj/BxhLqTrnufvvUB9z5HGXhc975G/3AF3/v0qtj2iHnoYx7Sb6i8UUbQvc/M9PS0zwYulr/03qe79ztEgiPGDP9fIwTG24oQfuTlYLK/xY7Nr6OGA0d4wREhEHIrHMOc6+RS/cERGnCEFxwRAqG34opjnuHAERpwhBccEQLJagX/71MDjvCCI0IgWa3AERpwhBccEQLJagWO0IAjvOCIEEhWK3CEBpcjxDNm/ooZE75gcEQIJKsVrmfV8UhLFfGgOvk8S/HM26idMCxjumBwRAgkpRXiSlKfna8+FxsE6nOxFxYWHjx4EG3PvxohXjY4IgTi3wr16lEdsbGxIefXkD3kxrK5uSnm11hbWxMPxf7pp59++OGHP+PNuE2BI0Igzq3wXjdff/314uLi8vKymMKPSbpU5DxdpVJpfn7+22+/PTg4+CN+jOSLa15Cty6dARESTdnD1wr/DQHcv3//+++/39/f78UVjTXC1UTEcQSMD9dVol5D4qpyXXOfIFH4KkNjiitfSDginQQJQrWDvNrOFf4PYo96vlzKcJkiFE3giBTiKwjVDmdnZ9VqdXt724BUsL29/eHDh7OzM68prq8JHJFCNIL49OnT2dnZzs6OZVm9Xi/qPYVw6PV6lmVtb2+fnp6KmCJIE1fYOI5IG76CkIOL8/PzarVqWVbUuwnhY1lWtVoVAxAZUFxfEzgibWgiCJFu2NraIoJIJb1eb3t7WyQsNNHEqJvFEakiKIiQgjg7OzMMI+rdhHFhGMbZ2ZlLE9cMJXBEqrhUEKenpzgixRiGcXp6eqkmRtomjkgVQY6Qgjg5OcERKcYwjJOTE6kJHAFuNEHE6elpt9s9Pj7GESnGMIzj4+Nut3t6eqoJJUbaJo5ID/ogotvtnpycfPz4EUekGMMwPn78eHJy0u12wwolcER6UB3hDSKEIDqdDo5IMYZhdDodoQnfUAJH3GiCHKEGEe12G0ekGMMw2u22GkrgCLhAP9A4Pj7udDqtVgtHpBjDMFqtVqfTEVkJzXBj+G3iiPTgdYRroHF0dIQj0o1wxNHRkWu4gSPAti9zRKfTabfblmXhiBRjGIZlWe12u9Pp4AhwozrClYwQA412u91sNkNyhHPi6NBnE4MrYRhGs9kUjpDDDZmSwBE3HU3CUiYjGo1GGI4o5pzTlBdzeCIWGIbRaDRcKQnftOXw28QRKcH3poZMWMpkRBiO8J+mWKkt5jLZQlHGGeqySvSBUsaAdIRISfimLUe9tYEjUsIwjrAsKwRHBM1kflFfzGUuwgxlFnTHmuFPiA4DR1iWFaYjWpAWLMuyLKvZbDYajXq9fnh4WKvV9vf3q9VqpVLZ3d3d2dnZ2toql8vXugyLOccww+cD5xIB1cISvhuCK1Mul7e2tnZ2dnZ3dyuVSrVa3d/fr9Vqh4eH9Xq90Wg0m01xnQx/XRFHpISgOELe+BQ3Ner1+nXjiKs6wpnkZMAxFgzDqNfr4taGevuTsQZM0BHDjTX8HYESxgyOgEAm54iASMKZsxxmrAHhgyMgkEk64rJ7nwGOEKMNx1LEFSGDIyCQyTrCtgd3L/zyCkGOsJ1JCQQRPjgCApm8IyCG4AgIBEeAjSNAA44AG0eABhwBNo4ADTgCbBwBGnAE2DgCNOAIsHEEaMARYOMI0IAjwMYRoAFHgI0jQAOOABtHgAYcATaOAA04AmwcARpwBNg4AjTgCLDH5IjPvvwuuWWshztZ4Aiwx+SIzFc/J7TgCJWJOcL30bUZnkIXD3AEjggkgjiCh9jGDxyBIwKJ2hHKZBlmIas+wVKZgIeH1I0bHIEjAonaEYokirlsNiufop8tmA5t8LDbcYIjcEQgkTtC9UEul5NTaqj/KouSvxgLOAJHBBK9I+yiEEMxly0UC9lswRzUSH0ErQlhgSNwRCAxcIRZyGYLplnI5orCDqLCxhGTA0fgiEBi4AjbLGRzBeEFs5DNFgo5JV/JWGMS4AgcEUgcHKFO11XMZbMXYiBnOSFwBI4IJBaOcM/bp8YK3PucBDgCRwQSgSMgfsTFEbdLXd9tleZxRGTgCLDj44iLMmvu2d2Hs8QR0YMjwE6CIxYfNgcbbpq3+5WvSnb34by51/+gfhdHjAEcAXbsHbH4sGnbb16Jj+6+kZp4VbJtqYbbpW5YmsARKjgC7Lg7Ytbcc3T+V6V+hkK+cNXjiDDBEWDH3RHzdWV80Q8r9kqL/bHGrLceR4QJjgAbR+AIDTgC7Lg7grFGpOAIsOPuiOFylko9jggTHAF27B3xc/C9T7v0pu6pxxFhgiPAjqMjhiqhDS5whAYcATaOwBEacATYOAJHaMARYCfWEeMqOEIFR4CNI3CEBhwBNo7AERom5gjtPF08hC5icASOCCSCOEL7HCqIBByBIwKJkSMKMtJQZ/HKFgo5pTLo0XU80u5a4AgcEUh8HCEjCeXZtmYhm3HN6eWYBVBZzK8ehgVH4IhA4uOIi7GG8wm4F4u6RySDR+sH1cPQ4AgcEUj8HSHrfbOeYvYe3/pw9vZmMBZHfPbld8ktYz3cySJhjvDr+gwurg9xBHFEIAlyRODdD+6KXBscgSMCSZIjXCnMi9xmUD0MC47AEYEkyhG2MynhmliYXMTVwRE4IpAIHAHxA0fgiEBwBNg4AkdowBFg4wgcoQFHgI0jcIQGHAE2jsARGnAE2DgCR2jAEWDjCByhIcgRZ2dnwhFHR0c4IvVIRxwdHQlHnJ2djc8RjrlzBkXMoCEqXZP0Dcp83X9m8Iv6gBVxxDXQOKLb7UpHNBoNHJFiDMNoNBrSEd1ud9yO6O41nY+0njX3mt09XwXgiEgZxhGtVgtHpBvhiFarNTlHPCzV5fR8ma9+vl3qlkpyXk+1q4ugw7bFKheO8K1XV/Sd2gtHXAWvI87Pz4Ujjo+PO52OdESv14t6ZyF8er3e27dvhSM6nc7x8bFwxPn5udcRw2/2MkfMvipddPjFh8363VmvI9SpwNURSlC974o/3y51R9IEjnAhHfHnn3/6OqLdbjebTdM0LcuKemchfCzLMk2z2Wy2221fR4hrI3RH/Hz3zWC4MWvuvXmV8TrCNbiQb4Pqg1b8avFhc4TZenCEC9URf/zxh3CEvLUhHGFZ1uHh4dbWlmVZRBOpodfrWZa1tbVVq9XETY1OpyNvaghHiCBiLI64XeqKP/X9Fx5HuP/+DxYIqnes6EGGFThiVFyO6PV6qiPUlEStVnv37t3bt28NSAVbW1umaR4cHKjJCNURcqAxFkdkZs29pnn7q8WHzcHbEB1xjWnEcYQLryPUtKVMSTSbzXq9XqvV9vf3q9VqpVLZ29szTfPdu3c7Ozs7Ozvb29vb29tbEDPEeRHn6N27d6Zp7u3tVSqVarW6v79fq9Xq9Xqz2XQlI1wJy/E4QthhXpjCp6uHN9bAEdfC99aGTEmov6RqNBqHh4cHBweqJnZ3d03TFLKQvoD4IM6LOEe7u7uqIA4ODg4PD8VdT/nrKU3CMnRH9AcF/VFAQM5ycPvDnbP0q3euKEOJ+bo9yj1RHOEiyBHqcENmJVRNfPjw4f3795VKRcpCYEJskCdFqKFSqbx///7Dhw9eQXQ6HddAYxKOyMyae47XmluYrnufvvUB9z5H/NEEjnChOsJ3uKFmJaQmarWaNEW1Wn3//r30BcQNcXaq1aq0Q61Wk4JQMxH6gUZYjoh7wRFefB0hQwmZlVA1Ua/XVVMIWUBsEedI2qFer6uCkJkI3yDiCskIG0ekDH0oIUYcUhNi0NFsNqUphCwkBxAb1PMizpSwQ7PZFEMMKQgxyggriLBxRMoIcoQIJVRNyNxEq9USMYWQhaAOsUSeIKEGce5kDsIliKAgAkfcaP5S0GhC5iaEKURMofoCYov0gowdxHkUOYhhBIEjbjpeR2g0ocYUgqMBbYgZ8tTIkyVjB40grhlE2DgifQSFEqomVFOoshC+gJgjzpRUg2oHVRChBBE2jkglvpqQ0YTLFEIW0heqNSBuqOdInDVxBlU7aCKIKwjCxhGp5C8nLk2oppCykL6QnELMcJ0geeLEeZR20AgCR8AFvprwNYWUhUsZEFvU8yVPotcOoQjCxhEpJkgTLlO4fAEJQj2DLjuEJQgbR6Sbvzx4TSHpQaJwnT6NHa4jCNu2b3325XfJLWH1pRTjvVxcptBYA2JL0Bn0Pd3XvISII24EvpeO3heQFDQnN5SLB0fcIDQXE6SMEC8bHHFDifoahvAZ06WCI8BB1Nc5XM6ELwkcAQA6cAQA6MARAKADRwCADhwBADpwBADoCNMRt2cXfV/jCIDk4usIMV+OyqWzaakzgDtmA8cRAIkm0BHq/N1339iXTcyJIwDSyVCOcE7Mqcys1ReHUvPGVF6/Clh+MPFXqX6x5HzduRaOAIgFw8YRg7fqFJ5qfBEURwQsP2vu2YN6YQfxWp00EEcAxIAh8xHeCYFdNglwRNDys+behYZUJXlCGBwBEClDxRG3S93+hL3zdWdiQuogwBFByzviBXWKYBwBEC+Gy0fIGhwBcMMY0RFhjjVwBEACGHqsod7CCCdniSMAEsAVfkPldy+zn7Po60B9rbv3iSMAYg//XwMAdOAIANCBIwBAB44AAB04AgB04AgA0IEjAEAHjgAAHUl1xBd3/vnFf30f9dEDSD9JdcTnf//pb3f/EfXRA0g/yXPEF3f++fnff/qP6YfLb+uXtw8Arsetz778Llnl8//8/m93/4EgACbDrah3AABiDY4AAB04AgB04AgA0IEjAEAHjgAAHTgCAHTgCADQgSMAQAeOAAAdOAIAdOAIANCBIwBAB44AAB04AgB04AgA0IEjAEAHjgAAHTgCAHTgCADQgSMAQAeOAAAdOAIAdOAIANCBIwBAB44AAB04AgB04AgA0IEjAEAHjgAAHTgCAHTgCADQgSMAQAeOAAAdOAIAdOAIANCBIwBAB44AAB04AgB0/D/jASHdKHtM8wAAAABJRU5ErkJggg==" alt="" />

 <!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
//可以用btn-group-lg{sm,xs}控制按钮的大小,btn-group-vertical{justified}控制排列
<div class='btn-group'>
<button class='btn btn-default'>Left</button>
<button class='btn btn-default'>Middle</button>
<button class='btn btn-default'>Right</button>
<div class='btn-group'>
<button class='btn btn-default dropdown-toggle' data-toggle='dropdown'>Dropdown
<span class='caret'></span>
</button>
<ul class='dropdown-menu'>
<li><a href='#'>One</a></li>
<li><a href='#'>Two</a></li>
<li><a href='#'>Three</a></li>
</ul>
</div>
</div>
<hr />
<div class='btn-group btn-group-vertical'>
<button class='btn btn-primary'>Top</button>
<button class='btn btn-primary'>Middle</button>
<button class='btn btn-primary'>Bottom</button>
</div>
</body>
</html>

4. 输入框组

通过在文本输入框<input>前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为.input-group赋予.input-group-addon类,可以给.form-control的前面或后面添加额外的元素。只支持<input>。额外的元素可以是单选框、多选框、按钮或下拉菜单。

 <!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<div class='input-group'>
<span class='input-group-addon'>@</span>
<input type='text' class='form-control' placeholder='Username'>
</div>
<div class='input-group'>
<input type='text' class='form-control' placeholder="Recipient's username">
<span class='input-group-addon'>@example.com</span>
</div>
<div class='input-group'>
<span class='input-group-addon'>$</span>
<input type='text'class='form-control'>
<span class='input-group-addon'>.00</span>
</div> <div class='row'>
<div class='col-lg-6'>
<div class='input-group'>
<span class='input-group-addon'>
<input type='checkbox'>
</span>
<input type='text' class='form-control'>
</div>
</div>
<div class='col-lg-6'>
<div class='input-group'>
<span class='input-group-addon'>
<button class='btn btn-default'>Go!</button>
</span>
<input type='text' class='form-control' placeholder='Search for...'>
</div>
</div>
</div>
</body>
</html>

5.导航

Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。

 <!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
//标签页
<ul class='nav nav-tabs'>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Profile</a></li>
<li><a href='#'>Messages</a></li>
</ul> //胶囊式标签页
<ul class='nav nav-pills'>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Profile</a></li>
<li><a href='#'>Messages</a></li>
</ul> //垂直胶囊式标签页
<ul class='nav nav-pills nav-stacked'>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Profile</a></li>
<li><a href='#'>Messages</a></li>
</ul> //带下拉菜单的标签页
<ul class='nav nav-tabs'>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Profile</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Dropdown <span class='caret'></span>
</a>
<ul class='dropdown-menu'>
<li><a href='#'>One</a></li>
<li><a href='#'>Two</a></li>
</ul>
</li>
</ul>
</body>
</html>

6. 导航条

aaarticlea/png;base64,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" alt="" />

 <!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<nav class='navbar navbar-inverse'>
<div class='container'>
<div class='navbar-header'>
<button class='navbar-toggle collapse' data-toggle='collapse' data-target='#bs-example-navbar-collapse-1'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='#'>Brand</a>
</div> <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown'>Dropdown <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another Action</a></li>
</ul>
</li>
</ul>
<form class='navbar-form navbar-left'>
<div class='form-group'>
<input type='text' class='form-control' placeholder='Search'>
</div>
<button type='submit' class='btn btn-default'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown'>Dropdown <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another Action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>

7. 路径导航

aaarticlea/png;base64,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" alt="" />

 <!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<ol class='breadcrumb'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Library</a></li>
<li class='active'>Data</a></li>
</ol>
</body>
</html>

Bootstrap3组件--1的更多相关文章

  1. Bootstrap3组件--2

    目录 1. 分页 2. 标签 3. 徽章 4. 巨幕 5. 页头 6. 缩略图 7. 警告框 8. 进度条 9. 列表组 10. 面板 11.Well 1. 分页 <!doctype html& ...

  2. 看过的bootstrap书籍(附下载地址)

    http://yun.baidu.com/share/link?shareid=3820784617&uk=1008683945 以下书籍下载地址. <BootStrap入门教程> ...

  3. Bootstrap3写的红色警告框样式组件

    用的是BT3的类和fa的图标 <!DOCTYPE html><html><head lang="en">    <meta charset ...

  4. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  5. 使用外部web组件-----easyUI、jQueryUI、Bootstrap、js正则表达式

    1.使用外部web组件,以Bootstrap为例 <head> <link rel='stylesheet'  href='bootstrap-3.3.0-dist/dist/css ...

  6. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. 《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

    bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...

  8. php + Bootstrap-v3-Typeahead 自动完成组件的使用

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,类似百度.谷歌等搜索提示:输入关键词出现相应的下拉列表数据. 是Bootstrap-3-Typeah ...

  9. React+BootStrap+ASP.NET MVC实现自适应和组件的复用

    系统展示如下 1.前端采用bootstrap3进行架构 2.后端采用asp.net mvc进行开发 开发工具vs2010 mvc4需要安装sp1的补丁. 3.js组件的封装采用react 1.新建mv ...

随机推荐

  1. 补装老版本的Java SE

    到oracle注册账号下载bin文件 在bin文件下载目录打开终端复制下面到命令 # chmod +x jdk-6u21-linux-i586.bin 注意版本不同,比如我这次下载到是6u45 chm ...

  2. 微信小程序结构分析

    1.Console页面:控制台信息页两个作用: (1)开发直接输入代码并且进行调试: (2)显示小程序的错误输出: 2.Sources页面:源文件调试信息页,用于显示当前项目的脚本文件. 3.Netw ...

  3. ASP.NET MVC 使用dataTable(3)--更多选项参考

    ASP.NET MVC 使用dataTable(3)--更多选项参考 jQuery  dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器 ...

  4. PHPFastCGI进程管理器PHP

    PHP-FPM是一个PHPFastCGI进程管理器,是只用于PHP的.      PHP-FPM其实是PHP源代码的一个补丁,旨在将FastCGI进程管理整合进PHP包中.必须将它patch到你的PH ...

  5. LeetCode Problem 169: Majority Element查找多数元素

    描述:Given an array of size n, find the majority element. The majority element is the element that app ...

  6. Exponentiation(高精度大数)

    Exponentiation Description Problems involving the computation of exact values of very large magnitud ...

  7. 烂代码 git blame

    关于烂代码的那些事(上) - Axb的自我修养 http://blog.2baxb.me/archives/1343 关于烂代码的那些事(上) 六月 21, 2015 57 条评论 目录 [显示] 1 ...

  8. extract

    w http://php.net/manual/en/function.extract.php <?php /* Suppose that $var_array is an array retu ...

  9. mustache模板技术(转)

    项目首页:http://mustache.github.com/  项目文档:http://mustache.github.com/mustache.5.html  Demo:  http://mus ...

  10. 理解是最好的记忆方法 之 CSS中a链接的4个伪类为何有顺序

    在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之 ...