bootstrap table 不换行_Bootstrap栅格系统（二）

不会栅格系统 千万不要说你会Bootstrap框架

这个说实话现在是超级基础的框架了，并且偏向于UI界面的一款框架

话不多说，让我们来看下栅格系统吧

2.1 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

1：每一行放container 或者container-fuild里面

2：每一行row 每一列 col 每一行12列 大于12 会自动换行

大白话解释图片：

手机 (<768px) container:100% col-xs

小屏幕(≥768px) container:750px col-sm

桌面显示器(≥992px) container:970px col-md

大桌面显示器(≥1200px) container:1170px col-lg

每一个类前缀 col-md-数量 总数是12

注意:col-md-4 会向上兼容 只要屏幕大于992px是 都会显示col-md-4 占4分

但是当屏幕小于992的时候 这个类名就失去了布局效果，成为普通的div块元素

2.2 练习

<div class="container">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
     
        </div>
        <h2>第二行--一行4列</h2>
        <div class="row">
            <div class="col-md-3">col-lg-3</div>
            <div class="col-md-3">col-lg-3</div>
            <div class="col-md-3">col-lg-3</div>
            <div class="col-md-3">col-lg-3</div>
        </div>
        <h2>第三行  一行多余12列</h2>
        <div class='row'>
            <div class='col-md-6'>col-md-10</div>
            <div class='col-md-3'>col-md-2</div>
            <div class='col-md-3'>col-md-2</div>
            <div class='col-md-3'>col-md-2</div>
            <div class='col-md-3'>col-md-2</div>
            <div class='col-md-3'>col-md-2</div>
            <div class='col-md-3'>col-md-2</div>
        </div>
        <h2>移动设备和桌面屏幕</h2>
        <div class="row">
            <div class="col-md-8 col-xs-12">666</div>
            <div class="col-md-4 col-xs-6">666</div>
            <div class="col-md-4 col-xs-6">666</div>
            <div class="col-md-4 col-xs-6">666</div>
            <div class="col-md-4 col-xs-6">666</div>
        </div>
    </div>

2.3 栅格列偏移

列偏移就是 不在当前的位置 想要当前写的列向后移动多少

比如：col-md-offset-4 就表示：在中屏电脑上向后面移动4列的位置

2.4 列嵌套

嵌套是必须要掌握的知识点

第一种：适配移动端和桌面端

此时会使用到两个列的布局 移动端布局：col-xs- 桌面端布局：col-sm- col-lg-

上面效果只是桌面效果，窗口变小才是呈现移动端效果的布局

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

代码解释：在桌面上显示 8和4列的布局

移动端显示：第一个col-xs-12 显示占据一行的内容 col-xs-6在移动端会换行占据一半的宽度

第二种：手机、平板、桌面

注意：这是三端都要考虑

移动端：col-xs- 平板：col-sm- 桌面：col-md- col-lg-

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

代码解析：看代码的时候 只看一个设置下的效果 不要一次都看

举例：比如上面代码先看col-xs-12 第一个div在手机上是一行显示 第二个div是手机上一半显示，先把col-xs- 手机端的布局查看完毕

继续看 col-sm-6 第一个div在平板的占据一半 第二个也是col-xs-6 会向上适配也是占据一半的容器

继续看：col-md-8 第一个div桌面显示占据8分的宽度 第二个col-md-4 桌面显示4分