【Bootstrap】x 学习笔记 | Grid 格线系统 - 1

bootstrap 的格线系统非常有名
其主要是将整个网页分成12等份，
为什麽是12等份呢!??
因为一般网页布局大多为 三栏、四栏、六栏的布局，
为了让这些需求都能被满足，於是就取了大家的最小公倍数喽

而这些格线要怎麽样操作呢!?
格线的操作都是利用className来区分

自动分栏

class="col" >>> bootstrap 会依照页面的宽度来决定栏数

    <div class="container">
        <!--classname="col" 表示不固定栏数-->
        <div class="row">
            <div class="col">
                <div class="item">
                    <img src="https://picsum.photos/300/200?random=10" alt="" class="w-100" />
                    <p> ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quae
                        amet quos sint veritatis? Dicta, et cupiditate.</p>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <img src="https://picsum.photos/300/200?random=11" alt="" class="w-100" />
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quae
                        amet quos sint veritatis? Dicta, et cupiditate.</p>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <img src="https://picsum.photos/300/200?random=12" alt="" class="w-100" />
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quae
                        amet quos sint veritatis? Dicta, et cupiditate.</p>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <img src="https://picsum.photos/300/200?random=16" alt="" class="w-100" />
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quae
                        amet quos sint veritatis? Dicta, et cupiditate.</p>
                </div>
            </div>
        </div>

    </div>

固定栏宽(ex.分成三栏)

将页面栏位数分成三栏只要把class="col"改成class="col-4" , 4代表，(3/12)
就可以简单的控制要显示的栏位数

依照装置大小来显示栏位置

bootstrap有支援多种装置的显示方式，而每一个size的界线我们称之为断点(breakpoint)

图片来源:https://v5.getbootstrap.com/docs/5.0/layout/breakpoints/

里面的装置包含，手机，平板(直)，平板(横)，一般电脑萤幕
所以，我们就可以依照使用者的装置，来呈现不同的栏位数

以下方程序码为例，
如果使用者用的是PC大萤幕尺寸大於1400px，会套用col-xxl-2这个class看到的栏位数为(2/12) 六栏的资料;
如果使用者使用的萤幕尺寸为平板(直向 768px)，则会套用col-md-4这个class，所以会显示三栏的资料

<div class="col-12 col-md-4 col-lg-3 col-xxl-2">
    <div class="item">
        <img src="https://picsum.photos/300/200?random=10" alt="" class="w-100" />
        <p> ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quaeamet quos sint veritatis? Dicta, et cupiditate.</p>
    </div>
</div>

另外，还有一种方式也可以用来控制栏数，我们就留到下次谈吧!!