【後转前要多久】# Day19 BootStrap - 排版切版 Layout (Row、Col?)

row是指什麽、col是指什麽?

常见的翻译是 row代表列、col代表栏

但用google翻译来翻却有不同的意思，
光是对row的中文翻译，就有三种(排、行、列)解释方式了...

因为英文语系的书写方式只有水平书写，所以没有这个问题，
但在中文语言里面，书写方式可以垂直、也可以水平书写，
所以导致行列在生活之中常被混用...

这也是我想抱怨点之一，
每次用到行列时都会混淆，非常困扰orz
尤其是行列式的时候

行、排、列 到底指的是什麽??
通常我们会讲 这行程序码有bug、还是这列程序码有bug ?

虽然生活上文字混着使用，但我们也很习惯搭配肢体比划，来表达、接收对方的意思

使用中文的行、列，导致意思比较模糊不清，
这边就统一使用英文row、col来介绍。

row、col 分不清?

row 是一列列垂直往下的东西

col 是一行行往右的东西

版面切版

Bootstrap有两大种类的切版方式，
两种方式都是要 先用row、再用col。

平均分等份

一个row(100%)的宽度，会平均分配给底下所有col
如果底下有5个col的话，就会是五等份，一个col平均宽度就是20%

HTML
(可透过emmet快速产生html语法: .col{$$}*5 按tab)

...
<div class="row">
    <div class="col">01</div>
    <div class="col">02</div>
    <div class="col">03</div>
    <div class="col">04</div>
    <div class="col">05</div>
</div>
...

快速浏览一下BootStrap里面的row、col的程序码，看他是如何实做平均等份的

原来是利用CSS flex来切版

12等份法

Bootstrap预设的格线系统，会把完整呈现的画面(100%)切成12等份，
平均每一份会得到 8.33%

HTML
(可透过emmet快速产生html语法: .col-1{$$}*13 按tab)

<div class="row">
    <div class="col-1">
        01
    </div>
    <div class="col-1">
        02
    </div>
    
    ...
    
    <div class="col-1">
        12
    </div>
    <div class="col-1">
        13
    </div>
</div>

宽度最大就是12等份，一旦col总宽度超出12，多的就会跑到下一行去。

当然不只可以填入col-1，也可以填入其他数字、玩看看不同排法

...
<div class="row">
    <div class="col-1">01</div>
    <div class="col-2">02</div>
    <div class="col-3">03</div>
    <div class="col-4">04</div>
</div>
...

bootstrap的程序码透过flex排版、并写死宽度比例来达成 col-1 ~ col-12 效果的