Bootstrap3组件--1
目录
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的更多相关文章
- Bootstrap3组件--2
目录 1. 分页 2. 标签 3. 徽章 4. 巨幕 5. 页头 6. 缩略图 7. 警告框 8. 进度条 9. 列表组 10. 面板 11.Well 1. 分页 <!doctype html& ...
- 看过的bootstrap书籍（附下载地址）
http://yun.baidu.com/share/link?shareid=3820784617&uk=1008683945 以下书籍下载地址. <BootStrap入门教程> ...
- Bootstrap3写的红色警告框样式组件
用的是BT3的类和fa的图标 <!DOCTYPE html><html><head lang="en"> <meta charset ...
- JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- 使用外部web组件-----easyUI、jQueryUI、Bootstrap、js正则表达式
1.使用外部web组件,以Bootstrap为例 <head> <link rel='stylesheet' href='bootstrap-3.3.0-dist/dist/css ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- 《深入理解bootstrap》读书笔记：第4章 CSS组件（上）
bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...
- php + Bootstrap-v3-Typeahead 自动完成组件的使用
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,类似百度.谷歌等搜索提示:输入关键词出现相应的下拉列表数据. 是Bootstrap-3-Typeah ...
- React+BootStrap+ASP.NET MVC实现自适应和组件的复用
系统展示如下 1.前端采用bootstrap3进行架构 2.后端采用asp.net mvc进行开发 开发工具vs2010 mvc4需要安装sp1的补丁. 3.js组件的封装采用react 1.新建mv ...
随机推荐
- 补装老版本的Java SE
到oracle注册账号下载bin文件 在bin文件下载目录打开终端复制下面到命令 # chmod +x jdk-6u21-linux-i586.bin 注意版本不同,比如我这次下载到是6u45 chm ...
- 微信小程序结构分析
1.Console页面:控制台信息页两个作用: (1)开发直接输入代码并且进行调试: (2)显示小程序的错误输出: 2.Sources页面:源文件调试信息页,用于显示当前项目的脚本文件. 3.Netw ...
- ASP.NET MVC 使用dataTable（3）--更多选项参考
ASP.NET MVC 使用dataTable(3)--更多选项参考 jQuery dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器 ...
- PHPFastCGI进程管理器PHP
PHP-FPM是一个PHPFastCGI进程管理器,是只用于PHP的. PHP-FPM其实是PHP源代码的一个补丁,旨在将FastCGI进程管理整合进PHP包中.必须将它patch到你的PH ...
- LeetCode Problem 169: Majority Element查找多数元素
描述:Given an array of size n, find the majority element. The majority element is the element that app ...
- Exponentiation(高精度大数)
Exponentiation Description Problems involving the computation of exact values of very large magnitud ...
- 烂代码 git blame
关于烂代码的那些事(上) - Axb的自我修养 http://blog.2baxb.me/archives/1343 关于烂代码的那些事(上) 六月 21, 2015 57 条评论 目录 [显示] 1 ...
- extract
w http://php.net/manual/en/function.extract.php <?php /* Suppose that $var_array is an array retu ...
- mustache模板技术(转)
项目首页:http://mustache.github.com/ 项目文档:http://mustache.github.com/mustache.5.html Demo: http://mus ...
- 理解是最好的记忆方法 之 CSS中a链接的4个伪类为何有顺序
在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之 ...