bootstrap 中自带的坑

很多同学在写响应式网站的时候，第一反应都会使用一个框架，叫做 bootstrap，但是在使用的过程中，我们偶尔会遇到一些坑：

例如：

列（col）上面总是有 padding，导致一个写不好，内容就超出了

标签经过的时候自带下划线

在使用这些 bootstrap 定义 class 的时候，经常遇到这种情况，这些情况的产生就是因为 bootstrap 中定义了大量的样式，这些样式不管你用得到用不到，都会在框架内，某些时候我们只需要其中的某一部分，例如：”栅格”，这时候，我们就必须知道栅格中存在一些什么样式？分别又有哪些功能？

栅格系统功能分析

• 媒询
• 布局容器
• 行
• 列
• 列偏移
• 列排序

媒询（@media）

作用：在对应的媒体设备和媒体特征下，显示对应样式。

<style>
    @media{
        // 符合媒体设备和媒体特征下，显示的样式
    }
</style>

媒询设备

作用：限定样式在某种设备下才能显示

属性：

• all 所有 （前端常用）
• screen 彩屏设备（前端常用）
• print 打印机和打印预览
• speech 用于屏幕阅读器等发声设备

媒询特征

作用：对于设备做更多的限制，尺寸方面使用较多

属性：

• min-width（前端常用）
• max-width（前端常用）
• min-height
• max-height
  ….

媒询中的关键词

作用：用于指定某个特性或连接设备和特征

- only 只有（只有某个设备下或只有某个尺寸下）
- and 用于连接媒询设备和媒询特征
- not 不包含（排除某个设备或某个尺寸）

使用方法

only 关键词

<style>
@media only screen{
    //只有当前访问的设备是彩屏设备时，才解析里面的样式
}
</style>

and关键词

<style>
@media screen and (min-width:768px){
    //只有当前访问的设备是彩屏设备时,并且当前屏幕宽度大于等于768，才解析里面的样式
}
</style>

not 关键词

<style>
@media not screen{
     //只有当前访问的设备不是彩屏设备时，才解析里面的样式
}
</style>

注意事项

样式的解析，在样式表中也是有顺序的，同一个属性在同一个样式下是会被替换的

<style>
    .box{
        background:red;
        width:100px;
        height:100px;
    }
    .box{
        background:green;
    }
    //最后这个盒子的背景色是绿色
</style>

<style>
    @media screen{
        .box{
            background:red;
            width:100px;
            height:100px;
        }
    }
    .box{
        background:green;
    }
    //媒询并不会提高样式的优先级，所以还是绿色，所以写的时候我们要注意把最后想显示的样式，写在下面
</style>

正确写法如下

<style>
    .box{
        background:green;
        width:100px;
        height:100px;
    }
    @media screen{
        .box{
            background:red;
        }
    }
    //这样才能符合媒询要求后，替换掉上面的样式，最终显示红色
</style>

bootstrap 中的媒询划分

• 超小屏 xs（适用手机），没有写在媒询内
• 小屏 sm（适用平板），媒询范围 - 最小 768px
• 中等屏幕 md（适用桌面显示器），媒询范围 - 最小 992px
• 大屏幕 lg（适用大桌面显示器），媒询范围 - 最小 1200px

后面我们都用 xs、sm、md、lg 代指

代码如下

<style>
.box{
    background:red;
    width:100px;
    height:100px;
}
@media screen and (min-width:768px){
    .box{
        background:green;
    }
}
@media screen and (min-width:992px){
    .box{
        background:blue;
    }
}
@media screen and (min-width:1200px){
    .box{
        background:gray;
    }
}
</style>

布局容器

作用：放置行和列，并且在固定宽度的时候，使内容永远居中在可视区

固定宽度布局容器

<style>
.container{
    //如果加给内嵌或者内嵌块
    display:block;
    //使当前元素居中显示
    margin:0 auto;
}
@media screen and (min-width:768px){
    .container{
        width:750px;
        padding:0 9px;
    }
}
@media screen and (min-width:992px){
    .container{
        width:970px;
        padding:0 11px;
    }
}
@media screen and (min-width:1200px){
    .container{
        width:1170px;
        padding:0 15px;
    }
}
</style>

流体布局

<style>
.container-fluid{
    //如果加给内嵌或者内嵌块
    display:block;
    //使当前元素居中显示
}
@media screen and (min-width:768px){
    .container-fluid{
        padding:0 9px;
    }
}
@media screen and (min-width:992px){
    .container-fluid{
        padding:0 11px;
    }
}
@media screen and (min-width:1200px){
    .container-fluid{
        padding:0 15px;
    }
}
</style>

列

在这里我们先来说列，因为列是不需要放在行里面，也可以出现的，那为什么一定要行呢？这就要看我们的列做了什么。

bootstrap 中将整个页面划分12个格子，宽度除了可以接受 px 这种单位，还可以接受 %
，也就是说一个格子就是 100/12

<style>
.col-xs-1{
    width：8.3%；
}
.col-xs-2{
    width：8.3% * 2；
}
.col-xs-3{
    width：8.3% * 3；
}
</style>

以上代码，我们可以看到首先写起来麻烦，要写 12 个，其次 xs、sm、md、lg 四个屏幕，需要四套，宽度的百分比计算有无限循环，所以我们使用less

以下是 less 代码

//只考虑一个屏幕的
.col-xs(@index) when(@index>0){
    .col-xs(@index - 1);
    .col-xs-@{index}{
        width:100% / 12 * @index;
    }
}
.col-xs(12);
//这里的@index代表的是分成几个格子

扩展版本，处理多屏幕，不同格子的情况

.col(@index，@s,@num) when(@index>0){
    .col(@index - 1,@s,@num);
    .col-@{s}-@{index}{
        width:100% / @num * @index;
    }
}
.col-xs(12,xs,12);
//@index - 代表分多少个格子
//@s - 代表当前屏幕
//@num - 格子总数，用于计算一个格子应该是多大，因为@index是会变的，所以不能直接用

为了使加了的元素能接受宽高，并且排列在一行，所以每一个都加上 float:left

最终版本

.col(@index，@s,@num) when(@index>0){
    .col(@index - 1,@s,@num);
    .col-@{s}-@{index}{
        width:100% / @num * @index;
        float:left;
    }
}

行

在列的实现中我们使用了 float：left，所以脱离了文档流，无法撑开父级的高度，这时候我们要清除浮动，并且在父级布局容器中，有 padding 值，很碍事

用处一：清除浮动

<style>
.row:after{
    content:'';
    display:block;
    clear:both;
}
</style>

• clear 只对它前面的元素有效，所以用 after 伪类
• 因为是伪类必须加 content
• 只有加给块元素，才能达到清除浮动的效果，所以 display:block
• both 可以同时清除right和left方向的

用处二：清除布局容器的 padding

<style>
.row{
    //考虑万一加给内嵌或内嵌块
    display:block;
}
@media screen and (min-width:768px){
    .row{
        //sm屏幕下的布局容器padding是9
        margin-left:-9px;
        margin-right:-9px;
    }
}
@media screen and (min-width:992px){
    .row{
        //md屏幕下的布局容器padding是11
        margin-left:-11px;
        margin-right:-11px;
    }
}
@media screen and (min-width:1200px){
    .row{
        //lg屏幕下的布局容器padding是15
        margin-left:-15px;
        margin-right:-15px;
    }
}
</style>

列偏移

在使用列偏移的时候，该元素会从左向右进行移动，并且该元素后面的元素，也会往后移动，根据这个特性，我们推断是用 margin-left 实现

.col-xs-offset-1{
    //这里的margin-left其实就是格子的宽度
    margin-left:100% / 12 * 1;
}

那么在这里我们同样要准备四套，并且，格子数可能不一样，所以依旧采用less
利用less的列偏移

.col(@index，@s,@num) when(@index>0){
    .col(@index - 1,@s,@num);
    .col-@{s}-@{index}{
        width:100% / @num * @index;
        float:left;
    }
    //列偏移代码
    .col-@{s}-offset-@{index}{
        margin-left:100% / @num * @index;
    }
}

列排序

控制两个（或多个）元素之间调换位置。

可以改变元素位置的属性：

• position
  • relative
  • absolute
  • fixed
• margin
• padding

在这里我们常用的改变元素位置的属性有这些，我们来每个分析一下

relative

该属性在使用过程中，不脱离文档流，定位基于自己本身

absolute

该属性在使用过程中，脱离文档流，定位根据定位父级（具有 relative、absolute、fixed 的父级或祖父级，即可作为定位父级）或文档进行定位

fixed

该属性在使用过程中，脱离文档流，定位根据可视区进行定位

margin

外填充，可以在两个元素之间产生间距，会影响它后面的元素改变位置

padding

内填充，可以在元素边框以内的区域产生间距

综合以上分析出来的特性，我们改变元素位置的时候，首先不能脱离文档流，其次不能影响其他元素，并且作用是改变元素的位置，所以我们最后排除法，剩下的只有relative这条属性

<style>
.col-xs-push-1{
    //把一个元素向后推，1也就是一个格子的距离
    position:relative;
    left:100% / 12 * 1;
}
.col-xs-pull-1{
    //把一个元素向前拉，1也就是一个格子的距离
    position:relative;
    left:-100% / 12 * 1;//给一个负的值
}
</style>

less 版本

.col(@index，@s,@num) when(@index>0){
    .col(@index - 1,@s,@num);
    .col-@{s}-@{index}{
        width:100% / @num * @index;
        float:left;
    }
    //列偏移代码
    .col-@{s}-offset-@{index}{
        margin-left:100% / @num * @index;
    }
    //列排序-向后推
    .col-@{s}-push-@{index}{
        left:100% / @num * @index;
    }
    //列排序-向前拉
    .col-@{s}-pull-@{index}{
        left:-100% / @num * @index;
    }
}

以上就是我们今天要说的栅格系统的全部功能了，希望本篇文章对大家了解 boostrap 的时候有所帮助~

文字看得不过瘾？想看视频？到这里来观看吧：

视频地址：https://study.miaov.com/v_show/2925

课程咨询：

• 咨询QQ：2852509866、2852509867、2852509868
• 微信：miaov-class
• 电话：010-57269690