bootstrap网格布局原理解析

删除回忆录丶 提交于 2019-12-02 15:04:47

简介

bootstrap根据媒体查询设置不同的container容器宽度,在容器内用百分比设置其列col的宽度以自适应不同大小的屏幕,一行row共有12col,只需添加相关的类名,且对应类名后面的数字之和为12即可。

/* 超小设备(手机,小于 768px) xs*/
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备(平板电脑,768px 起)sm */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备(台式电脑,992px 起) md */
@media (min-width: @screen-md-min) { ... }

/* 大型设备(大台式电脑,1200px 起) lg */
@media (min-width: @screen-lg-min) { ... }

基本网格结构:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....
  1. 必须用container类做容器
  2. 容器内包含行元素即row类,也可以包含其他元素
  3. row的直接子元素只能是列,即col-*-*

简单应用:

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-sm-1 col-md-6 col-lg-8 col-xs-6">

        </div>

        <div class="col-sm-11 col-md-6 col-lg-4 col-xs-6">

        </div>
    </div>
</div>

展示效果

默认 xs
sm @media (min-width: 768px) sm

@media (min-width: 992px) md
@media (min-width: 1200px) lg

container布局详解

结构

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

作用

  1. container元素左右padding:15px
  2. container元素居中显示
  3. 根据媒体查询设置不同的container宽度

row布局详解

结构

.row {
    margin-left: -15px;
    margin-right: -15px;
}

作用

消除最左和最右colpadding-left: 15px;padding-right: 15px;


col--布局详解布局详解

结构

  1. 所有的col列都有左右15pxpadding消除最左和最右col的padding-left: 15px;padding-right: 15px;
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
  1. xs即最小宽度的设置,所有列都左浮动float: left;
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
}
  1. col-xs-12表示宽度100%, col-xs-*表示宽度为*/12,col-xs-11即91.66666667%;
.col-xs-12 {
    width: 100%;
}
.col-xs-11 {
    width: 91.66666667%;
}
省略……
.col-xs-2 {
    width: 16.66666667%;
}
.col-xs-1 {
    width: 8.33333333%;
}
  1. col-xs-pull-*表示将其向左移动*/12,right:*/12
.col-xs-pull-12 {
    right: 100%;
}
.col-xs-pull-11 {
    right: 91.66666667%;
}
省略……
.col-xs-pull-1 {
    right: 8.33333333%;
}
.col-xs-pull-0 {
    right: auto;
}
  1. col-xs-push-*表示将其向右移动*/12,left:*/12
.col-xs-pull-0 {
    right: auto;
}
.col-xs-push-12 {
    left: 100%;
}
省略……
.col-xs-push-1 {
    left: 8.33333333%;
}
.col-xs-push-0 {
    left: auto;
}

col-xs-pull-*col-xs-push-*都有可能将元素移出屏幕外边,因为他们按照定位的方式设置元素的偏移(left/right),百分比以col自身的宽度为基准

  1. col-xs-offset设置元素的左边偏移量,用margin-left设置,百分比以col父元素即row宽度为基准,不会移出屏幕外边
.col-xs-offset-12 {
    margin-left: 100%;
}
.col-xs-offset-11 {
    margin-left: 91.66666667%;
}
}
省略……
.col-xs-offset-1 {
    margin-left: 8.33333333%;
}
.col-xs-offset-0 {
    margin-left: 0%;
}

其他媒体查询设置

@media (min-width:768px){}
@media (min-width:992px){}
@media (min-width:1200px){}

里面的内容和默认的一样,除过将xs替换为sm,md,lg

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!