《bootstrap中经常遇到的问题.docx》由会员分享，可在线阅读，更多相关《bootstrap中经常遇到的问题.docx（8页珍藏版）》请在金锄头文库上搜索。
1、Bootstrap1布局容器Bootstrap 需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种 容器类不能互相嵌套。.container类用于固定宽度并支持响应式布局的容器。. . . .container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。. . . 2表单所有设置了.form-control类的、和元素都将被默认设置宽度属性为width: 100%;。 将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。 Email address Pas
2、sword File input Example block-level help text here. Check me out Submit3图片为图片赋予了max-width: 100%;和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸设置height:auto，相关元素的高度取决于浏览器。设置max-width为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。在 Bootstrap 版本 3 中，通过为图片添加.img-responsive类可以让图片支持响应式布局。其实质是为图片设置了max-width: 100%
3、;、height: auto;和display: block;属性，从而让图片在其父元素中更好的缩放。如果需要让使用了.img-responsive类的图片水平居中，请使用.center-block类，不要用.text-center。请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。4.栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下Bootstrap 栅格系统的工作原理： “行（row）”必须包含在.container（固定宽度）或.container-fluid（100% 宽
4、度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 通过“行（row）”在水平方向创建一组“列（column）”。 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 通过为“列（column）”设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就
5、间接为“行（row）”所包含的“列（column）”抵消掉了padding。 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对
6、小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-lg-不存在， 也影响大屏幕设备。1）嵌套列 Level 1: .col-sm-9 Level 2: .col-xs-8 .col-sm-6 Level 2: .col-xs-4 .col-sm-6 2）.栅格参数通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。超小屏幕手机 (768px)小屏幕平板 (768px)中等屏幕桌面显示器 (992px)大屏幕大桌面显示器 (1200px)栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C.container最大宽度None （自动）750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列（column）数12最大列（column）宽自动62px81px97px槽（gutter）宽30px （每列左右均有 15px）可嵌套是偏移（Offsets）是列排序是3）.列排序通过使用.col-md-push-* 和 .col-md-pull-*类就可以很容易的改变列（column）的顺序，其中*范围是从1到11。. . .col-md-9 .col-md-push-3. .col-md-3 .col-md-pull-9.
