(Bootstrap笔记.docVIP

Bootstrap 移动设备优先。 所有列默认都是左浮动 为确保适当的绘制和触屏缩放，加入下面的meta标签 meta name=viewport content=width=device-width, initial-scale=1 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个?.container?容器。我们提供了两个作此用处的类。注意，由于?padding等属性的原因，这两种容器类不能互相嵌套。 .container?类用于固定宽度并支持响应式布局的容器。 div class=container/div .container-fluid?类用于 100% 宽度，占据全部视口（viewport）的容器。 div class=container-fluid/div媒体查询 在栅格系统中，我们在 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) { ... } 栅格参数 针对超小屏幕和中等屏幕设备所定义的类吧，即?.col-xs-*和?.col-md-*。 ”.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）的顺序。 Less mixin 和变量 页面主体 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 的默认样式。 文本大小写 缩略语 abbr title=”454545”缩略词/abbr鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含 title 属性。 为缩略语添加?.initialism?类，可以让 font-size 变得稍微小些。 ”这里是缩略词的解释” class=”initialism”缩略词/abbr 引用 blockquote class=”blockquote-reverse”/blockquote 表单 单独的表单控件会被自动赋予一些全局样式。所有设置了?.form-control?类的?input、textarea?和?select?元素都将被默认设置