Bootstrap布局之网格系统

    科技2022-07-15  127

    Bootstrap中的网格系统

    1、关于网格系统的简单介绍

    网格系统中的内容需要放置在容器中。 容器一般有两种类, .container和.container-fluidContainer 可以规定宽度Container-fluid 默认是全屏大小 关于行列关系的介绍 行是列的包装内容必须放在列中,并且只有列才能作为行的直接子代我们可以对列进行一些约束,比如大小,比如设备。我们可以对列的边距进行一些修改。 列中的关于设备的不同类 Extra small .col-small .col-sm-Medium .col-md-Large .col-lg-Extra Lagre .col-xl-

    2、一些关于网格系统的实例

    2.1 等宽

    网格布局中,每列的宽度都是一致的。

    <div class="container border"> <div class="row border"> <div class="col border"> 1 of 2 </div> <div class="col border"> 2 of 2 </div> </div> <div class="row border"> <div class="col border"> 1 of 3 </div> <div class="col border"> 2 of 3 </div> <div class="col border"> 3 of 3 </div> </div> </div>

    2.2 等宽多行(分栏符)

    我们可以通过插入.w-100来创建跨越多行的等宽列。

    <div class="container border"> <div class="row border"> <div class="col border">col</div> <div class="col border">col</div> <div class="w-100 border"></div> <div class="col border">col</div> <div class="col border">col</div> </div> </div>

    2.3 设置一行的宽度

    自动布局意味着我们可以设置一列的宽度,并且同级列可以自动调整大小。

    <!-- 用确定的标签大小来控制div --> <div class="container border"> <div class="row border"> <div class="col border">1 of 3</div> <div class="col-6 border">2 of 3 (wider)</div> <div class="col border">3 of 3</div> </div> <div class="row border"> <div class="col border">1 of 3</div> <div class="col-5 border">2 of 3 (wider)</div> <div class="col border">3 of 3</div> </div> </div>

    2.4 可变宽度内容

    我们使用 col-{breakpoint}-auto可以使列的宽度随着内容的大小而变化。

    <!-- 根据文本内容来控制容器大小 --> <div class="container border"> <div class="row justify-content-md-center border"> <div class="col col-lg-2 border">1 of 3</div> <div class="col-md-auto border">Variable width content</div> <div class="col col-lg-2 border">3 of 3</div> </div> <div class="row border"> <div class="col border">1 of 3</div> <div class="col-md-auto border">Variable width content</div> <div class="col col-lg-2 border">3 of 3</div> </div> </div>

    3、响应式布局

    Bootstrap的网格包括了五层预定义的类,用于构建复杂的响应式布局,可以给不同的设备设置想要的大小,包括超小型,小型,中型,大型,超大型等五种设备。

    3.1 给容器设置大小

    如果对每一种设备网格要求都是一样的话,请使用.col和.col-*来修饰容器,如果需要变化的话,请使用指定的编号的类别。

    <!-- 保证容器在任何大小设备中都能一致,需要使用bootstrap中的类.col-* --> <div class="container border"> <div class="row border"> <div class="col border">col</div> <div class="col border">col</div> <div class="col border">col</div> <div class="col border">col</div> </div> <div class="row border"> <div class="col-8 border">col-8</div> <div class="col-4 border">col-4</div> </div> </div>

    3.2 在特定设备中容器堆叠至水平

    例如:我们可以使用.col-sm-*类,而被设置的容器将在小设备时堆叠呈水平状态。

    <!-- 使用.col-sm-*会使得容器在小设备时行从堆叠变成水平 --> <div class="container border"> <div class="row border"> <div class="col-sm-8 border">col-sm-8</div> <div class="col-sm-4 border">col-sm-4</div> </div> <div class="row"> <div class="col-sm border">col-sm</div> <div class="col-sm border">col-sm</div> <div class="col-sm border">col-sm</div> </div> </div>

    3.3 混合搭配

    使列在不同的设备中呈现不同的样子,我们需要对他进行不同类的组合。

    <!-- 不同类的组合 --> <div class="container border"> <div class="row border"> <div class="col-md-8 border">col-md-8</div> <div class="col-6 col-md-4 border">col-6 col-md-4</div> </div> <div class="row border"> <div class="col-6 col-md-4">col-6 col-md-4</div> <div class="col-6 col-md-4">col-6 col-md-4</div> <div class="col-6 col-md-4">col-6 col-md-4</div> </div> <!-- 列始终保持50%的宽度 --> <div class="row border"> <div class="col-6">col-6</div> <div class="col-6">col-6</div> </div> </div>

    3.4 行列

    我们可以通过设置 .row-cols-* 来快速设置想呈现的内容的列数。

    <div class="container border"> <div class="row row-cols-2 border"> <div class="col border">Column</div> <div class="col border">Column</div> <div class="col border">Column</div> <div class="col border">Column</div> </div> </div>

    4、对齐

    4.1 垂直对齐

    我们使用.align-items-*类可以使我们的容器实现垂直对齐。

    <!-- 垂直对齐 --> <div class="container border"> <div class="row align-items-start"> <div class="col border">One of three columns</div> <div class="col border">Two of three columns</div> <div class="col border">Three of three columns</div> </div> <div class="row align-items-center"> <div class="col border">One of three columns</div> <div class="col border">Two of three columns</div> <div class="col border">Three of three columns</div> </div> <div class="row align-items-end"> <div class="col border">One of three columns</div> <div class="col border">Two of three columns</div> <div class="col border">Three of three columns</div> </div> </div>

    4.2 水平对齐

    我们可以通过设置.justify-content-*类来改变在主轴上的对齐,也就是水平对齐。

    <!-- 水平对齐 --> <div class="container border"> <div class="row justify-content-start border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> <div class="row justify-content-center border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> <div class="row justify-content-end border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> <div class="row justify-content-around border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> <div class="row justify-content-between border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> </div>

    4.3 No gutters

    我们可以使用 .no-gutters 类来删除预定义网格中列之间的装订线。

    <!-- No gutters --> <div class="row no-gutters"> <div class="col-sm-6 col-md-8 border">col-sm-6 col-md-8</div> <div class="col-6 col-md-4 border">col-6 col-md-4</div> </div>

    4.4 列包装

    如果有一行中放置的列超过了12列,则每组额外的列将作为一个新单元包装至新行中。

    <!-- Column wrapping --> <div class="container border"> <div class="row border"> <div class="col-9 border">col-9</div> <div class="col-4 border"> col-4<br/> since 9 + 4 = 13 > 12, this 4-column-wid div gets wrapped onto a new line as one contigous unit. </div> <div class="col-6 border"> col-6<br/> Subsequent columns continue along the new line. </div> </div> </div>

    5、重新排序

    5.1 排列顺序

    我们可以使用 .order-* 对项目进行可视化排序。

    <!-- Order classes --> <div class="container border"> <div class="row border"> <div class="col border">First in DOM, no order applied</div> <div class="col order-12 border">Second in DOM, with a larger order</div> <div class="col order-1 border">Thrid in DOM, with an order of 1</div> </div> </div>

    我们可以通过.order-first或.order-last来重置DOM中的顺序。

    <div class="container border"> <div class="row border"> <div class="col order-last border">First in DOM, ordered last</div> <div class="col border">Second in DOM, uordered</div> <div class="col order-first border">Third in DOM, ordered first</div> </div> </div>
    Processed: 0.010, SQL: 8