h5中怎样改变h5 radio样式的样式
点击联系发帖人
时间：2016-09-25 06:59
【 H5EDU干货】全网最全BootStrap教程_html5吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：71,023贴子：
【 H5EDU干货】全网最全BootStrap教程收藏
H5edu全网最全BootStrap视频教程120集--没有之一Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分.学习本课程需要首先在H5EDU学习 HTML CSS JavaScript第1课 bootstrap标题(一)学会对bootstrap的标题的使用第2课 bootstrap标题（二）深入了解bootstrap标题属性第3课 段落(正文文本)bootstrap中的全局文本样式。第4课 强调内容bootstrap中对于一些重要内容的样式处理第5课 强调相关的类在Bootstrap中除了使用标签 &strong&、 &em&等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的&.lead）,这些强调类都是通过颜色来表示强调。第6课 文本对齐风格文本的各种对齐方式第7课 列表-简介介绍HTML文档中的三种列表第8课 列表-无序列表，有序列表。 列表的嵌套列表第9课 列表-无序列表去点把无序列表前面的圆点去掉第10课 内联列表把垂直列表编程水平列表，并且去点第11课 列表-定义列表bootstrap中的定义列表第12课 列表-水平定义列表给定义列表加上类名，使其水平显示第13课 代码风格①三种经常见到的代码风格第14课 代码风格②加深了解,代码效果最好用手机查看第15课 表格-基础表格bootstrap中的表格样式第16课 表格-斑马线表格bootstrap中的表格样式第17课 表格-带边框的表格bootstrap中的表格样式第18课 表格-鼠标悬浮高亮的表格bootstrap中的表格样式第19课 表格-紧凑型的表格bootstrap中的表格样式第20课 表格-响应式表格bootstrap中的表格样式第21课 表 格-行的类bootstrap中给表格每一行也有样式。第22课 表单bootstrap中的表单的制作第23课 水平表单bootstrap中实现水平表单,需要配合框架中的网格系统使用第24课 内联表单将表单控件在一行显示第25课 表单-输入框表单控件-输入框第26课 表单-下拉列表表单控件-下拉列表(下拉选择框)第27课 表单-文本域留言板效果第28课 表单-复选框和单选按钮checkbox、radio。第29课 表单-复选框和单选按钮水平显示控件的水平排列第30课 表单-按钮重要的表单控件之一第31课 表单-控件大小(一)bootstrap中还有控制表单大小的类名第32课 表单-控件大小（二）上一章可以看出，包装中只控制了高度，有时需要宽度也一起变化，那么就需要用的bootstrap中的网格系统一起使用了第33课 表单控件状态-焦点状态表单主要用来与用户沟通，好的表单就能更好的与用户进行沟通，而好的表单一定离不开表单的控件状态。第34课 表单控件状态-禁用状态(一)bootstrap中禁用状态添加了一些不同的风格处理第35课 表单控件状态-禁用状态(二)bootstrap中禁用状态添加了一些不同的风格处理第36课 表单控件状态-禁用状态(三)有的控件颜色变了但是没有被禁用第37课 表单控件状态-验证状态（一）做表单就不免要做验证，同样也需要验证样式，bootstrap中就提供了这几种样式第38课 表单提示信息（一）平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个&help-block&样式，将提示信息以块状显示，并且显示在控件底部。第39课 表单控件状态-验证状态（二）还可以加上其他的修饰第40课 表单提示信息(二)还可以让提示信息与控件水平显示第41 课 按钮-多标签支持可以用其他标签实现按钮效果，不过不推荐使用，了解就可以第42课 按钮大小在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮&.btn的基础上追加类名来控制按钮的大小。第43课 按钮状态按钮也有禁用状态，和活动状态第44课 图像图像在网页制作中也是常要用到的元素，在Bootstrap框架中有对图像的样式风格的类第45课 图标在网页中可以看到许多小图标。bootstrap中有近200个不同的小图标。第46课 网格系统-实现原理网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份第47课 网格-工作原理数据行(.row)最好包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。这里面就包含了几种常用的用法。第48课 网格-列偏移有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名&col-md-offset-*(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。第49课 网格-列排序列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名&col-md-push-*和&col-md-pull-* (其中星号代表移动的列组合数)。第50课 网格-列的嵌套Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。第51课 下拉菜单-基础用法在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。第52课 下拉菜单-下拉分隔线在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的 &li&，并且给这个 &li&添加类名÷r来实现添加下拉分隔线的功能第53课 下拉菜单-菜单标题可以将每一部分加一个标题进行分类。第54课 下拉菜单-对其方式（一）下拉菜单默认左对其，但是有时因需要会用到右对齐，可以在“dropdown-menu”上添加一个“pull-right”类名.同时一定要为.dropdown添加float：left；属性第55课 下拉菜单-对齐方式（二）下拉菜单默认左对其，但是有时因需要会用到右对齐，可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名.同时一定要为.dropdown添加float：left；属性第56课 下拉菜单-菜单项状态菜单项中不同的状态，通过添加类名实现第57课 按钮工具栏bootstrap中提供了编辑工具上的功能按钮样式。第58课 按钮-嵌套分组很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果，这时候，只需要把当初制作下拉菜单的&dropdown的容器换成&btn-group，并且和普通的按钮放在同一级。第59课 按钮-等分按钮等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。第60课 按钮组单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。第61课 按钮-垂直分组前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的&btn-group类名换成&btn-group-vertical即可。第62 课 按钮-按钮下拉菜单按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。第63课 按钮-下拉菜单的三角形向上显示有时下拉菜单要向上弹起，这是需要改变三角形的朝向。第64课 导航-基础样式导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。第65课 导航-标签形tab导航标签形导航，也称为选项卡导航。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。第66课 导航-胶囊型（pills）导航胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和&nav-tabs类似，同样的结构，只需要把类名&nav-tabs换成&nav-pills即可：第67课 导航-垂直堆叠的导航在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在&nav-pills的基础上添加一个&nav-stacked类名即可第68课 导航-自适应导航自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。第69课 导航-导航加下拉菜单前面介绍的都是使用Bootstrap框架制作一级导航，但很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名&dropdown，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以第70课 导航-面包屑式导航面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。在Bootstrap框架中面包屑也是一个独立模块组件第71课 导航条-基础导航条在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——基础导航条。第72课 导航条-添加标题、二级菜单及状态1.菜单前面通常会有一个标题。2.在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条。第73课 导航条-带表单的导航条带搜索功能的导航条第74课 导航条-固定导航条很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式1.固定在浏览器窗口顶部2.固定在浏览器窗口底部第75课 导航条-响应式导航条如今浏览Web页面的终端不在是一尘不变了，前面示例实现的导航条仅能适配于大屏幕的浏览器，但当浏览器屏幕变小的时候，就不适合了。因此响应式设计也就随之而来。那么在一个响应式的Web页面中，对于响应式的导航条也就非常的重要。那么在这一节中，主要和大家探讨如何使用Bootstrap框架实现响应式导航条效果。第76课 导航条-反色导航条反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改第77课 分页导航-带页码的分页导航分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验第78课 分页导航-翻页分页导航分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验第79课 标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个&new标签，来告诉用户。这是新添加的导航项。第80课 徽章从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读。第81 课 缩略图（一）缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过&thumbnail样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。第82课 缩略图（二）上一章节节，展示的仅只有缩略图的一种使用方式，除了这种方式之外，还可以让缩略图配合标题、描述内容，按钮等第83课 警示框-默认警示框Bootstrap框架通过&alert&样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果第84课 警示框-可关闭的警示框大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。第85课 警示框-警示框的链接有时候你可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。第86课 进度条-基本样式Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。第87课 进度条-彩色进度条Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，第88课 进度条-条纹进度条在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器&progress基础上增加类名&progress-striped，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲。第89课 进度条-动态条纹进度条为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。第90课 进度条-层叠进度条Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。第91课 进度条-带进度值的进度条上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。第92课 媒体对象-默认媒体对象本课时讲解Bootstrap 媒体对象，媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。第93课 媒体对象-媒体对象的嵌套媒体对象嵌套使用第94课 媒体对象-媒体对象列表媒体对象的嵌套仅是媒体对象中一个简单应用效果之一，在很多时候，我们还会碰到一个列表，每个列表项都和媒体对象长得差不多。比如评论区第95课
列表组-基础列表组基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。第96课 列表组-带徽章的列表组带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在&list-group-item中添加徽章组件&badge第97课 列表组-带链接的列表组带链接的列表组，其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上，给列表项的文本添加链接第98课 列表组-自定义列表组bootstrap中可以自定义列表里面的内容第99课
列表组-列表项的状态设置Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如常见状态和禁用状态等。第100课 列表组-多彩列表组列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色。第101课 面板-基础面板基础面板非常简单，就是一个div容器运用了&panel样式，产生一个具有边框的文本显示块。由于&panel不控制主题颜色，所以在&panel的基础上增加一个控制颜色的主题&panel-default，另外在里面添加了一个&div.panel-body来放置面板主体内容第102课 面板-带有头、尾的面板基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加&面板头部和&页面尾部的效果。第103课 面板-彩色面板根据不同的面板需求，可以装饰成相应的颜色第104课 面板-面板中嵌套表格(一)一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在面板中放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。第105课 面板-面板中嵌套表格（二）将内容放到panel-body中，样式跟放在panel-body外有所不同，来看看另一种效果第106课 面板-面板中嵌套列表组（一）在上一节，我们介绍了如何在面板中放置表格，现在我们来学习如何在面板中放置列表组。第107课 面板-面板中嵌套列表组（二）第二种样式。第108课 模拟弹框Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。第109课 动画过度这一小节我们先来讲&动画过渡（Transitions）这个插件的使用第110课 模拟弹框-通过href触发不同的弹框触发方式第111课 模拟弹框-通过data-target触发不同的弹框触发方式第112课 模拟弹框-弹框大小（大）bootstrap中为弹框设置了不同的两种尺寸第113课 模拟弹框-弹框大小（大）bootstrap中为弹框设置了不同的两种尺寸第114课 标签页用来做内容片段的切换，或是相关内容的页面导航第115课 提示工具(一)提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。第116课 提示你工具(二)上一节介绍了链接提示信息。这一节介绍按钮提示信息第117课 弹出框弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。第118课 折叠面板折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。第119课 滚动监听滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。第120课 轮播图Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－教程源码下载地址第一部分BootStrap样式：第二部分BootStrap组件：第三部分BootStrap插件：视频下载地址：下方阅读原文或点击这里
好东西 顶下
第一眼看到楼主的这个帖子的时候，我的眼前竟然感觉一亮！仿佛看到了倾城倾国的美人，正轻摇柳步款款而行。
刚学过，响应试设计
这个怎么下载看呀！
直到学完之后才明白，我早会了
顶起来,好东西
谢谢楼主。
很棒,谢谢楼主,我之前看的猿代码的也不错,推荐给大家,百度一下就出来了
html5交流群，有什么问题都可以在群里交流我们这里最不缺的就是大神
验证信息请填写大写的
L 方可通过
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或CSS & Bootstrap
深入了解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、更快、更强壮的最佳实践。
HTML5文档类型
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
&!DOCTYPE html&
&html lang=&zh-cn&&
移动设备优先
在Bootstrap 2中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。
为了确保适当的绘制和触屏缩放，需要在&head&之中添加viewport元数据标签。
&meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&&
响应式图片
通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height:属性，可以让图片按比例缩放，不超过其父元素的尺寸。
&img src=&...& class=&img-responsive& alt=&Responsive image&&
排版和链接
Bootstrap设置了全局样式，包括显示、排版和链接。尤其是，我们还：
为body标签设置了background-color:
设置了排版的基本属性@font-family-base、@font-size-base和@line-height-base
Set the global link color via @link-color and apply link underlines only on :hover
这些样式可以在scaffolding.less文件中找到。
为了增强跨浏览器表现的一致性，我们使用了，这是由和 维护的一个reset库。
Containers
用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。
注意，由于设置了padding 和 固定宽度，.container不能嵌套。
&div class=&container&&
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的，还有强大的。
栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：
"行（row）"必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
使用"行（row）"在水平方向创建一组"列（column）"。
你的内容应当放置于"列（column）"内，而且，只有"列（column）"可以作为行（row）"的直接子元素。
类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
通过设置padding从而创建"列（column）"之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。
通过研究案例，可以将这些原理应用到你的代码中。
在栅格系统中，我们在LESS文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-md-min) { ... }
@media (min-width: @screen-lg-min) { ... }
We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。
超小屏幕设备 手机 (&768px)
小屏幕设备 平板 (&768px)
中等屏幕设备 桌面 (&992px)
大屏幕设备 桌面 (&1200px)
栅格系统行为
总是水平排列
开始是堆叠在一起的，超过这些阈值将变为水平排列
最大.container宽度
None (自动)
30px (每列左右均有15px)
偏移（Offsets）
栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。因此，对任何一个元素应用任何.col-md- class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备（如果没有设置.col-lg- class的话）。
案例：从堆叠到水平排列
使用单一的一组.col-md-*栅格class，你就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。将列(col-*-*)放置于任何.row内即可。
&div class=&row&&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&row&&
&div class=&col-md-8&&.col-md-8&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&row&&
&div class=&col-md-6&&.col-md-6&/div&
&div class=&col-md-6&&.col-md-6&/div&
案例：移动设备和桌面
是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的class吧，即.col-xs-*、.col-md-*。请看下面的案例。
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
&!-- Stack the columns on mobile by making one full-width and the other half-width --&
&div class=&row&&
&div class=&col-xs-12 col-md-8&&.col-xs-12 .col-md-8&/div&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&
&div class=&row&&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&!-- Columns are always 50% wide, on mobile and desktop --&
&div class=&row&&
&div class=&col-xs-6&&.col-xs-6&/div&
&div class=&col-xs-6&&.col-xs-6&/div&
案例：手机、平板和桌面
在上面案例的基础上，通过使用.col-sm-* classe我们来创建更加动态和强大的布局吧。
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
&div class=&row&&
&div class=&col-xs-12 col-sm-6 col-md-8&&.col-xs-12 .col-sm-6 .col-md-8&/div&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&div class=&row&&
&div class=&col-xs-6 col-sm-4&&.col-xs-6 .col-sm-4&/div&
&div class=&col-xs-6 col-sm-4&&.col-xs-6 .col-sm-4&/div&
&!-- Optional: clear the XS cols if their content doesn't match in height --&
&div class=&clearfix visible-xs&&&/div&
&div class=&col-xs-6 col-sm-4&&.col-xs-6 .col-sm-4&/div&
Responsive column resets
即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用.clearfix和。
.col-xs-6 .col-sm-3
通过调整浏览器的宽度或在手机上即可查看这些案例的实际效果。
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
&div class=&row&&
&div class=&col-xs-6 col-sm-3&&.col-xs-6 .col-sm-3&/div&
&div class=&col-xs-6 col-sm-3&&.col-xs-6 .col-sm-3&/div&
&!-- Add the extra clearfix for only the required viewport --&
&div class=&clearfix visible-xs&&&/div&
&div class=&col-xs-6 col-sm-3&&.col-xs-6 .col-sm-3&/div&
&div class=&col-xs-6 col-sm-3&&.col-xs-6 .col-sm-3&/div&
In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier. See this in action in .
&div class=&row&&
&div class=&col-sm-5 col-md-6&&.col-sm-5 .col-md-6&/div&
&div class=&col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0&&.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0&/div&
&div class=&row&&
&div class=&col-sm-6 col-md-5 col-lg-6&&.col-sm-6 .col-md-5 .col-lg-6&/div&
&div class=&col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0&&.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0&/div&
使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4 col-md-offset-4&&.col-md-4 .col-md-offset-4&/div&
&div class=&row&&
&div class=&col-md-3 col-md-offset-3&&.col-md-3 .col-md-offset-3&/div&
&div class=&col-md-3 col-md-offset-3&&.col-md-3 .col-md-offset-3&/div&
&div class=&row&&
&div class=&col-md-6 col-md-offset-3&&.col-md-6 .col-md-offset-3&/div&
为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。
Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6
&div class=&row&&
&div class=&col-md-9&&
Level 1: .col-md-9
&div class=&row&&
&div class=&col-md-6&&
Level 2: .col-md-6
&div class=&col-md-6&&
Level 2: .col-md-6
通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
&div class=&row&&
&div class=&col-md-9 col-md-push-3&&.col-md-9 .col-md-push-3&/div&
&div class=&col-md-3 col-md-pull-9&&.col-md-3 .col-md-pull-9&/div&
LESS mixin和变量
在快速布局之外，Bootstrap包含了一组LESS变量和mixin用于快速生成你自己的语义化栅格布局。
通过变量来定义列数、槽宽、媒体查询阈值。我们使用这些变量生成预定义的栅格class，如上所示，还有如下所示的定制mixin。
@grid-columns:
@grid-gutter-width:
@grid-float-breakpoint:
Mixin用来和栅格变量一同使用生成栅格中纵列的定义。
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left:
(@gutter / -2);
margin-right: (@gutter / -2);
// Negative margin nested rows out to align the content of columns
margin-left:
(@gutter / -2);
margin-right: (@gutter / -2);
// Generate the extra small columns
.make-xs-column(@ @gutter: @grid-gutter-width) {
// Prevent columns from collapsing when empty
min-height: 1
// Inner gutter via padding
padding-left:
(@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
width: percentage((@columns / @grid-columns));
// Generate the small columns
.make-sm-column(@ @gutter: @grid-gutter-width) {
// Prevent columns from collapsing when empty
min-height: 1
// Inner gutter via padding
padding-left:
(@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
width: percentage((@columns / @grid-columns));
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
// Generate the medium columns
.make-md-column(@ @gutter: @grid-gutter-width) {
// Prevent columns from collapsing when empty
min-height: 1
// Inner gutter via padding
padding-left:
(@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
width: percentage((@columns / @grid-columns));
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
// Generate the large columns
.make-lg-column(@ @gutter: @grid-gutter-width) {
// Prevent columns from collapsing when empty
min-height: 1
// Inner gutter via padding
padding-left:
(@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
width: percentage((@columns / @grid-columns));
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
你还可以重新修改这些变量的值，或者用默认值调用这些mixin。下面就是一个利用默认设置生成两列布局的案例。
.wrapper {
.make-row();
.content-main {
.make-lg-column(8);
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
&div class=&wrapper&&
&div class=&content-main&&...&/div&
&div class=&content-secondary&&...&/div&
HTML中的所有标题标签，从&h1& 到 &h6& 均可用。另外，还提供了.h1 到.h6 class，为的是给inline属性的文本赋予标题的样式。
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
&h1&h1. Bootstrap heading&/h1&
&h2&h2. Bootstrap heading&/h2&
&h3&h3. Bootstrap heading&/h3&
&h4&h4. Bootstrap heading&/h4&
&h5&h5. Bootstrap heading&/h5&
&h6&h6. Bootstrap heading&/h6&
在标题内还可以包含&small&标签或.small元素，可以用来标记副标题。
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
&h1&h1. Bootstrap heading &small&Secondary text&/small&&/h1&
&h2&h2. Bootstrap heading &small&Secondary text&/small&&/h2&
&h3&h3. Bootstrap heading &small&Secondary text&/small&&/h3&
&h4&h4. Bootstrap heading &small&Secondary text&/small&&/h4&
&h5&h5. Bootstrap heading &small&Secondary text&/small&&/h5&
&h6&h6. Bootstrap heading &small&Secondary text&/small&&/h6&
Bootstrap将全局font-size设置为14px，line-height为1.428。这些属性直接赋给&body&和所有段落元素。另外，&p&（段落）还被设置了等于1/2行高的底部外边距（margin）（即10px）。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
&p&...&/p&
Lead body copy
通过添加.lead可以让段落突出显示。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
&p class=&lead&&...&/p&
使用Less工具构建
variables.less文件中定义的两个LESS变量决定了排版尺寸: @font-size-base 和 @line-height-base。第一个变量定义了全局font-size基准，第二个变量是line-height基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的margin、 padding和line-height。自定义这些变量即可改变Bootstrap的默认样式。
直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。
对于不需要强调的inline或block类型的文本，使用&small&标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的&small&元素被设置不同的font-size。
你还可以为行内元素赋予.small以代替任何&small&标签。
This line of text is meant to be treated as fine print.
&small&This line of text is meant to be treated as fine print.&/small&
通过增加font-weight强调一段文本。
下面的这段文本进行了着重处理。
&strong&rendered as bold text&/strong&
用斜体强调一段文本。
下面的这段文本就是通过斜体进行强调的。
&em&rendered as italicized text&/em&
通过文本对齐class，可以简单方便的将文字重新对齐。
Left aligned text.
Center aligned text.
Right aligned text.
&p class=&text-left&&Left aligned text.&/p&
&p class=&text-center&&Center aligned text.&/p&
&p class=&text-right&&Right aligned text.&/p&
这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
&p class=&text-muted&&...&/p&
&p class=&text-primary&&...&/p&
&p class=&text-success&&...&/p&
&p class=&text-info&&...&/p&
&p class=&text-warning&&...&/p&
&p class=&text-danger&&...&/p&
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的&abbr&元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有"问号"的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
基本缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
An abbreviation of the word attribute is attr.
&abbr title=&attribute&&attr&/abbr&
Initialism
为缩略语添加.initialism可以将其font-size设置的更小些。
HTML is the best thing since sliced bread.
&abbr title=&HyperText Markup Language& class=&initialism&&HTML&/abbr&
让联系信息以最接近日常使用的格式呈现。在每行结尾添加&br&可以保留需要的样式。
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
&strong&Twitter, Inc.&/strong&&br&
795 Folsom Ave, Suite 600&br&
San Francisco, CA 94107&br&
&abbr title=&Phone&&P:&/abbr& (123) 456-7890
&/address&
&strong&Full Name&/strong&&br&
&a href=&mailto:#&&first.&/a&
&/address&
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在&blockquote&之中即可表现为引用。对于直接引用，我们建议用&p&标签。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
&blockquote&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&/p&
&/blockquote&
对于标准样式的&blockquote&，可以通过几个简单的变体就能改变风格和内容。
添加&small&标签或.small class 来注明引用来源。来源名称可以放在&cite&标签里面。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
&blockquote&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&/p&
&small&Someone famous in &cite title=&Source Title&&Source Title&/cite&&/small&
&/blockquote&
另一种展示风格
使用.pull-right可以让引用展现出向右侧移动、对齐的效果。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
&blockquote class=&pull-right&&
&/blockquote&
顺序无关紧要的一列元素。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
&li&...&/li&
顺序至关重要的一组元素。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
&li&...&/li&
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
&ul class=&list-unstyled&&
&li&...&/li&
通过设置display: inline-并添加少量的内补，将所有元素放置于同一列。
Lorem ipsum
Phasellus iaculis
Nulla volutpat
&ul class=&list-inline&&
&li&...&/li&
带有描述的短语列表。
Description lists
A description list is perfect for defining terms.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
&dt&...&/dt&
&dd&...&/dd&
水平排列的描述
.dl-horizontal可以让&dl&内短语及其描述排在一行。开始是像&dl&默认样式堆叠在一起，随着导航条逐渐展开而排列在一样。
Description lists
A description list is perfect for defining terms.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
&dl class=&dl-horizontal&&
&dt&...&/dt&
&dd&...&/dd&
在正文中通过&code&标签包裹内联样式的代码片段。
For example, §ion& should be wrapped as inline.
For example, &code&§ion&&/code& should be wrapped as inline.
基本代码块
多行代码可以使用&pre&标签。为了正确的展示代码，注意将尖括号做转义处理。
&p&Sample text here...&/p&
&pre&&p&Sample text here...&/p&&/pre&
还可以使用.pre-scrollable class，其作用是设置max-height为350px，并在垂直方向展示滚动条。
为任意&table&标签添加.table可以为其赋予基本的样式&少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。
First Name
&table class=&table&&
条纹状表格
利用.table-striped可以给&tbody&之内的每一样增加斑马条纹样式。
跨浏览器兼容性
条纹状表格是通过:nth-child CSS选择器实现的，而这一功能不被Internet Explorer 8支持。
First Name
&table class=&table table-striped&&
带边框的表格
利用.table-bordered为表格和其中的每个单元格增加边框。
First Name
@TwBootstrap
Larry the Bird
&table class=&table table-bordered&&
利用.table-hover可以让&tbody&中的每一行响应鼠标悬停状态。
First Name
Larry the Bird
&table class=&table table-hover&&
利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。
First Name
Larry the Bird
&table class=&table table-condensed&&
通过这些状态class可以为行货单元格设置颜色。
鼠标悬停在行或单元格上时所设置的颜色
标识成功或积极的动作
标识警告或需要用户注意
标识危险或潜在的带来负面影响的动作
Column heading
Column heading
Column heading
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
&!-- On rows --&
&tr class=&active&&...&/tr&
&tr class=&success&&...&/tr&
&tr class=&warning&&...&/tr&
&tr class=&danger&&...&/tr&
&!-- On cells (`td` or `th`) --&
&td class=&active&&...&/td&
&td class=&success&&...&/td&
&td class=&warning&&...&/td&
&td class=&danger&&...&/td&
响应式表格
将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
&div class=&table-responsive&&
&table class=&table&&
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的&input&、&textarea&和&select&元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。
Email address
File input
Example block-level help text here.
Check me out
&form role=&form&&
&div class=&form-group&&
&label for=&exampleInputEmail1&&Email address&/label&
&input type=&email& class=&form-control& id=&exampleInputEmail1& placeholder=&Enter email&&
&div class=&form-group&&
&label for=&exampleInputPassword1&&Password&/label&
&input type=&password& class=&form-control& id=&exampleInputPassword1& placeholder=&Password&&
&div class=&form-group&&
&label for=&exampleInputFile&&File input&/label&
&input type=&file& id=&exampleInputFile&&
&p class=&help-block&&Example block-level help text here.&/p&
&div class=&checkbox&&
&input type=&checkbox&& Check me out
&button type=&submit& class=&btn btn-default&&Submit&/button&
为&form&元素.form-inline可使其内容左对齐并且表现为inline-block级别的控件。只适用于浏览器窗口至少在 768px 宽度时（窗口宽度再小的话就会使表单折叠）。
需要设置宽度
在Bootstrap中，input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。
一定要设置label
如果你没有为每个输入控件设置label，屏幕阅读器将无法正确识读。对于这些内联表单，你可以通过为label设置.sr-only已将其隐藏。
Email address
Remember me
&form class=&form-inline& role=&form&&
&div class=&form-group&&
&label class=&sr-only& for=&exampleInputEmail2&&Email address&/label&
&input type=&email& class=&form-control& id=&exampleInputEmail2& placeholder=&Enter email&&
&div class=&form-group&&
&label class=&sr-only& for=&exampleInputPassword2&&Password&/label&
&input type=&password& class=&form-control& id=&exampleInputPassword2& placeholder=&Password&&
&div class=&checkbox&&
&input type=&checkbox&& Remember me
&button type=&submit& class=&btn btn-default&&Sign in&/button&
水平排列的表单
通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。
Remember me
&form class=&form-horizontal& role=&form&&
&div class=&form-group&&
&label for=&inputEmail3& class=&col-sm-2 control-label&&Email&/label&
&div class=&col-sm-10&&
&input type=&email& class=&form-control& id=&inputEmail3& placeholder=&Email&&
&div class=&form-group&&
&label for=&inputPassword3& class=&col-sm-2 control-label&&Password&/label&
&div class=&col-sm-10&&
&input type=&password& class=&form-control& id=&inputPassword3& placeholder=&Password&&
&div class=&form-group&&
&div class=&col-sm-offset-2 col-sm-10&&
&div class=&checkbox&&
&input type=&checkbox&& Remember me
&div class=&form-group&&
&div class=&col-sm-offset-2 col-sm-10&&
&button type=&submit& class=&btn btn-default&&Sign in&/button&
被支持的控件
在表单布局案例中展示了其所支持的标准表单控件。
大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。
必须添加类型声明
只有正确设置了type的input控件才能被赋予正确的样式。
&input type=&text& class=&form-control& placeholder=&Text input&&
支持多行文本的表单控件。可根据需要改变rows属性。
&textarea class=&form-control& rows=&3&&&/textarea&
Checkbox 和 radio
Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。
默认外观(堆叠在一起)
Option one is this and that&be sure to include why it's great
Option one is this and that&be sure to include why it's great
Option two can be something else and selecting it will deselect option one
&div class=&checkbox&&
&input type=&checkbox& value=&&&
Option one is this and that&be sure to include why it's great
&div class=&radio&&
&input type=&radio& name=&optionsRadios& id=&optionsRadios1& value=&option1& checked&
Option one is this and that&be sure to include why it's great
&div class=&radio&&
&input type=&radio& name=&optionsRadios& id=&optionsRadios2& value=&option2&&
Option two can be something else and selecting it will deselect option one
Inline checkboxes
通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行。
&label class=&checkbox-inline&&
&input type=&checkbox& id=&inlineCheckbox1& value=&option1&& 1
&label class=&checkbox-inline&&
&input type=&checkbox& id=&inlineCheckbox2& value=&option2&& 2
&label class=&checkbox-inline&&
&input type=&checkbox& id=&inlineCheckbox3& value=&option3&& 3
使用默认选项或添加multiple属性可以显示多个选项。
&select class=&form-control&&
&option&1&/option&
&option&2&/option&
&option&3&/option&
&option&4&/option&
&option&5&/option&
&select multiple class=&form-control&&
&option&1&/option&
&option&2&/option&
&option&3&/option&
&option&4&/option&
&option&5&/option&
在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为&p&元素添加.form-control-static即可。
&form class=&form-horizontal& role=&form&&
&div class=&form-group&&
&label class=&col-sm-2 control-label&&Email&/label&
&div class=&col-sm-10&&
&p class=&form-control-static&&&/p&
&div class=&form-group&&
&label for=&inputPassword& class=&col-sm-2 control-label&&Password&/label&
&div class=&col-sm-10&&
&input type=&password& class=&form-control& id=&inputPassword& placeholder=&Password&&
通过为控件和label设置一些基本状态，可以为用户提供回馈。
我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。
&input class=&form-control& id=&focusedInput& type=&text& value=&This is focused...&&
被禁用的输入框
为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观。
&input class=&form-control& id=&disabledInput& type=&text& placeholder=&Disabled input here...& disabled&
被禁用的fieldset
为&fieldset&设置disabled属性可以禁用&fieldset&中包含的所有控件。
&a&标签的链接功能不受影响
这个class只改变&a class="btn btn-default"&按钮的外观，并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。
跨浏览器兼容性
虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的&fieldset&并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset
Disabled input
Disabled select menu
Disabled select
Can't check this
&form role=&form&&
&fieldset disabled&
&div class=&form-group&&
&label for=&disabledTextInput&&Disabled input&/label&
&input type=&text& id=&disabledTextInput& class=&form-control& placeholder=&Disabled input&&
&div class=&form-group&&
&label for=&disabledSelect&&Disabled select menu&/label&
&select id=&disabledSelect& class=&form-control&&
&option&Disabled select&/option&
&div class=&checkbox&&
&input type=&checkbox&& Can't check this
&button type=&submit& class=&btn btn-primary&&Submit&/button&
&/fieldset&
Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。
Input with success
Input with warning
Input with error
&div class=&form-group has-success&&
&label class=&control-label& for=&inputSuccess&&Input with success&/label&
&input type=&text& class=&form-control& id=&inputSuccess&&
&div class=&form-group has-warning&&
&label class=&control-label& for=&inputWarning&&Input with warning&/label&
&input type=&text& class=&form-control& id=&inputWarning&&
&div class=&form-group has-error&&
&label class=&control-label& for=&inputError&&Input with error&/label&
&input type=&text& class=&form-control& id=&inputError&&
通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。
创建大一些或小一些的表单控件以匹配按钮尺寸。
Default select
&input class=&form-control input-lg& type=&text& placeholder=&.input-lg&&
&input class=&form-control& type=&text& placeholder=&Default input&&
&input class=&form-control input-sm& type=&text& placeholder=&.input-sm&&
&select class=&form-control input-lg&&...&/select&
&select class=&form-control&&...&/select&
&select class=&form-control input-sm&&...&/select&
调整列尺寸
用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。
&div class=&row&&
&div class=&col-xs-2&&
&input type=&text& class=&form-control& placeholder=&.col-xs-2&&
&div class=&col-xs-3&&
&input type=&text& class=&form-control& placeholder=&.col-xs-3&&
&div class=&col-xs-4&&
&input type=&text& class=&form-control& placeholder=&.col-xs-4&&
用于表单控件的块级帮助文本。
自己独占一行或多行的块级帮助文本。
&span class=&help-block&&自己独占一行或多行的块级帮助文本。&/span&
使用下面列出的class可以快速创建一个带有样式的按钮。
&!-- Standard button --&
&button type=&button& class=&btn btn-default&&Default&/button&
&!-- Provides extra visual weight and identifies the primary action in a set of buttons --&
&button type=&button& class=&btn btn-primary&&Primary&/button&
&!-- Indicates a successful or positive action --&
&button type=&button& class=&btn btn-success&&Success&/button&
&!-- Contextual button for informational alert messages --&
&button type=&button& class=&btn btn-info&&Info&/button&
&!-- Indicates caution should be taken with this action --&
&button type=&button& class=&btn btn-warning&&Warning&/button&
&!-- Indicates a dangerous or potentially negative action --&
&button type=&button& class=&btn btn-danger&&Danger&/button&
&!-- Deemphasize a button by making it look like a link while maintaining button behavior --&
&button type=&button& class=&btn btn-link&&Link&/button&
需要让按钮具有不同尺寸吗？使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。
Large button
Large button
Default button
Default button
Small button
Small button
Extra small button
Extra small button
&button type=&button& class=&btn btn-primary btn-lg&&Large button&/button&
&button type=&button& class=&btn btn-default btn-lg&&Large button&/button&
&button type=&button& class=&btn btn-primary&&Default button&/button&
&button type=&button& class=&btn btn-default&&Default button&/button&
&button type=&button& class=&btn btn-primary btn-sm&&Small button&/button&
&button type=&button& class=&btn btn-default btn-sm&&Small button&/button&
&button type=&button& class=&btn btn-primary btn-xs&&Extra small button&/button&
&button type=&button& class=&btn btn-default btn-xs&&Extra small button&/button&
通过给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素。
此按钮为块级元素
此按钮为块级元素
&button type=&button& class=&btn btn-primary btn-lg btn-block&&Block level button&/button&
&button type=&button& class=&btn btn-default btn-lg btn-block&&Block level button&/button&
当按钮处于活动状态时，其表现为被按压下（底色更深，边框夜色更深，内置阴影）。对于&button&元素，是通过:active实现的。对于&a&元素，是通过.active实现的。然而，你还可以联合使用.active &button&并通过编程的方式使其处于活动状态。
由于:active是伪状态，因此 无需添加，但是在需要表现出同样外观的时候可以添加.active。
Primary button
&button type=&button& class=&btn btn-primary btn-lg active&&Primary button&/button&
&button type=&button& class=&btn btn-default btn-lg active&&Button&/button&
可以为&a&添加.active class。
&a href=&#& class=&btn btn-primary btn-lg active& role=&button&&Primary link&/a&
&a href=&#& class=&btn btn-default btn-lg active& role=&button&&Link&/a&
通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
为&button&添加disabled属性。
Primary button
&button type=&button& class=&btn btn-lg btn-primary& disabled=&disabled&&Primary button&/button&
&button type=&button& class=&btn btn-default btn-lg& disabled=&disabled&&Button&/button&
跨浏览器的兼容性
如果为&button&添加disabled属性，Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前还没有办法解决。
为&a&添加.disabled class。
&a href=&#& class=&btn btn-primary btn-lg disabled& role=&button&&Primary link&/a&
&a href=&#& class=&btn btn-default btn-lg disabled& role=&button&&Link&/a&
我们把.disabled作为工具class使用，就像.active class一样，因此不需要增加前缀。
链接功能不受影响
上面提到的class只是改变&a&的外观，不影响功能。在此文档中，我们通过JavaScript代码禁用了链接的默认功能。
Context-specific usage
While button classes can be used on &a& and &button& elements, only &button& elements are supported within our nav and navbar components.
可以为&a&、&button&或&input&元素添加按钮class。
&a class=&btn btn-default& href=&#& role=&button&&Link&/a&
&button class=&btn btn-default& type=&submit&&Button&/button&
&input class=&btn btn-default& type=&button& value=&Input&&
&input class=&btn btn-default& type=&submit& value=&Submit&&
跨浏览器表现
作为最佳实践，我们强烈建议尽可能使用&button&元素以确保跨浏览器的一致性样式。
出去其它原因，这个让我们无法为基于&input&标签的按钮设置line-height，这导致在Firefox上，他们与其它按钮的高度不一致。
为&img&元素增加不同的class，就可以轻松的改变其样式。
跨浏览器兼容性
你要知道，Internet Explorer 8是不支持圆角矩形的。
&img src=&...& alt=&...& class=&img-rounded&&
&img src=&...& alt=&...& class=&img-circle&&
&img src=&...& alt=&...& class=&img-thumbnail&&
响应式图片
想要知道如何让图片具有响应式特性吗？。
通过使用一个象征关闭的图标，可以用来让模式对话框和警告框消失。
&button type=&button& class=&close& aria-hidden=&true&&&&/button&
Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in .
&span class=&caret&&&/span&
快速设置浮动
通过这两个class让页面元素左右浮动。 !important被用来避免某些问题。也可以像mixin一样使用这两个class。
&div class=&pull-left&&...&/div&
&div class=&pull-right&&...&/div&
// Classes
.pull-left {
float: left !
.pull-right {
float: right !
// Usage as mixins
.element {
.pull-left();
.another-element {
.pull-right();
不要用于导航条
如果是用于对齐导航条上的组件，请务必使用.navbar-left 或 .navbar-right。查看以获取详情。
内容区域居中
将页面元素设置为 display: block并通过设置margin使其居中。可以作为mixin或class使用。
&div class=¢er-block&&...&/div&
// 作为classe使用
.center-block {
margin-left:
margin-right:
// 作为mixin使用
.element {
.center-block();
使用.clearfix清除任意页面元素的浮动。我们使用了Nicolas Gallagher的。也可以像mixin一样使用。
&!-- Usage as a class --&
&div class=&clearfix&&...&/div&
// Mixin itself
.clearfix() {
content: " ";
// Usage as a Mixin
.element {
.clearfix();
显示和隐藏内容
通过.show 和 .hidden可以强制显示或隐藏任一页面元素（包括在屏幕阅读器上）。这两个class使用了!important以避免冲突，原因和类似。这两个class只能做用于块级元素，也可以作为mixin使用。
.hide 仍然可以用，但是它不能影响屏幕阅读器，并且从v3.0.1版本开始已将被标记为不建议使用。请使用.hidden 或 .sr-only。
Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.
&div class=&show&&...&/div&
&div class=&hidden&&...&/div&
// Classes
display: block !
display: none !
visibility: hidden !
.invisible {
visibility:
// Usage as mixins
.element {
.another-element {
.hidden();
针对屏幕阅读器的内容
使用.sr-only可以针对除了屏幕阅读器之外的所有设备隐藏一个元素。对于也很有用。此class还可以作为mixin使用。
&a class=&sr-only& href=&#content&&Skip to main content&/a&
// Usage as a Mixin
.skip-navigation {
.sr-only();
使用.text-hide class（也可作为mixin使用）可以将页面元素所包含的文本内容替换为背景图。
&h1 class=&text-hide&&Custom heading&/h1&
// Usage as a Mixin
.heading {
.text-hide();
通过使用这些工具class可以根据屏幕和不同的媒体查询显示或隐藏页面内容，加速针对移动设备的开发。
尝试使用这些class并避免创建同一个网站的不同版本，从而能够完善不同设备上的显示效果。响应式工具目前只是针对块级元素， 不支持inline元素和表格元素。
可用的class
通过单独或联合使用以下列出的class，可以针对不同屏幕尺寸隐藏或显示页面内容。
超小屏幕 手机 (&768px)
小屏幕 平板 (&768px)
中等屏幕 桌面 (&992px)
大屏幕 桌面 (&1200px)
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
和常规的响应式class一样，使用下面的class可以针对打印机隐藏或显示某些内容。
.visible-print
.hidden-print
调整你的浏览器窗口的尺寸或者在不同的设备上加载此页面，均可测试上面提到的工具class。
在...上可见
带有绿色标记的元素表示其在当前浏览器窗口中是可见的。
超小 ✔ Visible on x-small
小 ✔ Visible on small
中等 ✔ Visible on medium
大 ✔ 大屏幕可见
Extra small and small ✔ Visible on x-small and small
Medium and large ✔ Visible on medium and large
Extra small and medium ✔ Visible on x-small and medium
Small and large ✔ Visible on small and large
Extra small and large ✔ Visible on x-small and large
Small and medium ✔ Visible on small and medium
在...上隐藏
带有绿色标记的元素表示其在当前浏览器窗口中是隐藏的。
Extra small ✔ Hidden on x-small
Small ✔ Hidden on small
Medium ✔ Hidden on medium
Large ✔ Hidden on large
Extra small and small ✔ Hidden on x-small and small
Medium and large ✔ Hidden on medium and large
Extra small and medium ✔ Hidden on x-small and medium
Small and large ✔ Hidden on small and large
Extra small and large ✔ Hidden on x-small and large
Small and medium ✔ Hidden on small and medium
400-700-1020}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：71,023贴子：
【 H5EDU干货】全网最全BootStrap教程收藏
H5edu全网最全BootStrap视频教程120集--没有之一Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分.学习本课程需要首先在H5EDU学习 HTML CSS JavaScript第1课 bootstrap标题(一)学会对bootstrap的标题的使用第2课 bootstrap标题（二）深入了解bootstrap标题属性第3课 段落(正文文本)bootstrap中的全局文本样式。第4课 强调内容bootstrap中对于一些重要内容的样式处理第5课 强调相关的类在Bootstrap中除了使用标签 &strong&、 &em&等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的&.lead）,这些强调类都是通过颜色来表示强调。第6课 文本对齐风格文本的各种对齐方式第7课 列表-简介介绍HTML文档中的三种列表第8课 列表-无序列表，有序列表。 列表的嵌套列表第9课 列表-无序列表去点把无序列表前面的圆点去掉第10课 内联列表把垂直列表编程水平列表，并且去点第11课 列表-定义列表bootstrap中的定义列表第12课 列表-水平定义列表给定义列表加上类名，使其水平显示第13课 代码风格①三种经常见到的代码风格第14课 代码风格②加深了解,代码效果最好用手机查看第15课 表格-基础表格bootstrap中的表格样式第16课 表格-斑马线表格bootstrap中的表格样式第17课 表格-带边框的表格bootstrap中的表格样式第18课 表格-鼠标悬浮高亮的表格bootstrap中的表格样式第19课 表格-紧凑型的表格bootstrap中的表格样式第20课 表格-响应式表格bootstrap中的表格样式第21课 表 格-行的类bootstrap中给表格每一行也有样式。第22课 表单bootstrap中的表单的制作第23课 水平表单bootstrap中实现水平表单,需要配合框架中的网格系统使用第24课 内联表单将表单控件在一行显示第25课 表单-输入框表单控件-输入框第26课 表单-下拉列表表单控件-下拉列表(下拉选择框)第27课 表单-文本域留言板效果第28课 表单-复选框和单选按钮checkbox、radio。第29课 表单-复选框和单选按钮水平显示控件的水平排列第30课 表单-按钮重要的表单控件之一第31课 表单-控件大小(一)bootstrap中还有控制表单大小的类名第32课 表单-控件大小（二）上一章可以看出，包装中只控制了高度，有时需要宽度也一起变化，那么就需要用的bootstrap中的网格系统一起使用了第33课 表单控件状态-焦点状态表单主要用来与用户沟通，好的表单就能更好的与用户进行沟通，而好的表单一定离不开表单的控件状态。第34课 表单控件状态-禁用状态(一)bootstrap中禁用状态添加了一些不同的风格处理第35课 表单控件状态-禁用状态(二)bootstrap中禁用状态添加了一些不同的风格处理第36课 表单控件状态-禁用状态(三)有的控件颜色变了但是没有被禁用第37课 表单控件状态-验证状态（一）做表单就不免要做验证，同样也需要验证样式，bootstrap中就提供了这几种样式第38课 表单提示信息（一）平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个&help-block&样式，将提示信息以块状显示，并且显示在控件底部。第39课 表单控件状态-验证状态（二）还可以加上其他的修饰第40课 表单提示信息(二)还可以让提示信息与控件水平显示第41 课 按钮-多标签支持可以用其他标签实现按钮效果，不过不推荐使用，了解就可以第42课 按钮大小在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮&.btn的基础上追加类名来控制按钮的大小。第43课 按钮状态按钮也有禁用状态，和活动状态第44课 图像图像在网页制作中也是常要用到的元素，在Bootstrap框架中有对图像的样式风格的类第45课 图标在网页中可以看到许多小图标。bootstrap中有近200个不同的小图标。第46课 网格系统-实现原理网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份第47课 网格-工作原理数据行(.row)最好包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。这里面就包含了几种常用的用法。第48课 网格-列偏移有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名&col-md-offset-*(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。第49课 网格-列排序列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名&col-md-push-*和&col-md-pull-* (其中星号代表移动的列组合数)。第50课 网格-列的嵌套Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。第51课 下拉菜单-基础用法在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。第52课 下拉菜单-下拉分隔线在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的 &li&，并且给这个 &li&添加类名÷r来实现添加下拉分隔线的功能第53课 下拉菜单-菜单标题可以将每一部分加一个标题进行分类。第54课 下拉菜单-对其方式（一）下拉菜单默认左对其，但是有时因需要会用到右对齐，可以在“dropdown-menu”上添加一个“pull-right”类名.同时一定要为.dropdown添加float：left；属性第55课 下拉菜单-对齐方式（二）下拉菜单默认左对其，但是有时因需要会用到右对齐，可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名.同时一定要为.dropdown添加float：left；属性第56课 下拉菜单-菜单项状态菜单项中不同的状态，通过添加类名实现第57课 按钮工具栏bootstrap中提供了编辑工具上的功能按钮样式。第58课 按钮-嵌套分组很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果，这时候，只需要把当初制作下拉菜单的&dropdown的容器换成&btn-group，并且和普通的按钮放在同一级。第59课 按钮-等分按钮等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。第60课 按钮组单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。第61课 按钮-垂直分组前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的&btn-group类名换成&btn-group-vertical即可。第62 课 按钮-按钮下拉菜单按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。第63课 按钮-下拉菜单的三角形向上显示有时下拉菜单要向上弹起，这是需要改变三角形的朝向。第64课 导航-基础样式导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。第65课 导航-标签形tab导航标签形导航，也称为选项卡导航。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。第66课 导航-胶囊型（pills）导航胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和&nav-tabs类似，同样的结构，只需要把类名&nav-tabs换成&nav-pills即可：第67课 导航-垂直堆叠的导航在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在&nav-pills的基础上添加一个&nav-stacked类名即可第68课 导航-自适应导航自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。第69课 导航-导航加下拉菜单前面介绍的都是使用Bootstrap框架制作一级导航，但很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名&dropdown，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以第70课 导航-面包屑式导航面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。在Bootstrap框架中面包屑也是一个独立模块组件第71课 导航条-基础导航条在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——基础导航条。第72课 导航条-添加标题、二级菜单及状态1.菜单前面通常会有一个标题。2.在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条。第73课 导航条-带表单的导航条带搜索功能的导航条第74课 导航条-固定导航条很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式1.固定在浏览器窗口顶部2.固定在浏览器窗口底部第75课 导航条-响应式导航条如今浏览Web页面的终端不在是一尘不变了，前面示例实现的导航条仅能适配于大屏幕的浏览器，但当浏览器屏幕变小的时候，就不适合了。因此响应式设计也就随之而来。那么在一个响应式的Web页面中，对于响应式的导航条也就非常的重要。那么在这一节中，主要和大家探讨如何使用Bootstrap框架实现响应式导航条效果。第76课 导航条-反色导航条反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改第77课 分页导航-带页码的分页导航分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验第78课 分页导航-翻页分页导航分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验第79课 标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个&new标签，来告诉用户。这是新添加的导航项。第80课 徽章从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读。第81 课 缩略图（一）缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过&thumbnail样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。第82课 缩略图（二）上一章节节，展示的仅只有缩略图的一种使用方式，除了这种方式之外，还可以让缩略图配合标题、描述内容，按钮等第83课 警示框-默认警示框Bootstrap框架通过&alert&样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果第84课 警示框-可关闭的警示框大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。第85课 警示框-警示框的链接有时候你可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。第86课 进度条-基本样式Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。第87课 进度条-彩色进度条Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，第88课 进度条-条纹进度条在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器&progress基础上增加类名&progress-striped，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲。第89课 进度条-动态条纹进度条为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。第90课 进度条-层叠进度条Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。第91课 进度条-带进度值的进度条上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。第92课 媒体对象-默认媒体对象本课时讲解Bootstrap 媒体对象，媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。第93课 媒体对象-媒体对象的嵌套媒体对象嵌套使用第94课 媒体对象-媒体对象列表媒体对象的嵌套仅是媒体对象中一个简单应用效果之一，在很多时候，我们还会碰到一个列表，每个列表项都和媒体对象长得差不多。比如评论区第95课
列表组-基础列表组基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。第96课 列表组-带徽章的列表组带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在&list-group-item中添加徽章组件&badge第97课 列表组-带链接的列表组带链接的列表组，其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上，给列表项的文本添加链接第98课 列表组-自定义列表组bootstrap中可以自定义列表里面的内容第99课
列表组-列表项的状态设置Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如常见状态和禁用状态等。第100课 列表组-多彩列表组列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色。第101课 面板-基础面板基础面板非常简单，就是一个div容器运用了&panel样式，产生一个具有边框的文本显示块。由于&panel不控制主题颜色，所以在&panel的基础上增加一个控制颜色的主题&panel-default，另外在里面添加了一个&div.panel-body来放置面板主体内容第102课 面板-带有头、尾的面板基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加&面板头部和&页面尾部的效果。第103课 面板-彩色面板根据不同的面板需求，可以装饰成相应的颜色第104课 面板-面板中嵌套表格(一)一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在面板中放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。第105课 面板-面板中嵌套表格（二）将内容放到panel-body中，样式跟放在panel-body外有所不同，来看看另一种效果第106课 面板-面板中嵌套列表组（一）在上一节，我们介绍了如何在面板中放置表格，现在我们来学习如何在面板中放置列表组。第107课 面板-面板中嵌套列表组（二）第二种样式。第108课 模拟弹框Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。第109课 动画过度这一小节我们先来讲&动画过渡（Transitions）这个插件的使用第110课 模拟弹框-通过href触发不同的弹框触发方式第111课 模拟弹框-通过data-target触发不同的弹框触发方式第112课 模拟弹框-弹框大小（大）bootstrap中为弹框设置了不同的两种尺寸第113课 模拟弹框-弹框大小（大）bootstrap中为弹框设置了不同的两种尺寸第114课 标签页用来做内容片段的切换，或是相关内容的页面导航第115课 提示工具(一)提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。第116课 提示你工具(二)上一节介绍了链接提示信息。这一节介绍按钮提示信息第117课 弹出框弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。第118课 折叠面板折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。第119课 滚动监听滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。第120课 轮播图Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－教程源码下载地址第一部分BootStrap样式：第二部分BootStrap组件：第三部分BootStrap插件：视频下载地址：下方阅读原文或点击这里
好东西 顶下
第一眼看到楼主的这个帖子的时候，我的眼前竟然感觉一亮！仿佛看到了倾城倾国的美人，正轻摇柳步款款而行。
刚学过，响应试设计
这个怎么下载看呀！
直到学完之后才明白，我早会了
顶起来,好东西
谢谢楼主。
很棒,谢谢楼主,我之前看的猿代码的也不错,推荐给大家,百度一下就出来了
html5交流群，有什么问题都可以在群里交流我们这里最不缺的就是大神
验证信息请填写大写的
L 方可通过
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或CSS & Bootstrap
深入了解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、更快、更强壮的最佳实践。
HTML5文档类型
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
&!DOCTYPE html&
&html lang=&zh-cn&&
移动设备优先
在Bootstrap 2中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。
为了确保适当的绘制和触屏缩放，需要在&head&之中添加viewport元数据标签。
&meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&&
响应式图片
通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height:属性，可以让图片按比例缩放，不超过其父元素的尺寸。
&img src=&...& class=&img-responsive& alt=&Responsive image&&
排版和链接
Bootstrap设置了全局样式，包括显示、排版和链接。尤其是，我们还：
为body标签设置了background-color:
设置了排版的基本属性@font-family-base、@font-size-base和@line-height-base
Set the global link color via @link-color and apply link underlines only on :hover
这些样式可以在scaffolding.less文件中找到。
为了增强跨浏览器表现的一致性，我们使用了，这是由和 维护的一个reset库。
Containers
用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。
注意，由于设置了padding 和 固定宽度，.container不能嵌套。
&div class=&container&&
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的，还有强大的。
栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：
"行（row）"必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
使用"行（row）"在水平方向创建一组"列（column）"。
你的内容应当放置于"列（column）"内，而且，只有"列（column）"可以作为行（row）"的直接子元素。
类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
通过设置padding从而创建"列（column）"之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。
通过研究案例，可以将这些原理应用到你的代码中。
在栅格系统中，我们在LESS文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-md-min) { ... }
@media (min-width: @screen-lg-min) { ... }
We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。
超小屏幕设备 手机 (&768px)
小屏幕设备 平板 (&768px)
中等屏幕设备 桌面 (&992px)
大屏幕设备 桌面 (&1200px)
栅格系统行为
总是水平排列
开始是堆叠在一起的，超过这些阈值将变为水平排列
最大.container宽度
None (自动)
30px (每列左右均有15px)
偏移（Offsets）
栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。因此，对任何一个元素应用任何.col-md- class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备（如果没有设置.col-lg- class的话）。
案例：从堆叠到水平排列
使用单一的一组.col-md-*栅格class，你就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。将列(col-*-*)放置于任何.row内即可。
&div class=&row&&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&row&&
&div class=&col-md-8&&.col-md-8&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&row&&
&div class=&col-md-6&&.col-md-6&/div&
&div class=&col-md-6&&.col-md-6&/div&
案例：移动设备和桌面
是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的class吧，即.col-xs-*、.col-md-*。请看下面的案例。
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
&!-- Stack the columns on mobile by making one full-width and the other half-width --&
&div class=&row&&
&div class=&col-xs-12 col-md-8&&.col-xs-12 .col-md-8&/div&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&
&div class=&row&&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&!-- Columns are always 50% wide, on mobile and desktop --&
&div class=&row&&
&div class=&col-xs-6&&.col-xs-6&/div&
&div class=&col-xs-6&&.col-xs-6&/div&
案例：手机、平板和桌面
在上面案例的基础上，通过使用.col-sm-* classe我们来创建更加动态和强大的布局吧。
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
&div class=&row&&
&div class=&col-xs-12 col-sm-6 col-md-8&&.col-xs-12 .col-sm-6 .col-md-8&/div&
&div class=&col-xs-6 col-md-4&&.col-xs-6 .col-md-4&/div&
&div class=&row&&
&div class=&col-xs-6 col-sm-4&&.col-xs-6 .col-sm-4&/div&
&div class=&col-xs-6 col-sm-4&&.col-xs-6 .col-sm-4&/div&
&!-- Optional: clear the XS cols if their content doesn't match in height --&
&div class=&clearfix visible-xs&&&/div&
&div class=&col-xs-6 col-sm-4&&.col-xs-6 .col-sm-4&/div&
Responsive column resets
即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用.clearfix和。
.col-xs-6 .col-sm-3
通过调整浏览器的宽度或在手机上即可查看这些案例的实际效果。
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
&div class=&row&&
&div class=&col-xs-6 col-sm-3&&.col-xs-6 .col-sm-3&/div&
&div class=&col-xs-6 col-sm-3&&.col-xs-6 .col-sm-3&/div&
&!-- Add the extra clearfix for only the required viewport --&
&div class=&clearfix visible-xs&&&/div&
&div class=&col-xs-6 col-sm-3&&.col-xs-6 .col-sm-3&/div&
&div class=&col-xs-6 col-sm-3&&.col-xs-6 .col-sm-3&/div&
In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier. See this in action in .
&div class=&row&&
&div class=&col-sm-5 col-md-6&&.col-sm-5 .col-md-6&/div&
&div class=&col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0&&.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0&/div&
&div class=&row&&
&div class=&col-sm-6 col-md-5 col-lg-6&&.col-sm-6 .col-md-5 .col-lg-6&/div&
&div class=&col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0&&.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0&/div&
使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4 col-md-offset-4&&.col-md-4 .col-md-offset-4&/div&
&div class=&row&&
&div class=&col-md-3 col-md-offset-3&&.col-md-3 .col-md-offset-3&/div&
&div class=&col-md-3 col-md-offset-3&&.col-md-3 .col-md-offset-3&/div&
&div class=&row&&
&div class=&col-md-6 col-md-offset-3&&.col-md-6 .col-md-offset-3&/div&
为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。
Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6
&div class=&row&&
&div class=&col-md-9&&
Level 1: .col-md-9
&div class=&row&&
&div class=&col-md-6&&
Level 2: .col-md-6
&div class=&col-md-6&&
Level 2: .col-md-6
通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
&div class=&row&&
&div class=&col-md-9 col-md-push-3&&.col-md-9 .col-md-push-3&/div&
&div class=&col-md-3 col-md-pull-9&&.col-md-3 .col-md-pull-9&/div&
LESS mixin和变量
在快速布局之外，Bootstrap包含了一组LESS变量和mixin用于快速生成你自己的语义化栅格布局。
通过变量来定义列数、槽宽、媒体查询阈值。我们使用这些变量生成预定义的栅格class，如上所示，还有如下所示的定制mixin。
@grid-columns:
@grid-gutter-width:
@grid-float-breakpoint:
Mixin用来和栅格变量一同使用生成栅格中纵列的定义。
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left:
(@gutter / -2);
margin-right: (@gutter / -2);
// Negative margin nested rows out to align the content of columns
margin-left:
(@gutter / -2);
margin-right: (@gutter / -2);
// Generate the extra small columns
.make-xs-column(@ @gutter: @grid-gutter-width) {
// Prevent columns from collapsing when empty
min-height: 1
// Inner gutter via padding
padding-left:
(@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
width: percentage((@columns / @grid-columns));
// Generate the small columns
.make-sm-column(@ @gutter: @grid-gutter-width) {
// Prevent columns from collapsing when empty
min-height: 1
// Inner gutter via padding
padding-left:
(@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
width: percentage((@columns / @grid-columns));
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
// Generate the medium columns
.make-md-column(@ @gutter: @grid-gutter-width) {
// Prevent columns from collapsing when empty
min-height: 1
// Inner gutter via padding
padding-left:
(@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
width: percentage((@columns / @grid-columns));
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
// Generate the large columns
.make-lg-column(@ @gutter: @grid-gutter-width) {
// Prevent columns from collapsing when empty
min-height: 1
// Inner gutter via padding
padding-left:
(@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
width: percentage((@columns / @grid-columns));
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
你还可以重新修改这些变量的值，或者用默认值调用这些mixin。下面就是一个利用默认设置生成两列布局的案例。
.wrapper {
.make-row();
.content-main {
.make-lg-column(8);
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
&div class=&wrapper&&
&div class=&content-main&&...&/div&
&div class=&content-secondary&&...&/div&
HTML中的所有标题标签，从&h1& 到 &h6& 均可用。另外，还提供了.h1 到.h6 class，为的是给inline属性的文本赋予标题的样式。
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
&h1&h1. Bootstrap heading&/h1&
&h2&h2. Bootstrap heading&/h2&
&h3&h3. Bootstrap heading&/h3&
&h4&h4. Bootstrap heading&/h4&
&h5&h5. Bootstrap heading&/h5&
&h6&h6. Bootstrap heading&/h6&
在标题内还可以包含&small&标签或.small元素，可以用来标记副标题。
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
&h1&h1. Bootstrap heading &small&Secondary text&/small&&/h1&
&h2&h2. Bootstrap heading &small&Secondary text&/small&&/h2&
&h3&h3. Bootstrap heading &small&Secondary text&/small&&/h3&
&h4&h4. Bootstrap heading &small&Secondary text&/small&&/h4&
&h5&h5. Bootstrap heading &small&Secondary text&/small&&/h5&
&h6&h6. Bootstrap heading &small&Secondary text&/small&&/h6&
Bootstrap将全局font-size设置为14px，line-height为1.428。这些属性直接赋给&body&和所有段落元素。另外，&p&（段落）还被设置了等于1/2行高的底部外边距（margin）（即10px）。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
&p&...&/p&
Lead body copy
通过添加.lead可以让段落突出显示。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
&p class=&lead&&...&/p&
使用Less工具构建
variables.less文件中定义的两个LESS变量决定了排版尺寸: @font-size-base 和 @line-height-base。第一个变量定义了全局font-size基准，第二个变量是line-height基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的margin、 padding和line-height。自定义这些变量即可改变Bootstrap的默认样式。
直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。
对于不需要强调的inline或block类型的文本，使用&small&标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的&small&元素被设置不同的font-size。
你还可以为行内元素赋予.small以代替任何&small&标签。
This line of text is meant to be treated as fine print.
&small&This line of text is meant to be treated as fine print.&/small&
通过增加font-weight强调一段文本。
下面的这段文本进行了着重处理。
&strong&rendered as bold text&/strong&
用斜体强调一段文本。
下面的这段文本就是通过斜体进行强调的。
&em&rendered as italicized text&/em&
通过文本对齐class，可以简单方便的将文字重新对齐。
Left aligned text.
Center aligned text.
Right aligned text.
&p class=&text-left&&Left aligned text.&/p&
&p class=&text-center&&Center aligned text.&/p&
&p class=&text-right&&Right aligned text.&/p&
这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
&p class=&text-muted&&...&/p&
&p class=&text-primary&&...&/p&
&p class=&text-success&&...&/p&
&p class=&text-info&&...&/p&
&p class=&text-warning&&...&/p&
&p class=&text-danger&&...&/p&
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的&abbr&元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有"问号"的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
基本缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
An abbreviation of the word attribute is attr.
&abbr title=&attribute&&attr&/abbr&
Initialism
为缩略语添加.initialism可以将其font-size设置的更小些。
HTML is the best thing since sliced bread.
&abbr title=&HyperText Markup Language& class=&initialism&&HTML&/abbr&
让联系信息以最接近日常使用的格式呈现。在每行结尾添加&br&可以保留需要的样式。
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
&strong&Twitter, Inc.&/strong&&br&
795 Folsom Ave, Suite 600&br&
San Francisco, CA 94107&br&
&abbr title=&Phone&&P:&/abbr& (123) 456-7890
&/address&
&strong&Full Name&/strong&&br&
&a href=&mailto:#&&first.&/a&
&/address&
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在&blockquote&之中即可表现为引用。对于直接引用，我们建议用&p&标签。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
&blockquote&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&/p&
&/blockquote&
对于标准样式的&blockquote&，可以通过几个简单的变体就能改变风格和内容。
添加&small&标签或.small class 来注明引用来源。来源名称可以放在&cite&标签里面。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
&blockquote&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&/p&
&small&Someone famous in &cite title=&Source Title&&Source Title&/cite&&/small&
&/blockquote&
另一种展示风格
使用.pull-right可以让引用展现出向右侧移动、对齐的效果。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
&blockquote class=&pull-right&&
&/blockquote&
顺序无关紧要的一列元素。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
&li&...&/li&
顺序至关重要的一组元素。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
&li&...&/li&
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
&ul class=&list-unstyled&&
&li&...&/li&
通过设置display: inline-并添加少量的内补，将所有元素放置于同一列。
Lorem ipsum
Phasellus iaculis
Nulla volutpat
&ul class=&list-inline&&
&li&...&/li&
带有描述的短语列表。
Description lists
A description list is perfect for defining terms.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
&dt&...&/dt&
&dd&...&/dd&
水平排列的描述
.dl-horizontal可以让&dl&内短语及其描述排在一行。开始是像&dl&默认样式堆叠在一起，随着导航条逐渐展开而排列在一样。
Description lists
A description list is perfect for defining terms.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
&dl class=&dl-horizontal&&
&dt&...&/dt&
&dd&...&/dd&
在正文中通过&code&标签包裹内联样式的代码片段。
For example, §ion& should be wrapped as inline.
For example, &code&§ion&&/code& should be wrapped as inline.
基本代码块
多行代码可以使用&pre&标签。为了正确的展示代码，注意将尖括号做转义处理。
&p&Sample text here...&/p&
&pre&&p&Sample text here...&/p&&/pre&
还可以使用.pre-scrollable class，其作用是设置max-height为350px，并在垂直方向展示滚动条。
为任意&table&标签添加.table可以为其赋予基本的样式&少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。
First Name
&table class=&table&&
条纹状表格
利用.table-striped可以给&tbody&之内的每一样增加斑马条纹样式。
跨浏览器兼容性
条纹状表格是通过:nth-child CSS选择器实现的，而这一功能不被Internet Explorer 8支持。
First Name
&table class=&table table-striped&&
带边框的表格
利用.table-bordered为表格和其中的每个单元格增加边框。
First Name
@TwBootstrap
Larry the Bird
&table class=&table table-bordered&&
利用.table-hover可以让&tbody&中的每一行响应鼠标悬停状态。
First Name
Larry the Bird
&table class=&table table-hover&&
利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。
First Name
Larry the Bird
&table class=&table table-condensed&&
通过这些状态class可以为行货单元格设置颜色。
鼠标悬停在行或单元格上时所设置的颜色
标识成功或积极的动作
标识警告或需要用户注意
标识危险或潜在的带来负面影响的动作
Column heading
Column heading
Column heading
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
Column content
&!-- On rows --&
&tr class=&active&&...&/tr&
&tr class=&success&&...&/tr&
&tr class=&warning&&...&/tr&
&tr class=&danger&&...&/tr&
&!-- On cells (`td` or `th`) --&
&td class=&active&&...&/td&
&td class=&success&&...&/td&
&td class=&warning&&...&/td&
&td class=&danger&&...&/td&
响应式表格
将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
&div class=&table-responsive&&
&table class=&table&&
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的&input&、&textarea&和&select&元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。
Email address
File input
Example block-level help text here.
Check me out
&form role=&form&&
&div class=&form-group&&
&label for=&exampleInputEmail1&&Email address&/label&
&input type=&email& class=&form-control& id=&exampleInputEmail1& placeholder=&Enter email&&
&div class=&form-group&&
&label for=&exampleInputPassword1&&Password&/label&
&input type=&password& class=&form-control& id=&exampleInputPassword1& placeholder=&Password&&
&div class=&form-group&&
&label for=&exampleInputFile&&File input&/label&
&input type=&file& id=&exampleInputFile&&
&p class=&help-block&&Example block-level help text here.&/p&
&div class=&checkbox&&
&input type=&checkbox&& Check me out
&button type=&submit& class=&btn btn-default&&Submit&/button&
为&form&元素.form-inline可使其内容左对齐并且表现为inline-block级别的控件。只适用于浏览器窗口至少在 768px 宽度时（窗口宽度再小的话就会使表单折叠）。
需要设置宽度
在Bootstrap中，input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。
一定要设置label
如果你没有为每个输入控件设置label，屏幕阅读器将无法正确识读。对于这些内联表单，你可以通过为label设置.sr-only已将其隐藏。
Email address
Remember me
&form class=&form-inline& role=&form&&
&div class=&form-group&&
&label class=&sr-only& for=&exampleInputEmail2&&Email address&/label&
&input type=&email& class=&form-control& id=&exampleInputEmail2& placeholder=&Enter email&&
&div class=&form-group&&
&label class=&sr-only& for=&exampleInputPassword2&&Password&/label&
&input type=&password& class=&form-control& id=&exampleInputPassword2& placeholder=&Password&&
&div class=&checkbox&&
&input type=&checkbox&& Remember me
&button type=&submit& class=&btn btn-default&&Sign in&/button&
水平排列的表单
通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。
Remember me
&form class=&form-horizontal& role=&form&&
&div class=&form-group&&
&label for=&inputEmail3& class=&col-sm-2 control-label&&Email&/label&
&div class=&col-sm-10&&
&input type=&email& class=&form-control& id=&inputEmail3& placeholder=&Email&&
&div class=&form-group&&
&label for=&inputPassword3& class=&col-sm-2 control-label&&Password&/label&
&div class=&col-sm-10&&
&input type=&password& class=&form-control& id=&inputPassword3& placeholder=&Password&&
&div class=&form-group&&
&div class=&col-sm-offset-2 col-sm-10&&
&div class=&checkbox&&
&input type=&checkbox&& Remember me
&div class=&form-group&&
&div class=&col-sm-offset-2 col-sm-10&&
&button type=&submit& class=&btn btn-default&&Sign in&/button&
被支持的控件
在表单布局案例中展示了其所支持的标准表单控件。
大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。
必须添加类型声明
只有正确设置了type的input控件才能被赋予正确的样式。
&input type=&text& class=&form-control& placeholder=&Text input&&
支持多行文本的表单控件。可根据需要改变rows属性。
&textarea class=&form-control& rows=&3&&&/textarea&
Checkbox 和 radio
Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。
默认外观(堆叠在一起)
Option one is this and that&be sure to include why it's great
Option one is this and that&be sure to include why it's great
Option two can be something else and selecting it will deselect option one
&div class=&checkbox&&
&input type=&checkbox& value=&&&
Option one is this and that&be sure to include why it's great
&div class=&radio&&
&input type=&radio& name=&optionsRadios& id=&optionsRadios1& value=&option1& checked&
Option one is this and that&be sure to include why it's great
&div class=&radio&&
&input type=&radio& name=&optionsRadios& id=&optionsRadios2& value=&option2&&
Option two can be something else and selecting it will deselect option one
Inline checkboxes
通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行。
&label class=&checkbox-inline&&
&input type=&checkbox& id=&inlineCheckbox1& value=&option1&& 1
&label class=&checkbox-inline&&
&input type=&checkbox& id=&inlineCheckbox2& value=&option2&& 2
&label class=&checkbox-inline&&
&input type=&checkbox& id=&inlineCheckbox3& value=&option3&& 3
使用默认选项或添加multiple属性可以显示多个选项。
&select class=&form-control&&
&option&1&/option&
&option&2&/option&
&option&3&/option&
&option&4&/option&
&option&5&/option&
&select multiple class=&form-control&&
&option&1&/option&
&option&2&/option&
&option&3&/option&
&option&4&/option&
&option&5&/option&
在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为&p&元素添加.form-control-static即可。
&form class=&form-horizontal& role=&form&&
&div class=&form-group&&
&label class=&col-sm-2 control-label&&Email&/label&
&div class=&col-sm-10&&
&p class=&form-control-static&&&/p&
&div class=&form-group&&
&label for=&inputPassword& class=&col-sm-2 control-label&&Password&/label&
&div class=&col-sm-10&&
&input type=&password& class=&form-control& id=&inputPassword& placeholder=&Password&&
通过为控件和label设置一些基本状态，可以为用户提供回馈。
我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。
&input class=&form-control& id=&focusedInput& type=&text& value=&This is focused...&&
被禁用的输入框
为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观。
&input class=&form-control& id=&disabledInput& type=&text& placeholder=&Disabled input here...& disabled&
被禁用的fieldset
为&fieldset&设置disabled属性可以禁用&fieldset&中包含的所有控件。
&a&标签的链接功能不受影响
这个class只改变&a class="btn btn-default"&按钮的外观，并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。
跨浏览器兼容性
虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的&fieldset&并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset
Disabled input
Disabled select menu
Disabled select
Can't check this
&form role=&form&&
&fieldset disabled&
&div class=&form-group&&
&label for=&disabledTextInput&&Disabled input&/label&
&input type=&text& id=&disabledTextInput& class=&form-control& placeholder=&Disabled input&&
&div class=&form-group&&
&label for=&disabledSelect&&Disabled select menu&/label&
&select id=&disabledSelect& class=&form-control&&
&option&Disabled select&/option&
&div class=&checkbox&&
&input type=&checkbox&& Can't check this
&button type=&submit& class=&btn btn-primary&&Submit&/button&
&/fieldset&
Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。
Input with success
Input with warning
Input with error
&div class=&form-group has-success&&
&label class=&control-label& for=&inputSuccess&&Input with success&/label&
&input type=&text& class=&form-control& id=&inputSuccess&&
&div class=&form-group has-warning&&
&label class=&control-label& for=&inputWarning&&Input with warning&/label&
&input type=&text& class=&form-control& id=&inputWarning&&
&div class=&form-group has-error&&
&label class=&control-label& for=&inputError&&Input with error&/label&
&input type=&text& class=&form-control& id=&inputError&&
通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。
创建大一些或小一些的表单控件以匹配按钮尺寸。
Default select
&input class=&form-control input-lg& type=&text& placeholder=&.input-lg&&
&input class=&form-control& type=&text& placeholder=&Default input&&
&input class=&form-control input-sm& type=&text& placeholder=&.input-sm&&
&select class=&form-control input-lg&&...&/select&
&select class=&form-control&&...&/select&
&select class=&form-control input-sm&&...&/select&
调整列尺寸
用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。
&div class=&row&&
&div class=&col-xs-2&&
&input type=&text& class=&form-control& placeholder=&.col-xs-2&&
&div class=&col-xs-3&&
&input type=&text& class=&form-control& placeholder=&.col-xs-3&&
&div class=&col-xs-4&&
&input type=&text& class=&form-control& placeholder=&.col-xs-4&&
用于表单控件的块级帮助文本。
自己独占一行或多行的块级帮助文本。
&span class=&help-block&&自己独占一行或多行的块级帮助文本。&/span&
使用下面列出的class可以快速创建一个带有样式的按钮。
&!-- Standard button --&
&button type=&button& class=&btn btn-default&&Default&/button&
&!-- Provides extra visual weight and identifies the primary action in a set of buttons --&
&button type=&button& class=&btn btn-primary&&Primary&/button&
&!-- Indicates a successful or positive action --&
&button type=&button& class=&btn btn-success&&Success&/button&
&!-- Contextual button for informational alert messages --&
&button type=&button& class=&btn btn-info&&Info&/button&
&!-- Indicates caution should be taken with this action --&
&button type=&button& class=&btn btn-warning&&Warning&/button&
&!-- Indicates a dangerous or potentially negative action --&
&button type=&button& class=&btn btn-danger&&Danger&/button&
&!-- Deemphasize a button by making it look like a link while maintaining button behavior --&
&button type=&button& class=&btn btn-link&&Link&/button&
需要让按钮具有不同尺寸吗？使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。
Large button
Large button
Default button
Default button
Small button
Small button
Extra small button
Extra small button
&button type=&button& class=&btn btn-primary btn-lg&&Large button&/button&
&button type=&button& class=&btn btn-default btn-lg&&Large button&/button&
&button type=&button& class=&btn btn-primary&&Default button&/button&
&button type=&button& class=&btn btn-default&&Default button&/button&
&button type=&button& class=&btn btn-primary btn-sm&&Small button&/button&
&button type=&button& class=&btn btn-default btn-sm&&Small button&/button&
&button type=&button& class=&btn btn-primary btn-xs&&Extra small button&/button&
&button type=&button& class=&btn btn-default btn-xs&&Extra small button&/button&
通过给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素。
此按钮为块级元素
此按钮为块级元素
&button type=&button& class=&btn btn-primary btn-lg btn-block&&Block level button&/button&
&button type=&button& class=&btn btn-default btn-lg btn-block&&Block level button&/button&
当按钮处于活动状态时，其表现为被按压下（底色更深，边框夜色更深，内置阴影）。对于&button&元素，是通过:active实现的。对于&a&元素，是通过.active实现的。然而，你还可以联合使用.active &button&并通过编程的方式使其处于活动状态。
由于:active是伪状态，因此 无需添加，但是在需要表现出同样外观的时候可以添加.active。
Primary button
&button type=&button& class=&btn btn-primary btn-lg active&&Primary button&/button&
&button type=&button& class=&btn btn-default btn-lg active&&Button&/button&
可以为&a&添加.active class。
&a href=&#& class=&btn btn-primary btn-lg active& role=&button&&Primary link&/a&
&a href=&#& class=&btn btn-default btn-lg active& role=&button&&Link&/a&
通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
为&button&添加disabled属性。
Primary button
&button type=&button& class=&btn btn-lg btn-primary& disabled=&disabled&&Primary button&/button&
&button type=&button& class=&btn btn-default btn-lg& disabled=&disabled&&Button&/button&
跨浏览器的兼容性
如果为&button&添加disabled属性，Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前还没有办法解决。
为&a&添加.disabled class。
&a href=&#& class=&btn btn-primary btn-lg disabled& role=&button&&Primary link&/a&
&a href=&#& class=&btn btn-default btn-lg disabled& role=&button&&Link&/a&
我们把.disabled作为工具class使用，就像.active class一样，因此不需要增加前缀。
链接功能不受影响
上面提到的class只是改变&a&的外观，不影响功能。在此文档中，我们通过JavaScript代码禁用了链接的默认功能。
Context-specific usage
While button classes can be used on &a& and &button& elements, only &button& elements are supported within our nav and navbar components.
可以为&a&、&button&或&input&元素添加按钮class。
&a class=&btn btn-default& href=&#& role=&button&&Link&/a&
&button class=&btn btn-default& type=&submit&&Button&/button&
&input class=&btn btn-default& type=&button& value=&Input&&
&input class=&btn btn-default& type=&submit& value=&Submit&&
跨浏览器表现
作为最佳实践，我们强烈建议尽可能使用&button&元素以确保跨浏览器的一致性样式。
出去其它原因，这个让我们无法为基于&input&标签的按钮设置line-height，这导致在Firefox上，他们与其它按钮的高度不一致。
为&img&元素增加不同的class，就可以轻松的改变其样式。
跨浏览器兼容性
你要知道，Internet Explorer 8是不支持圆角矩形的。
&img src=&...& alt=&...& class=&img-rounded&&
&img src=&...& alt=&...& class=&img-circle&&
&img src=&...& alt=&...& class=&img-thumbnail&&
响应式图片
想要知道如何让图片具有响应式特性吗？。
通过使用一个象征关闭的图标，可以用来让模式对话框和警告框消失。
&button type=&button& class=&close& aria-hidden=&true&&&&/button&
Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in .
&span class=&caret&&&/span&
快速设置浮动
通过这两个class让页面元素左右浮动。 !important被用来避免某些问题。也可以像mixin一样使用这两个class。
&div class=&pull-left&&...&/div&
&div class=&pull-right&&...&/div&
// Classes
.pull-left {
float: left !
.pull-right {
float: right !
// Usage as mixins
.element {
.pull-left();
.another-element {
.pull-right();
不要用于导航条
如果是用于对齐导航条上的组件，请务必使用.navbar-left 或 .navbar-right。查看以获取详情。
内容区域居中
将页面元素设置为 display: block并通过设置margin使其居中。可以作为mixin或class使用。
&div class=¢er-block&&...&/div&
// 作为classe使用
.center-block {
margin-left:
margin-right:
// 作为mixin使用
.element {
.center-block();
使用.clearfix清除任意页面元素的浮动。我们使用了Nicolas Gallagher的。也可以像mixin一样使用。
&!-- Usage as a class --&
&div class=&clearfix&&...&/div&
// Mixin itself
.clearfix() {
content: " ";
// Usage as a Mixin
.element {
.clearfix();
显示和隐藏内容
通过.show 和 .hidden可以强制显示或隐藏任一页面元素（包括在屏幕阅读器上）。这两个class使用了!important以避免冲突，原因和类似。这两个class只能做用于块级元素，也可以作为mixin使用。
.hide 仍然可以用，但是它不能影响屏幕阅读器，并且从v3.0.1版本开始已将被标记为不建议使用。请使用.hidden 或 .sr-only。
Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.
&div class=&show&&...&/div&
&div class=&hidden&&...&/div&
// Classes
display: block !
display: none !
visibility: hidden !
.invisible {
visibility:
// Usage as mixins
.element {
.another-element {
.hidden();
针对屏幕阅读器的内容
使用.sr-only可以针对除了屏幕阅读器之外的所有设备隐藏一个元素。对于也很有用。此class还可以作为mixin使用。
&a class=&sr-only& href=&#content&&Skip to main content&/a&
// Usage as a Mixin
.skip-navigation {
.sr-only();
使用.text-hide class（也可作为mixin使用）可以将页面元素所包含的文本内容替换为背景图。
&h1 class=&text-hide&&Custom heading&/h1&
// Usage as a Mixin
.heading {
.text-hide();
通过使用这些工具class可以根据屏幕和不同的媒体查询显示或隐藏页面内容，加速针对移动设备的开发。
尝试使用这些class并避免创建同一个网站的不同版本，从而能够完善不同设备上的显示效果。响应式工具目前只是针对块级元素， 不支持inline元素和表格元素。
可用的class
通过单独或联合使用以下列出的class，可以针对不同屏幕尺寸隐藏或显示页面内容。
超小屏幕 手机 (&768px)
小屏幕 平板 (&768px)
中等屏幕 桌面 (&992px)
大屏幕 桌面 (&1200px)
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
和常规的响应式class一样，使用下面的class可以针对打印机隐藏或显示某些内容。
.visible-print
.hidden-print
调整你的浏览器窗口的尺寸或者在不同的设备上加载此页面，均可测试上面提到的工具class。
在...上可见
带有绿色标记的元素表示其在当前浏览器窗口中是可见的。
超小 ✔ Visible on x-small
小 ✔ Visible on small
中等 ✔ Visible on medium
大 ✔ 大屏幕可见
Extra small and small ✔ Visible on x-small and small
Medium and large ✔ Visible on medium and large
Extra small and medium ✔ Visible on x-small and medium
Small and large ✔ Visible on small and large
Extra small and large ✔ Visible on x-small and large
Small and medium ✔ Visible on small and medium
在...上隐藏
带有绿色标记的元素表示其在当前浏览器窗口中是隐藏的。
Extra small ✔ Hidden on x-small
Small ✔ Hidden on small
Medium ✔ Hidden on medium
Large ✔ Hidden on large
Extra small and small ✔ Hidden on x-small and small
Medium and large ✔ Hidden on medium and large
Extra small and medium ✔ Hidden on x-small and medium
Small and large ✔ Hidden on small and large
Extra small and large ✔ Hidden on x-small and large
Small and medium ✔ Hidden on small and medium
400-700-1020}
我要回帖
更多关于 radio改变样式 的文章
更多推荐
- ·求小说蛇妖引力桔梗仙剑1蛇妖洞地图
- ·河南省体育生可以报考哪些大学74 文化398可以进许昌学院不？
- ·撕毁的承诺原唱红蔷薇全部歌曲大全
- ·蔡依林新歌《亲爱的人歌词对象》歌词是什么 《亲爱的人歌词对象》完整版歌词在线听歌
- ·是不是成毅有没有整容呀和袁冰妍流漓2男女主角，如果女主角不是袁冰妍那我们大家不看？
- ·我男神杨洋真的好敬业，上个节目都用自己代言的手机！不过快乐大本营杨洋郑爽期为什么要挡住手机品牌？（我似乎看）
- ·宋昱辰和康九月子宸の屋taobao配吗?
- ·没学过乐器，只会声乐，可以考中国音乐学院声乐考级校吗？
- ·一报还一报策略，是什么生肖
- ·天天电玩城下载外挂
- ·广州市华金盾大酒店那里有金科大酒店
- ·红烧排骨的做法肉的做法
- ·全民突击战队教官吉林市有多少战队
- ·在菜市场市场上做什么生意好好
- ·这个图片孕13周能看出男孩女孩孩吗
- ·李笑来的新生 李笑来大学社群咋样？都有什么用啊？
- ·野鸟如宅是凶是吉
- ·限制24小时不能微信抢红包被封号一天!隔多久抢不会再封号
- ·陆河上护如何过年，过年要过年干什么工作致富，吃什么
- ·h5中怎样改变h5 radio样式的样式
- ·请问澳门美高梅金殿现场娱 乐=?场)现在是不是不行了？急求啊?
- ·在新加坡国家美术馆，怎样可以轻松吃到10个国家的全攻略，看这里哦
- ·知乎文章为什么韩国电影知乎越来越垃圾好，中国电影知乎越来越垃圾差
- ·婚礼新郎接亲的堵门游戏堵门,吃面条或子孙饺的台词
- ·西安骐美商务酒店到丰景佳园户型图怎么走
- ·在水里的土茯苓绿豆汤为什么不要土
- ·LOL我一张嘴说话，保准牛有人说你SB，吓得我只能一句话不说了，有想法自己知道就行了，咋办？
- ·穿越火线之战神荣誉耀苏薇
- ·做茄汁沙丁鱼罐头品牌，用哪个牌子番茄酱比较好？
- ·梦见在踏板车上飞奔快踏房子墙下透光亮
- ·一九八一年正月初一出生娘娘命十八出生的人什么命
- ·dnf2016国庆套装光环光环什么样的
- ·fluent15.0制作动画生成cxa动画之后，是不是可以吧ppm删除掉
- ·西安治尖锐湿的方法优有潜伏期吗?玫伎
- ·请问你有王子变青蛙全集完整版的全集吗？
