搜索
Bootstrap移动设备优先。所有列默认都是左浮动为确保适当的绘制和触屏缩放，加入下面的meta标签metaname=viewportcontent=width=device-width,initial-scale=1布局容器Bootstrap需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套。.container类用于固定宽度并支持响应式布局的容器。divclass=container/div.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。divclass=container-fluid/div媒体查询在栅格系统中，我们在Less文件中使用以下媒体查询（mediaquery）来创建关键的分界点阈值。/*超小屏幕（手机，小于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){...}栅格参数针对超小屏幕和中等屏幕设备所定义的类吧，即.col-xs-*和.col-md-*。divclass=”.col-xs-12.col-md-8”/div宽度相同比例3:2针对平板用.col-sm-*.col-xs-12.col-sm-6.col-md-8宽度相同6:3:4偏移.col-md-offset-3【实际上是为当前元素增加左边距margin，使元素向右偏移N个column】列排序通过使用.col-md-push-*【推】和.col-md-pull-*【拉】类可以改变列（column）的顺序。Lessmixin和变量自定义样式，列宽、间距等，有意义的布局页面主体Bootstrap将全局font-size设置为14px，line-height设置为1.428。这些属性直接赋予body元素和所有段落元素。另外，p（段落）元素还被设置了等于1/2行高（即10px）的底部外边距（margin）。中心内容通过添加.lead类可以让段落突出显示。使用Less工具构建variables.less文件中定义的两个Less变量决定了排版尺寸：@font-size-base和@line-height-base。第一个变量定义了全局font-size基准，第二个变量是line-height基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的margin、padding和line-height。自定义这些变量即可改变Bootstrap的默认样式。文本对齐类文本大小写缩略语abbrtitle=”454545”缩略词/abbr鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上,但需要包含title属性。为缩略语添加.initialism类，可以让font-size变得稍微小些。abbrtitle=”这里是缩略词的解释”class=”initialism”缩略词/abbr引用blockquoteclass=”blockquote-reverse”/blockquote表单单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的input、textarea和select元素都将被默认设置宽度属性为width:100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。为form元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口（viewport）至少在768px宽度时（视口宽度再小的话就会使表单折叠）。一定要添加label标签如果你没有为每个输入控件设置label标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label设置.sr-only类将其隐藏。通过为表单添加.form-horizontal类，并联合使用Bootstrap预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。此时的.form-group就相当于.row通过.input-lg类似的类可以为控件设置高度，通过.col-lg-*类似的类可以为控件设置宽度。图片在Bootstrap版本3中，通过为图片添加.img-responsive类可以让图片支持响应式布局。其实质是为图片设置了max-width:100%;和height:auto;属性，从而让图片在其父元素中更好的缩放。SVG图像和IE8-10在InternetExplorer8-10中，设置为.img-responsive的SVG图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加width:100%\9;即可。Bootstrap并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。响应式工具其他一些标签快速浮动divclass=pull-left.../divdivclass=pull-right.../div显示隐藏divclass=show.../divdivclass=hidden.../div清除浮动divclass=clearfix.../divmarkhighlight/mark被删除的文本del这里是被删除的文本/del无用的文本s这里是无用的文本/s为文本添加下划线u为文本添加下划线/uh1大标题small副标题/small/h1也可以用.h1和.small类使用small标签包裹，其内的文本将被设置为父容器字体大小的85%address这里是地址/address无样式列表ulclass=list-unstyledli.../li/ul移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。带有描述的短语列表dldt.../dtdd.../dd/dldlclass=dl-horizontal添加类.dl-horizontal可以使其横排dt.../dtdd.../dd/dl.text-success.text-info使文本颜色改变.bg-success文本增加背景三角符号spanclass=caret/span列表组和徽章spanclass=”badge”33/span.disabled被禁用的类把Well用在元素上，能有嵌入（inset）的的简单效果。divclass=well.../div.well-lg.well-smTips在HTML5中可以放心使用b和i标签。b用于高亮单词或短语，不带有任何着重的意味；而i标签主要用于发言、技术词汇等。!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{cssRule!important}，即写在定义的最后面，例如：box{color：red!important;}