《深入驾驭Bootstrap》读书笔记(一)

栅格系统

贯彻原理

透过定义容器大小,平分1二份,再调整前前边距,最后结合媒体询问。

透过壹多重涵盖内容的行和列来创制页面布局。下边列出了 Bootstrap
栅格系统是什么样工作的:
一、行必须放置在 .container class
内,以便获得适当的对齐(alignment)和内边距(padding)。
贰、使用行来创立列的水平组。
叁、内容应该放置在列内,且只有列能够是行的直白子成分。
4、预订义的网格类,比如 .row 和 .col-xs-4,可用以快速创制网格布局。LESS
混合类可用于更多语义布局。
5、列通过内边距(padding)来创立列内容之间的空隙。该内边距是经过 .rows
上的异地距(margin)取负,表示第2列和结尾壹列的行偏移。
陆、网格系统是透过点名想要横跨的十二个可用的列来成立的。例如,要开创四个分外的列,则利用四个.col-xs-四。

传播媒介询问是可怜不简单的”有标准的 CSS
规则”。它只适用于部分基于有些规定条件的
CSS。倘诺满足那二个条件,则采纳相应的体制。

Bootstrap
中的媒体询问允许你基于视口大小活动、彰显并隐蔽内容。上边包车型客车媒体询问在
LESS 文件中选择,用来创建 Bootstrap 栅格系统中的关键的分界点阈值。

/* 超小设备(手机,小于 768px) */
/* 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) { ... }

传播媒介询问有七个部分,先是3个设备正式,然后是三个尺寸规则。在上边的案例中,设置了下列的平整:
让大家来看上边那行代码:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于有所带有 min-width: @screen-sm-min 的装备,要是显示器的大幅小于
@screen-sm-max,则会议及展览开部分拍卖。

基本用法

列组合

能够由此改变数字来合并列。

<div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
</div>

它的贯彻是透过左浮动和增长幅度百分比,源码如下:

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }

列偏移

使用.col-md-offset-*就可以完结将列偏移到右手,那一个类会把3个列的左外边距(margin-left)扩大
* 列,其中 * 范围是从 一 到 1一。
但是,.col-xs-*
类不支持偏移,可是它们得以不难地因而运用一个空的单元格来兑现该意义。

列嵌套

为了在内容中嵌套暗中同意的网格,请添加一个新的 .row,并在三个已有些.col-md-* 列内添加1组 .col-md-*
列。被嵌套的行应包蕴一组列,那组列个数无法超越1二(其实,未有供给您不能够不占满1二列)。

在上面包车型地铁实例中,布局有多少个列,第壹列又嵌套了三个新行,并且偏移到了中档地方。

<div class="container">
    <div class="row">
        <div class="col-md-8" style="background-color: lavender">第一层第一列:col-md-8
            <div class="row" >
                <div class="col-md-6 col-md-offset-3" style="background-color: lavenderblush">第二层col-md-6并且偏移至中间</div>
            </div>
        </div>
        <div class="col-md-4" style="background-color: yellow">第一层第二列:col-md-4</div>
    </div>
</div>

列排序

列排序就是改变列的大势,改变左右转变然后设置浮动的偏离。使得大家能够很不难地以一种顺序编写列,然后以另一种顺序展现列。

能够通过.col-md-push-* 和 .col-md-pull-* 来实现,其中 * 范围是从 1 到
1一。

列排序运维效果如图:
图片 1
能够领略为:人是在网页的最右边,然后要把col-md-叁拉(pull)过来,把col-md-九推(push)过去。

响应式栅格

下表总计了栅格系统怎么样跨多个设备工作:
图片 2

跨设备组合定义

小编们会遇到一种体裁在其余尺寸的设备中是不起效用的。所以要在贰个要素上利用分裂类型的体制,也正是给叁个因素添加五个类名,以适配不相同尺寸的荧屏。

    <div class="row">
        <div class="col-sm-12 col-md-8" style="background-color: lavenderblush">col-sm-12 col-md-8</div>
        <div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
        <div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
        <div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-6" style="background-color: lavenderblush">col-sm-6</div>
        <div class="col-sm-6" style="background-color: lavenderblush">col-sm-6</div>
    </div>

撤消浮动

    <div class="row">
        <div class="col-sm-3 col-xs-6" style="background-color: red">div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: red">div2:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: green">div3:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: green">div4:col-sm-3 col-xs-6</div>
    </div>

上述代码在超小型设备中并不曾显得出我们想要的每行三个div的法力。那是因为具有的col-样式都以左浮动的,第多个div初叶换行的时候,由于第5个div中度过高,所以首个就在左边紧挨着展现了。
为了缓解这些难题,就要用到clearfix样式。
源码中clearfix如下:

.clearfix:before,
.clearfix:after{
    display: table;
    content: " ";
}
.clearfix:after{
    clear:both;
}

采纳clearfix清除浮动后,再添加三个visible-xs样式,使得唯有在超小型显示器中才有那种作用。

    <div class="row">
        <div class="col-sm-3 col-xs-6" style="background-color: red">div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: red">div2:col-sm-3 col-xs-6</div>
        <div class="clearfix visible-xs">清除浮动,设置额外的小设备可见</div>
        <div class="col-sm-3 col-xs-6" style="background-color: green">div3:col-sm-3 col-xs-6</div>
        <div class="col-sm-3 col-xs-6" style="background-color: green">div4:col-sm-3 col-xs-6</div>
    </div>

Bootstrap
提供了某些帮助类,以便越来越快地贯彻对移动设备友好的支付。那一个足以因此媒体询问结合大型、小型和中等设备,达成内容对设备的展现和隐藏。
亟待谨慎使用这个工具,幸免在同二个站点成立完全差异的版本。响应式实用工具近日只适用于块和表切换。
图片 3

相关文章