<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->

    <!-- 适当的绘制和触屏缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 如果需要只让用户滚动屏幕静止缩放功能(设置 meta 属性为 user-scalable=no) -->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->

    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/my.css">
</head>
<body>

    <!-- 布局的容器 -->

    <!-- 固定宽度并支持响应式的布局容器 -->
    <div class="container">
        <h3>这是固定宽度,支持响应式的布局容器</h3>
        <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>
        <div class="row">
            <div class="col-md-8">col-md-8</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
        </div>
    </div>

    <br />
    <br />
    <br />

    <!-- 100%宽度,占据全部视口的容器 -->
    <div class="container-fluid">
        <h3>这是100%宽度的流式布局容器</h3>
        <!-- 桌面端按8-4进行分割  手机端按12-6进行分割 超出部分在下面显示 -->
        <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>

        <!-- 桌面按4-4-4进行分割 手机端按6-6-6进行分割 超出部分在下面显示 -->
        <div class="row">
            <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
            <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
            <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
        </div>

        <!-- 手机和桌面按照6-6进行分割 保持比例不变 -->
        <div class="row">
            <div class="col-xs-6"></div>
            <div class="col-xs-6"></div>
        </div>
    </div>

    <br>
    <br>
    <br>
    <div class="container">
        <h3>这是固定宽度,支持响应式的布局容器</h3>

        <!-- 桌面布局8-4   平板布局6-6   手机布局12-6 -->
        <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>

        <div class="row">
            <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
            <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
            <div class="clearfix visible-xs-block"></div>
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        </div>

    </div>


    <br>
    <br>
    <br>
    <div class="container">
        <h3>这是固定宽度,支持响应式的布局容器</h3>
        <!-- 多于的列另起一行排列 -->
        <div class="row">
            <div class="col-xs-9">col-xs-9</div>
            <!-- 因为9+4>12,所以另外增加一列 9单独成行  这一行到新的行去 -->
            <div class="col-xs-4">col-xs-4</div>
            <!-- 后续的列沿着新行继续 -->
            <div class="col-xs-6">col-xs-6</div>
        </div>
    </div>

    <br>
    <br>
    <br>
    <div class="container">
        <h3>这是固定宽度,支持响应式的布局容器</h3>
        <!--
            响应式列重置:
            在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,需要使用 .clearfix 和 响应式工具类
         -->
        <div class="row">
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
        </div>
        <!-- 仅为所需的视口添加额外的clearfix -->
        <div class="clearfix visible-xs-block"></div>

        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>

    <br>
    <br>
    <br>
    <div class="container">
        <h3>重置偏移,后推或前拉某个列</h3>
        <div class="row">
            <div class="col-sm-5 col-md-6">col-sm-5 col-md-6</div>
            <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0</div>
        </div>

        <div class="row">
            <div class="col-sm-6 col-md-5 col-lg-6">col-sm-6 col-md-5 col-lg-6</div>
            <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">
                col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0
            </div>
        </div>
    </div>


    <br>
    <br>
    <br>
    <div class="container">
        <h3>列偏移</h3>
        <!-- 12等份需要加上偏移量 -->
        <div class="row">
            <div class="col-md-4 my-style">col-md-4</div>
            <div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
        </div>
        <!-- 先偏移 再取有多少个等份 -->
        <div class="row">
            <div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div>
            <div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">col-md-6 col-md-offset-3</div>
        </div>


        <!-- 覆盖较低网格层的偏移量 -->
        <div class="row">
            <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
            <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
            <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0</div>
        </div>

    </div>


    <br>
    <br>
    <br>
    <div class="container">
        <h3>嵌套列</h3>

        <div class="row">
            <div class="col-sm-9">
                Level 1: col-sm-9
                <div class="row">
                    <div class="col-xs-8 col-sm-6">
                        Level 2: col-xs-8 col-sm-6
                    </div>
                </div>
            </div>
        </div>

        <hr/>

        <h3>列排序</h3>
        <div class="row">
            <div class="col-md-9 col-md-push-3">col-md-9 col-md-push-3</div>
            <div class="col-md-3 col-md-pull-9">col-md-3 col-md-pull-9</div>
        </div>

    </div>

    <br>
    <br>
    <br>

    <br>
    <br>
    <br>

    <br>
    <br>
    <br>

    <br>
    <br>
    <br>

    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
</body>
</html>
最后修改:2021 年 02 月 04 日
如果觉得我的文章对你有用,请随意赞赏