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

栅格系统

落实原理

由此定义容器大小,平分12卖,再调动前后边距,最后结合媒体询问。

透过平等系列涵盖内容的施行和排来创造页面布局。下面列有了 Bootstrap
栅格系统是怎么样行事的:
1、行务放在 .container class
内,以便得到相当的指向齐(alignment)和内边距(padding)。
2、使用实行来创造列的水平组。
3、内容应放置于排列内,且只列好是实行的直白子元素。
4、预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS
混合类可用来更多语义布局。
5、列通过内边距(padding)来创造列内容之间的间隙。该内边距是经 .rows
上的外地距(margin)取负,表示第一排和尾声一列的行偏移。
6、网格系统是经过点名想只要跨过的十二个可用之列来创建的。例如,要开创三只顶的排,则采取三独
.col-xs-4。

媒体询问是好了不起的”有谱的 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) { ... }

传媒询问有些许独片,先是一个设备正式,然后是一个轻重规则。在上面的案例被,设置了下列的平整:
深受咱们来拘禁下这行代码:

@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-*纵使好兑现以列偏移到右,这些近似会把一个排的左外边距(margin-left)增加
* 列,其中 * 范围是打 1 到 11。
但是,.col-xs-*
类不支持偏移,但是她可简简单单地经过运用一个空的就元格来兑现该意义。

列嵌套

为以内容中嵌套默认的网格,请加加一个新的 .row,并当一个都有的
.col-md-* 列内加加相同组 .col-md-*
列。被嵌套的行应包含一组列,这组列个数不能够过12(其实,没有要求您必须占用满12排)。

当下面的实例中,布局有些许个列,第一列又嵌套了一个新行,并且偏移到了中档位置。

<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 到
11。

列排序运行效果使图:
图片 1
好理解啊:人是当网页的不过左边,然后一旦拿col-md-3拉(pull)过来,把col-md-9推(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开始换行的时候,由于第一只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

相关文章