BootStrap常用样式

弦余丷

已于 2022-11-02 20:04:45 修改

阅读量551

点赞数

文章标签： bootstrap 前端 html

于 2022-11-02 20:03:30 首次发布

本文链接：https://blog.csdn.net/qq_37590794/article/details/127657831

版权

BootStrap栅格layout

BootStrap将网页均分为12分（12个格子），响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

使用栅格系统注意点
1 行必须放置在.container(固定宽度）或 .container-fluid （100% 宽度）中，以便获得适当的对齐alignment和内边距padding
2 使用行来创建列的水平组
3 内容应该放置在列内，唯有列可以是行的直接子元素
4 预定义的网格类，比如.row和.col-xs-x，可用于快速创建网格布局。
5 列通过内边距(padding)来创建列内容之间的间隙

col-lg-* large 大型设备（大台式电脑，1200px 起）
col-md-* middle 中型设备（台式电脑，992px 起）
col-sm-* small 小型设备（平板电脑，768px 起）
col-xs-* x-small 超小设备（手机，小于 768px）

BootStrap常用样式与标签

常用样式

1、container：让元素在容器中水平居中

2、col-md-4：占几个栅格

3、col-md-ofset-4：左边空出几个栅格

4、col-md-push-8：向右浮动几个栅格

5、col-md-pull-2：向左浮动几个栅格

参考代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <style type="text/css">
		    .row div{
		        background-color: aqua;
		        border: 1px solid black;
		    }
		</style>
    </head>
<body>
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <div class="col-md-4">4</div>
            <div class="col-md-4">4</div>
            <div class="col-md-4">4</div>
        </div>
        <!-- 行元素 -->
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
        </div>
        <!-- 行元素 -->
        <div class="row">
            <div class="col-md-6">6</div>
            <div class="col-md-6">6</div>
        </div>
        <!-- 行元素 -->
        <div class="row">
            <div class="col-md-3">3</div>
            <div class="col-md-4">4</div>
            <div class="col-md-5">5</div>
        </div>
        <!-- 网格偏移：右侧兄弟元素会被向右推移，但不会被覆盖-->
        <div class="row">
            <!-- 将该元素位置向右偏移2个位置，总占据3个格栅-->
            <div class="col-md-1 col-md-offset-2">1</div>
            <!-- 将该元素位置向右偏移3个位置，总占据4个格栅-->
            <div class="col-md-1 col-md-offset-3">1</div>
            <!-- 将该元素位置向右偏移3个位置，总占据5个格栅-->
            <div class="col-md-1 col-md-offset-4">1</div>
        </div>

        <!-- 网格排序：右侧兄弟元素不会被推移，可能会被兄弟元素覆盖-->
        <div class="row">
            <!-- 将该元素位置向右偏移3个位置，只占据1个位置，可能会被兄弟元素覆盖-->
            <!-- push：向右浮动，pull：向左浮动-->
            <div class="col-md-1 col-md-push-3" style="background-color: red;">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
        </div>

        <!-- 列嵌套-->
        <div class="row">
            <div class="col-md-2" style="background-color: red;">2</div>
		    <div class="col-md-4" style="background-color: blue;">4</div>
		    <div class="col-md-6" style="border: 0;">
                <div class="row" style="border: 0;">
                    <!-- 被嵌套的行又会再分出12个格栅-->
                    <div class="col-md-4" style="background-color: yellow;">子4</div>
                    <div class="col-md-4" style="background-color: yellow;">子4</div>
                    <div class="col-md-4" style="background-color: yellow;">子4</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>