Boostrap 布局入门 - 大数据男孩

Boostrap 布局入门 [ 编程杂谈 ]

大数据男孩文章正文

明妃

{{nature("2022-08-14 17:23:16")}}更新

布局容器

为页面的栅格布局提供一个包裹的容器，有两个容器类。

container 类

会随着屏幕大小改变成相应的宽度，响应式推荐使用

响应式布局容器固定宽度
大屏（ >= 1200px ）宽度为 1170px
中屏（ >= 992px ）宽度为 970px
小屏（ >= 768px ）宽度为 750px
超小屏（ 100% ）

<body>

<div class="container" style="background: #2aabd2">大数据男孩</div>

</body>

container-fluid 类

流式布局容器百分百宽度
占据全部视口（viewport）的容器
适用于单独的移动端

<body>

<div class="container-fluid" style="background: #2aabd2">大数据男孩</div>

</body>

栅格系统

Boostrap 自动把页面划分为最多 12格等宽的列，然后通过所占列数进行模块化布局。

在不同的屏幕尺寸下 小格的宽度 是不同的，但一定是 等分屏幕宽度。

[ mark ]()

栅格系统选项参数

栅格系统用于一系列的行（row）与列（column）的组合来创建页面布局。

-	超小屏幕（手机）< 768px	小屏设备（平板）>= 768px	中等屏幕（桌面显示器） >=992px	宽屏设备（大桌面显示器）>= 1200px
container 最大宽度	自动（100%）	750px	970px	1170px
类前缀	.col-xs	.col-sm	.col-md	.col-lg

<!--布局装在容器里 -->
<div class="container">
    <!--每一行-->
    <div class="row">
        <!--大屏下每一行占 12 份-->
        <div class="col-lg-12">大数据男孩</div>
    </div>

    <div class="row">
        <!--大屏下每一行占 3 份-->
        <!--中屏下每一行占 6 份-->
        <div class="col-lg-3 col-md-6">大数据男孩</div>
        <div class="col-lg-3 col-md-6">大数据男孩</div>
        <div class="col-lg-3 col-md-6">大数据男孩</div>
        <div class="col-lg-3 col-md-6">大数据男孩</div>
        <div class="col-lg-3 col-md-6">大数据男孩</div>
        <div class="col-lg-3 col-md-6">大数据男孩</div>
    </div>

</div>

[ mark ]()

列嵌套

直接嵌套，会有边距

<!--布局装在容器里 -->
<div class="container">
    <!--每一行-->
    <div class="row">
        <div class="col-md-12">
            <!--嵌套-->
                <div class="col-md-6">大数据男孩</div>
                <div class="col-md-6">大数据男孩</div>
        </div>
    </div>
</div>

[ mark ]()

套在一个 row 里

<!--布局装在容器里 -->
<div class="container">
    <!--每一行-->
    <div class="row">
        <div class="col-md-12">
            <!--加一个 row -->
            <div class="row">
                <div class="col-md-6">大数据男孩</div>
                <div class="col-md-6">大数据男孩</div>
            </div>
        </div>
    </div>
</div>

[ mark ]()

列偏移

使用 col-md-offset-* 类可以将列向右偏移，这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)。

<!--布局装在容器里 -->
<div class="container">
    <div class="row">
        <!-- 4 + 4 + 4 = 12 格 -->
        <div class="col-md-4">大数据男孩</div>
        <!--中等屏幕向右偏移 4 格 -->
        <div class="col-md-4 col-md-offset-4">大数据男孩</div>
    </div>
    <div class="row">
        <!-- 2 + 8 + 2 = 12格-->
        <div class="col-md-8 col-md-offset-2">大数据男孩</div>
    </div>
</div>

[ mark ]()

列排序

通过使用 col-md-push-* 和 col-md-pull-* 类就可以很容易改变 column 的顺序。

col-md-push-*：左 --> 右
col-md-pull-*：右 --> 左

<!--布局装在容器里 -->
<div class="container">
    <div class="row">
        <!-- 原本 -->
        <div class="col-md-8">左侧</div>
        <div class="col-md-4">右侧</div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-push-4">左侧</div>
        <div class="col-md-4 col-md-pull-8">右侧</div>
    </div>
</div>

[ mark ]()

响应式工具

为了方便在不同屏下，实现隐藏和显示元素

类名	超小屏	小屏	中屏	大屏
hidden-xs	隐藏	可见	可见	可见
hidden-sm	可见	隐藏	可见	可见
hidden-md	可见	可见	隐藏	可见
hidden-lg	可见	可见	可见	隐藏

与之相反的，是 visible-xs 、visible-sm 、visible-md、visible-lg 在相应屏下显示。

<!--布局装在容器里 -->
<div class="container">
    <div class="row">
        <div class="col-md-4 hidden-md">中屏隐藏</div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

[ mark ]()