Bootstrap 响应式珊格布局

发布时间：2020-12-17 21:19:02 所属栏目：安全来源：网络整理

导读：首先使用响应式珊格布局要先在head里面加入meta标签以响应不同宽度的设备 meta name ="viewport" content ="width=device-width,intial-scale=1.0" ? 使用珊格系统的通用模板是 div class ="container" div class = "row" div class = "col-md-4" ... / di

首先使用响应式珊格布局要先在<head>里面加入<meta>标签以响应不同宽度的设备

<meta name="viewport" content="width=device-width,intial-scale=1.0"

使用珊格系统的通用模板是

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

其中.container和.row是固定的珊格系统必须包括在container中才能居中在浏览器 然后每行包括在row中

但是每列可被替换的类就多了模板:col-type-size

根据设备屏幕的尺寸可以被划分成四种:

>=1200px大屏幕 large (lg)
>=992px 中等屏幕 middle (md)
>=768px 小屏幕 small (sm)
<768px 超小屏幕 extend small (xs)

其中type 就可以被替换成 lg md sm xs

Bootstrap 内置12列固定布局珊格系统

所以size 就可以取1-12中的任意值但是同一row内的col 的size值加起来不能超过12 否则就会换行

比如下面的效果就是利用珊格系统实现的:

实现代码:(每列具体内容使用...替换掉了)

    <div class="container">
        <div class="row">
            <div class="col-md-4">...</div>
            <div class="col-md-4">...</div>
            <div class="col-md-4">...</div>
        </div>
        <div class="row">
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
        </div>
    </div>

这个例子包含两行第一行被划分为3列每列是4个单位的大小 第二行被划分为4列每列是3个单位的大小

另外还有几种高级的用法:

1.列偏移 col-type-offset-size会从左边偏移size个单位

例如

实现代码:

<div class="container">
    <div class="row" >
        <div class="col-lg-4" style="background-color: #ebccd1">col-lg-4</div>
        <div class="col-lg-offset-4 col-lg-4" style="background-color: #ebccd1">col-lg-4</div>
    </div>
    <div class="row" >
        <div class="col-lg-offset-3 col-lg-3" style="background-color: #ebccd1">col-lg-3</div>
        <div class="col-lg-offset-3 col-lg-3" style="background-color: #ebccd1">col-lg-3</div>
    </div>
    <div class="row" >
        <div class="col-lg-offset-3 col-lg-6" style="background-color: #ebccd1">col-lg-6</div>
    </div>
</div>

这个例子有三行:

第一行的第二个元素使用col-lg-offset-4偏移了4个单位

第二行的每个元素都使用col-lg-offset-3 偏移了3个单位

第三行也偏移了三个单位

2.列排序 列排序比列偏移更加灵活向右排序跟列偏移的效果是相同的 col-type-push-size

向左排序就是起点从往左移动size个单位 col-type-pull-size

例如

实现:

<div class="container" >
    <div class="row" style="background-color: #ebccd1">
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-10">col-lg-10</div>
    </div>
    <div class="row" >
        <div class="col-lg-2 col-lg-pull-1" style="background-color: #ebccd1">col-lg-2 col-lg-pull-1</div>
    </div>
    <div class="row">
        <div class="col-lg-5 col-lg-push-2" style="background-color: #ebccd1">col-lg-5 col-lg-push-2</div>
    </div>
</div>

第一行是正常的col 没有使用排序

第二行使用了col-lg-pull-1所以开始的位置就向左移了一个单位

第三行使用了col-lg-push-2所以开始的位置就像右移了两个单位

列排序与列偏移的差别主要在:

列偏移只能向右偏移列排序还可以向左偏移
列偏移的实现使用了offset 列排序的实现适应了float
列偏移超过原定尺寸会换行列排序超过指定尺寸会部分不可见但不换行

　　参考博客:https://blog.csdn.net/yingleiming/article/details/80061365

3.列嵌套 列嵌套就是在一个col里面添加row 被嵌套的总宽度和col 的宽度相同然后在被分成12份计算

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!