Bootstrap知识简单归纳

Bootstrap响应式实用工具---目前只适用于块和表切换Bootstrap字形图标（Glyphicons）什么是字形图标（Glyphicons）？字形图标（Glyphicons）是在Web项目中使用的图标字体。字形图标（Glyphicons）列表点击这里，查看可用的字形图标（Glyphicons）列表用法如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。spanclass=glyphiconglyphicon-search/span在线定制字形图标（Glyphicons）点击这里，在线定制字形图标（Glyphicons）。插入符使用插入符表示下拉功能和方向。使用带有classcaret的span元素得到该功能。关闭图标使用通用的关闭图标来关闭模态框和警告框。使用classclose得到关闭图标。快速浮动您可以分别使用classpull-left或pull-right来把元素向左或向右浮动。下面的实例演示了这点。如需对齐导航栏中的组件，请使用.navbar-left或.navbar-right代替。请查看Bootstrap导航栏。居中内容块使用classcenter-block来居中元素。清除浮动如需清除元素的浮动，请使用.clearfixclass。显示和隐藏内容您可以通过使用class.show和.hidden来强行设置元素显示或隐藏（包括屏幕阅读器）。屏幕阅读器您可以通过使用class.sr-only来把元素对所有设备隐藏，除了屏幕阅读器。Bootstrap下拉菜单（Dropdowns）对齐通过向.dropdown-menu添加class.pull-right来向右对齐下拉菜单class=dropdown-menupull-right标题您可以使用classdropdown-header向下拉菜单的标签区域添加标题Bootstrap按钮组按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过Bootstrap按钮（Button）插件添加可选的JavaScript单选框和复选框样式行为Bootstrap按钮下拉菜单本章将讲解如何使用Bootstrapclass向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个.btn-group中放置按钮和下拉菜单即可。您也可以使用spanclass=caret/span来指示按钮作为下拉菜单。divclass=btn-groupbuttontype=buttonclass=btnbtn-primarydropdown-toggledata-toggle=dropdown原始spanclass=caret/span/buttonulclass=dropdown-menurole=menuliahref=#功能/a/liliahref=#另一个功能/a/liliahref=#其他/a/liliclass=divider/liliahref=#分离的链接/a/li/ul/div分割的按钮下拉菜单divclass=btn-groupbuttontype=buttonclass=btnbtn-primary原始/buttonbuttontype=buttonclass=btnbtn-primarydropdown-toggledata-toggle=dropdownspanclass=caret/spanspanclass=sr-only切换下拉菜单/span/buttonulclass=dropdown-menurole=menuliahref=#功能/a/liliahref=#另一个功能/a/liliahref=#其他/a/liliclass=divider/liliahref=#分离的链接/a/li/ul/div按钮下拉菜单的大小您可以使用带有各种大小按钮的下拉菜单：.btn-large、.btn-sm或.btn-xs按钮上拉菜单菜单也可以往上拉伸的，只需要简单地向父.btn-group容器添加.dropup即可。class=btn-groupdropupBootstrap输入框组本章将讲解Bootstrap支持的另一个特性，输入框组。输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在Twitter用户名前添加@，或者应用程序接口所需要的其他公共的元素。向.form-control添加前缀或后缀元素的步骤如下：•把前缀后后缀元素放在一个带有class.input-group的div中。•接着，在相同的div内，在class为.input-group-addon的span内放置额外的内容。•把该span放置在input元素的前面或者后面。为了保持跨浏览器的兼容性，请避免使用select元素，因为它们在WebKit浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的class，输入框组是一个孤立的组件。divclass=input-groupspanclass=input-group-addon$/spaninputtype=textclass=form-controlspanclass=input-group-addon.00/span/div输入框组的大小您可以通过向.input-group添加相对表单大小的class（比如.input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。输入框中的内容会自动调整大小。复选框和单选插件您可以把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：divclass=input-groupspanclass=input-group-addoninputtype=checkbox/spaninputtype=textclass=form-control/div按钮插件您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加.input-group-addonclass，您需要使用class.input-group-btn来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写divclass=input-groupspanclass=input-group-btnbuttonclass=btnbtn-defaulttype=buttonGo!/button/spaninputtype=textclass=form-control/div带有下拉菜单的按钮divclass=input-groupdivclass=input-group-btnbuttontype=buttonclass=btnbtn-defaultdropdown-toggledata-toggle=dropdown下拉菜单spanclass=caret/span/buttonulclass=dropdown-menuliahref=#功能/a/liliahref=#另一个功能/a/liliahref=#其他/a/liliclass=divider/liliahref=#分离的链接/a/li/ul/divinputtype=textclass=form-control/divBootstrap导航元素--它们使用相同的标记和基类.nav。表格导航或标签创建一个标签式的导航菜单：•以一个带有class.nav的无序列表开始。•添加class.nav-tabs。ulclass=navnav-tabs/ul胶囊式的导航菜单基本的胶囊式导航菜单如果需要把标签改成胶囊的样式，只需要使用class.nav-pills代替.nav-tabs即可，ulclass=navnav-pills/ul垂直的胶囊式导航菜单您可以在使用class.nav、.nav-pills的同时使用class.nav-stacked，让胶囊垂直堆叠。ulclass=navnav-pillsnav-stacked/ul两端对齐的导航您可以在屏幕宽度大于768px时，通过在分别使用.nav、.nav-tabs或.nav、.nav-pills的同时使用class.nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。ulclass=navnav-pillsnav-justified/ululclass=navnav-tabsnav-justified/ul禁用链接对每个.navclass，如果添加了.disabledclass，则会创建一个灰色的链接，同时禁用了该链接的:hover状态注意：该class只会改变a的外观，不会改变它的功能。在这里，您需要使用自定义的JavaScript来禁用链接$(function(){$(a).bind(click,function(){returnfalse;});});导航下拉菜单带有下拉菜单的标签向标签添加下拉菜单的步骤如下：•以一个带有class.nav的无序列表开始。•添加class.nav-tabs。•添加带有.dropdown-menuclass的无序列表。ulclass=navnav-tabsliclass=dropdownaclass=dropdown-toggledata-toggle=dropdownhref=#Javaspanclass=caret/span/aulclass=dropdown-menuliahref=#Swing/a/liliahref=#jMeter/a/liliahref=#EJB/a/liliclass=divider/liliahref=#分离的链接/a/li/ul/li/ulBootstrap导航栏navclass=navbarnavbar-defaultrole=navigationdivclass=navbar-headeraclass=navbar-brandhref=#W3Cschool/a/divdivulclass=navnavbar-navliclass=activeahref=#iOS/a/liliahref=#SVN/a/liliclass=dropdownahref=#class=dropdown-toggledata-toggle=dropdownJavabclass=caret/b/aulclass=dropdown-menuliahref=#jmeter/a/liliahref=#EJB/a/liliahref=#JasperReport/a/liliclass=divider/liliahref=#分离的链接/a/liliclass=divider/liliahref=#另一个分离的链接/a/li/ul/li/ul/div/nav响应式的导航栏为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有classes.collapse、.navbar-c