Basic Bootstrap

這兩天把官方的文件看一些，紀錄目前理解且常用的範圍，後續會持續做筆記。 (2019/05/04)

content
  Introduction
  Structure
  bottom

Introduction

Bootstrap 是一個用於快速開發Web 且基於HTML、CSS、Javascript的網站前端框架， 同時也包含Sass 和 mixins、響應式網格系統， 是開源工具包。內部有許多已經包好的套件，可以直接透過class或其他定義的屬性進行套用，比起手刻的方式，可以大幅縮短開發時間。

官網介紹

因為是基於jQuery的 plugins，所以必須要先載入jQuery在載入其他檔案才能運作，官網有提供許多載入方式，例如: Package managers 、 CDN。

Structure

Top
Layout
Containers
content

Layout

Bootstrap提供了一個帶有網格系統(Grid System)的結構。

Containers(容器)

容器是 Bootstrap 最基本的排版元素，預設可變寬度為 width:100% ，使用時只要添加class裡面就可以觸發效果，容器分兩種。

container 固定寬度(帶有margin、padding的寬)

<div class="container">
     <h1>Hello world</h1>
</div>

打開瀏覽器查看元素

container-fluid 滿版的寬

<div class="container-fluid">
  <h1>Hello world</h1>
</div>

打開瀏覽器查看元素

Responsive breakpoints(響應式斷點)

在官網文件裡面可以看到針對5個不同屏幕的大小所設定的響應式斷點

How it works?

因為採用Flexbox去建立不同尺寸的網頁版型，且以行動裝置優先，包含十二欄系統、還有很多預定義的 class，自己在實作的時候幾乎都是動html的標籤，然後就........神奇地完成很多事情。以下範例都是取自官網。

上面例子可以知道預定義網格在不同設備上建立了三個等寬度的column，3個<div>標籤被定義在container內，各自佔總寬度1/3，也就是各佔4個column(全部為12格)。

.row 這個class 作為一個水平排列的群組，確保所有column正確的排成一行。

col-的 Class 表示希望使用的column數量，如: col-3 表佔3個column

Gird Option:

Bootstrap 使用em 或 rem 定義尺寸，但網格中斷點和容器寬度的尺寸是px，主因是 viewport 寬度按 pixel 計算，並且不隨字體大小改變。

呈現Bootstrap在不同的裝置上的運作

可以透過Gird選擇不同螢幕大小做RWD，選擇要得排版方式。

Layout預先設定的部分:

1.自動佈局的columns

2.等寬:

無設定column的寬度則自動分布等寬的大小

寬度設置的部分可分為

針對單一column設置寬度 (Setting one column width)

col-6表是佔同一個row的1/2

變動的寬度內容( Variable width content)

使用 col-{breakpoint}-auto這個class可使某一個column依內容撐開大小。

等寬度多行

希望多行分開且等寬，可在中間加入.w-100 建立等寬度

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