Bootstrap3（61）
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .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&
—–下面有个“顶”字，你懂得O(∩_∩)O哈哈~
—–乐于分享，共同进步！
—–更多文章请看：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
本人的博客写的入门性的比较基本的东西，但隔行如隔山，入门实际上是最难的，一旦你入门了，再深入学习提高就简单了。遇到什么问题、想实现个什么功能，只需要搜索一下，百分之九十几的都能解决。所以我写博客的初衷就是将入门做细做精，做到甚至是不会电脑的人也能一看就懂。服务于只学了理论知识没有实战经验的或者已经懂一或两门语言，还想了解其它语言的人群。
最近真是无奈。
世界上最浪费时间的事就是给年轻人讲经验，讲一万句不如你自己摔一跤，眼泪教你做人，后悔帮你成长，疼痛才是最好的老师。人生该走的弯路，其实一米都少不了。
如果博文中有错误或者您不认同的地方，欢迎评论或通过邮箱的方式随时联系我，我们共同讨论，拜谢！
承接java相关的网站 微信公众号 app 爬虫项目 有需要的可以私信我 留下你的联系方式 我看到后与你联系 详细谈项目
访问：149062次
积分：4088
积分：4088
排名：第6532名
原创：235篇
评论：110条bootstrap注意事项（一）
时间： 00:08:16
&&&& 阅读：2904
&&&& 评论：
&&&& 收藏：0
标签：1.移动设备优先
移动设备优先是 Bootstrap 3 的最显著的变化。
在之前的 Bootstrap 版本中（直到 2.x），您需要手动引用另一个 CSS，才能让整个项目友好的支持移动设备。
现在不一样了，Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。
Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加&viewport meta&标签，如下所示：
width&属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为&device-width&可以确保它能正确呈现在不同设备上。
initial-scale=1.0&确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为&viewport meta&标签添加&user-scalable=no&可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0&与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no"
2.响应式图像
&通过添加&img-responsive&class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。
接下来让我们看下这个 class 包含了哪些 css 属性。
在下面的代码中，可以看到img-responsive&class 为图像赋予了 max-width: 100%; 和 height: 属性，可以让图像按比例缩放，不超过其父元素的尺寸。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
这表明相关的图像呈现为&inline-block。当您把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。
设置&height:auto，相关元素的高度取决于浏览器。
设置&max-width&为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
3.布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个&.container&容器。我们提供了两个作此用处的类。注意，由于&padding&等属性的原因，这两种 容器类不能互相嵌套。
.container&类用于固定宽度并支持响应式布局的容器。
.container-fluid&类用于 100% 宽度，占据全部视口（viewport）的容器。
5.栅格系统
用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
&行（row）&必须包含在&.container&（固定宽度）或.container-fluid&（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过&行（row）&在水平方向创建一组&列（column）&。
你的内容应当放置于&列（column）&内，并且，只有&列（column）&可以作为行（row）&的直接子元素。
类似&.row&和&.col-xs-4&这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为&列（column）&设置&padding&属性，从而创建列与列之间的间隔（gutter）。通过为&.row&元素设置负值&margin&从而抵消掉为&.container&元素设置的&padding，也就间接为&行（row）&所包含的&列（column）&抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个&.col-xs-4&来创建。
如果一&行（row）&中包含了的&列（column）&大于 12，多余的&列（column）&所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何&.col-md-&em&&栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何&.col-lg-&不存在， 也影响大屏幕设备。
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/&超小屏幕（手机，小于 768px）&/
/&没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）&/
/&小屏幕（平板，大于等于 768px）&/
@media (min-width: @screen-sm-min) { ... }
/&中等屏幕（桌面显示器，大于等于 992px）&/
@media (min-width: @screen-md-min) { ... }
/&大屏幕（大桌面显示器，大于等于 1200px）&/
@media (min-width: @screen-lg-min) { ... }
我们偶尔也会在媒体查询代码中包含&max-width&从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@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) { ... ｝
7.栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
&超小屏幕手机 (&768px)小屏幕&平板 (&768px)中等屏幕&桌面显示器 (&992px)大屏幕&大桌面显示器 (&1200px)
栅格系统行为
总是水平排列
开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container最大宽度
None （自动）
列（column）数
最大列（column）宽
槽（gutter）宽
30px （每列左右均有 15px）
偏移（Offsets）
8.移动设备和桌面屏幕
是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即&.col-xs-&em&&和&.col-md-。请看下面的实例，研究一下这些是如何工作的。
&!-- Stack the columns on mobile by making one full-width and the other half-width --&
&!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&
&!-- Columns are always 50% wide, on mobile and desktop --&
9.手机、平板、桌面
在上面案例的基础上，通过使用针对平板设备的&.col-sm-*&类，我们来创建更加动态和强大的布局吧。
&div class="row"
&!-- Optional: clear the XS cols if their content doesn‘t match in height --&
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的&.row元素和一系列&.col-sm-&em&&元素到已经存在的&.col-sm-&元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
通过使用&.col-md-push-* 和 .col-md-pull-*&类就可以很容易的改变列（column）的顺序，其中&*&范围是从&1&到&11&。
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！Bootstrap 教程
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过
添加可选的 JavaScript 单选框和复选框样式行为。
下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：
Class描述代码示例
.btn-group该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
&div class="btn-group"&
&button type="button" class="btn btn-default"&Button1&/button&
&button type="button" class="btn btn-default"&Button2&/button&
.btn-toolbar该 class 有助于把几组 &div class="btn-group"& 结合到一个 &div class="btn-toolbar"& 中，一般获得更复杂的组件。
&div class="btn-toolbar" role="toolbar"&
&div class="btn-group"&...&/div&
&div class="btn-group"&...&/div&
.btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
&div class="btn-group btn-group-lg"&...&/div&
&div class="btn-group btn-group-sm"&...&/div&
&div class="btn-group btn-group-xs"&...&/div&
.btn-group-vertical该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。
&div class="btn-group-vertical"&
基本的按钮组
下面的实例演示了上面表格中讨论到的 class .btn-group 的使用：
&div class=&btn-group&&
&button type=&button& class=&btn btn-default&&按钮 1&/button&
&button type=&button& class=&btn btn-default&&按钮 2&/button&
&button type=&button& class=&btn btn-default&&按钮 3&/button&
结果如下所示：
按钮工具栏
下面的实例演示了上面表格中讨论到的 class .btn-toolbar 的使用：
&div class=&btn-toolbar& role=&toolbar&&
&div class=&btn-group&&
&button type=&button& class=&btn btn-default&&按钮 1&/button&
&button type=&button& class=&btn btn-default&&按钮 2&/button&
&button type=&button& class=&btn btn-default&&按钮 3&/button&
&div class=&btn-group&&
&button type=&button& class=&btn btn-default&&按钮 4&/button&
&button type=&button& class=&btn btn-default&&按钮 5&/button&
&button type=&button& class=&btn btn-default&&按钮 6&/button&
&div class=&btn-group&&
&button type=&button& class=&btn btn-default&&按钮 7&/button&
&button type=&button& class=&btn btn-default&&按钮 8&/button&
&button type=&button& class=&btn btn-default&&按钮 9&/button&
结果如下所示：
按钮的大小
下面的实例演示了上面表格中讨论到的 class .btn-group-* 的使用：
&div class=&btn-group btn-group-lg&&
&button type=&button& class=&btn btn-default&&按钮 1&/button&
&button type=&button& class=&btn btn-default&&按钮 2&/button&
&button type=&button& class=&btn btn-default&&按钮 3&/button&
&div class=&btn-group btn-group-sm&&
&button type=&button& class=&btn btn-default&&按钮 4&/button&
&button type=&button& class=&btn btn-default&&按钮 5&/button&
&button type=&button& class=&btn btn-default&&按钮 6&/button&
&div class=&btn-group btn-group-xs&&
&button type=&button& class=&btn btn-default&&按钮 7&/button&
&button type=&button& class=&btn btn-default&&按钮 8&/button&
&button type=&button& class=&btn btn-default&&按钮 9&/button&
结果如下所示：
您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。当您向让下拉菜单与一系列按钮组合使用时，就会用到这个。
&div class=&btn-group&&
&button type=&button& class=&btn btn-default&&按钮 1&/button&
&button type=&button& class=&btn btn-default&&按钮 2&/button&
&div class=&btn-group&&
&button type=&button& class=&btn btn-default dropdown-toggle& data-toggle=&dropdown&&
&span class=&caret&&&/span&
&ul class=&dropdown-menu&&
&li&&a href=&#&&下拉链接 1&/a&&/li&
&li&&a href=&#&&下拉链接 2&/a&&/li&
结果如下所示：
垂直的按钮组
下面的实例演示了上面表格中讨论到的 class .btn-group-vertical 的使用：
&div class=&btn-group-vertical&&
&button type=&button& class=&btn btn-default&&按钮 1&/button&
&button type=&button& class=&btn btn-default&&按钮 2&/button&
&div class=&btn-group-vertical&&
&button type=&button& class=&btn btn-default dropdown-toggle& data-toggle=&dropdown&&
&span class=&caret&&&/span&
&ul class=&dropdown-menu&&
&li&&a href=&#&&下拉链接 1&/a&&/li&
&li&&a href=&#&&下拉链接 2&/a&&/li&
结果如下所示：
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码Bootstrap（17）
本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容：
&单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的&input&、&textarea&和&select&元素都将被默认设置为width:
100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。
&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&
& & & &两个文本框的宽度的确为100%。并且有三个form-group。
&为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。
需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。
一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。
&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了。
&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属性。
&h1&textarea&/h1&
&textarea class=&form-control& rows=&3&&&/textarea&
Checkbox 和 radio
Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。
默认外观(堆叠在一起)
&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
同理Radio是一样的，只需要添加一下样式即可。
&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
&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都将接受这些校验状态的样式。
&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可以为控件设置宽度。
创建大一些或小一些的表单控件以匹配按钮尺寸。
&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&
&本篇文章主要讲解表单中各种控件的样式控制。其中也有看到按钮的简单样式使用，下一篇文章将重点来讲解按钮的样式。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：177880次
积分：4222
积分：4222
排名：第6205名
原创：246篇
转载：19篇
评论：12条
(24)(1)(1)(1)(2)(36)(28)(47)(66)(67)