bootstrap中经常遇到的问题.docxVIP

Bootstrap1布局容器Bootstrap 需要为页面内容和栅格系统包裹一个?.container?容器。我们提供了两个作此用处的类。注意，由于?padding?等属性的原因，这两种 容器类不能互相嵌套。.container?类用于固定宽度并支持响应式布局的容器。div?class=container.../div.container-fluid?类用于?100% 宽度，占据全部视口（viewport）的容器。div?class=container-fluid.../div?2表单所有设置了?.form-control?类的input、textarea?和?select?元素都将被默认设置宽度属性为?width: 100%;。 将?label元素和前面提到的控件包裹在?.form-group?中可以获得最好的排列。formdivclass=form-grouplabelfor=exampleInputEmail1Email address/labelinputtype=emailclass=form-controlid=exampleInputEmail1placeholder=Email/divdivclass=form-grouplabelfor=exampleInputPassword1Password/labelinputtype=passwordclass=form-controlid=exampleInputPassword1placeholder=Password/divdivclass=form-grouplabelfor=exampleInputFileFile input/labelinputtype=fileid=exampleInputFilepclass=help-blockExample block-level help text here./p/divdivclass=checkboxlabelinputtype=checkbox Check me out/label/divbuttontype=submitclass=btn btn-defaultSubmit/button/form3图片为图片赋予了max-width: 100%;和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸设置?height:auto，相关元素的高度取决于浏览器。设置?max-width?为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。imgsrc=...class=img-responsivealt=Responsive image在 Bootstrap 版本 3 中，通过为图片添加?.img-responsive?类可以让图片支持响应式布局。其实质是为图片设置了?max-width: 100%;、?height: auto;?和?display: block;?属性，从而让图片在其父元素中更好的缩放。如果需要让使用了?.img-responsive?类的图片水平居中，请使用?.center-block?类，不要用.text-center。请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。imgsrc=...alt=...class=img-roundedimgsrc=...alt=...class=img-circleimgsrc=...alt=...class=img-thumbnail4.栅格系统用于通过一系列的行（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就是下面的示例为什么是向外突出的原因。在