Day25 Bootstrap简介

今天我们要来介绍Bootsrap，那这是甚麽呢 ?他是一种框架(frame)，在他所制定的规则里，能快速让使用者开发出网页，

首先我们先到Bootstrap的网站，然後按下Get start。
往下滑以後就会看到我们刚开始的样本!

将他copy起来复制到你的html档案里。你一开始的框架设定就完成罗!是不是十分快速。

Bootstrap左边有非常多的范例选项，教学怎麽使用这些套件，有时间的话非常推荐大家去了解跟练习。

而今天我们要教学利用Bootstrap快速制作一个三栏到四栏的版面。我们需要先认识Grid。

Grid

Grid就是我们的网格系统，其实就是我们之前所学到的flex，Bootstrap的网格系统就是使用容器的概念把行、栏布局与对齐。

我们要认识新的属性。以及他的作用为何?

• Containers: 最外层的容器(固定宽度)，若是要满版的话使用 .container-fluid。
• Rows: 水平排列整齐成一行。确保所有栏在行上排好。
• 栏包含水平的 padding，以产生单个栏之间的沟槽，但是你可以通过 .row 上的 .no-gutters 从行中移除边缘 margin，从栏中移除填充 padding。

想像一下每一行的大小都是12，你的栏位数可以自由分配这12个大小。

例如:
你有三栏，你想要他们都一样大、就可以在.col设置4、4、4。
若是你希望中间的宽度比较大，就可以在.col设置3、6、6。

到这里可能还是有些模糊，就让我们实际看看例子!

例子: 三栏排版

首先要记得把Bootstrap的框架复制过来，不然是没有效果的喔!

1. 先建立一个外容器countainer
2. 建立水平列群组row
3. 建立三栏内容.col*3
4. 把内容img跟段落p放到col里面
5. 图片设成满版，加上class="img-fluid"，设定CSS .col img为图片宽度100%。

    .col img{
        width: 100%;
    }
        
        
    <div class="container">
        <div class="row">
            <div class="col-4">
                <img src="https://picsum.photos/300/200?random=1" alt=""   class="img-fluid">
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt nisi nemo, autem quas soluta dignissimos rerum dolorum reiciendis voluptatem fugit corrupti dolorem ullam necessitatibus. Saepe expedita harum iure unde magnam?
                </p>
            </div>
            <div class="col-4">
                <img src="https://picsum.photos/300/200?random=2" alt=""   class="img-fluid">
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt nisi nemo, autem quas soluta dignissimos rerum dolorum reiciendis voluptatem fugit corrupti dolorem ullam necessitatibus. Saepe expedita harum iure unde magnam?
                </p>
            </div>
            <div class="col-4">
                <img src="https://picsum.photos/300/200?random=3" alt=""   class="img-fluid">
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt nisi nemo, autem quas soluta dignissimos rerum dolorum reiciendis voluptatem fugit corrupti dolorem ullam necessitatibus. Saepe expedita harum iure unde magnam?
                </p>
            </div>
        </div>
    </div>

这样是不是超快速又超级轻松呢!那今天Bootstrap的介绍就到这罗。