Jw的學習大小事
Home
Archives
Tags
Categories
Link
About
List
avatar
文章
74
標籤
57
分類
28
Home
Archives
Tags
Categories
Link
About
List
目錄
  1. 1. Bootstrap
    1. 1.1. 前端框架，含HTML、CSS及JS等內容的框架，可以快速開發出一個網頁版型(包含響應式網頁)。
    2. 1.2. 簡單介紹一下樣式寫法：
      1. 1.2.1. 文字
        1. 1.2.1.1. 對齊
        2. 1.2.1.2. 置右
        3. 1.2.1.3. 字體
        4. 1.2.1.4. 大小寫
      2. 1.2.2. 文字顏色
        1. 1.2.2.1. 綠
      3. 1.2.3. 去除文字類別效果
      4. 1.2.4. 背景色
      5. 1.2.5. 背景梯度(Background gradient)顏色漸層
      6. 1.2.6. 邊界
        1. 1.2.6.1. 四邊都有
        2. 1.2.6.2. 只有上邊界
        3. 1.2.6.3. 沒有邊界
        4. 1.2.6.4. 除上邊界沒有其他三邊有
      7. 1.2.7. 邊界顏色
      8. 1.2.8. 邊界角度(Border-radius)
        1. 1.2.8.1. 四周都圓角
        2. 1.2.8.2. 圓形
        3. 1.2.8.3. 無圓角
        4. 1.2.8.4. 上方圓角
      9. 1.2.9. 清除浮動(Clearfix)
      10. 1.2.10. display 屬性設定
      11. 1.2.11. 隱藏元素也不佔空間
      12. 1.2.12. 顯示陰影
      13. 1.2.13. Close icon x
  2. 2. 網格系統
    1. 2.1. Bootstrap 的 Grid System。規則如下：
      1. 2.1.1. 結構依序為如下：container -> row -> column
      2. 2.1.2. Column命名規則：
      3. 2.1.3. 螢幕尺寸大小上調整不同寬度
      4. 2.1.4. 隨著內容變動寬度
      5. 2.1.5. 間距拿掉
      6. 2.1.6. 垂直對齊
      7. 2.1.7. 水平對齊
      8. 2.1.8. Spacing
  3. 3. 使用 flexbox
  4. 4. 表單
  5. 5. 卡片(Cards)
  6. 6. 範例
Bootstrap 簡單介紹
|Bootstrap
字數總計:1.5k|閲讀時長: 6 分鐘
|閲讀量:

Bootstrap

前端框架，含HTML、CSS及JS等內容的框架，可以快速開發出一個網頁版型(包含響應式網頁)。

簡單介紹一下樣式寫法：

文字

對齊

text-justify、text-center

置右

text-right

字體

font-weight-bold

大小寫

text-capitalize

文字顏色

綠

class="text-success"

去除文字類別效果

class="text-decoration-none"

背景色

bg-primary

背景梯度(Background gradient)顏色漸層

bg-gradient-warning

邊界

四邊都有

border

只有上邊界

border-top

沒有邊界

border-0

除上邊界沒有其他三邊有

border-top-0

邊界顏色

class="border border-primary"

邊界角度(Border-radius)

四周都圓角

class="rounded"

圓形

rounded-circle

無圓角

rounded-0

上方圓角

rounded-top

清除浮動(Clearfix)

class="clearfix"

display 屬性設定

class="d-block" // display: block

class="d-inline" // display: inline

Code
1
2
3
4
<div class="bg-danger m-5 p-2 text-light d-inline">d-inline</div>
<div class="bg-warning m-5 p-2 text-secondary d-inline">d-inline</div>
<span class="bg-danger m-5 p-2 text-light d-block">text-danger</span>
<span class="bg-warning m-5 p-2 text-secondary d-block">text-secondary</span>

隱藏元素也不佔空間

class="d-none"

顯示陰影

class="shadow"

Close icon x

<button type="button" class="close" arialabel="Close">

詳細樣式、元件、模板請參考網站 https://getbootstrap.com/docs/4.0/utilities

網格系統

Bootstrap 的 Grid System。規則如下：

結構依序為如下：container -> row -> column

所有的「row」都要放在「container」之下，「col-\」(column) 要放在「row」之下。column 為最小單位的方格，且有間格將彼此格開。由「row」校正 colume 左右多出來的左右 padding。基本上一個 row 放置 12 個 column，若有一個 row 超過 12 個 column，則會斷行放置多出來的 column。*

Container 提供方式來置中你的內容，當你的容器寬度是固定的使用 .container 如果想要滿版則使用 .container-fluid。

Column命名規則：

phone (576px~767px) = .col-xs-* // 預設斷點 為數字 1~12
Small grid (≧768px) = .col-sm-\ // 平板
Medium grid (≧992px) = .col-md-* // 電腦
Large grid (≧1200px) = .col-lg-* // 電腦(大型)
.col-md-offset-* // 位移

ps. 調整不同視圖下的欄寬度，在 Bootstrap 4 中 .col-xs-* 已消失，取而代之的 .col-* 在語意上代表的差別是「從最小設備到最大設備都相同的網格」。

只要在 row 中，直接加入 col 後，就會自動將 row 的 div 等分，比方要作三等份，以前需寫 col-md-4 ，但現在只要 col 重覆三次，無需再特別註明裝罝與數量，還可以混用，將 col 後再加數量。

範例一

Code
1
2
3
4
5
6
7
<div class="container">
 <div class="row">
    <div class="col">a</div>
    <div class="col-6">b</div>
    <div class="col">c</div>
 </div>
</div>

範例二

Code
1
2
3
4
5
6
7
8
9
10
11
<div class="wrap"> or <div class="container">
	<div class="row">
	    <div class="col-sm-8">col-sm-8</div>
	    <div class="col-sm-4">col-sm-4</div>
	</div>
	<div class="row">
	    <div class="col-sm">col-sm</div>
	    <div class="col-sm">col-sm</div>
	    <div class="col-sm">col-sm</div>
	</div>
</div>

螢幕尺寸大小上調整不同寬度

同一 column 加上多的 class 來調整版面：

Code
1
2
3
4
5
6
7
<div class="row">
  <div class="col-sm-4 col-md-8">.col-sm-4 .col-md-8</div>
  <div class="col-sm-8 col-md-4">.col-sm-8 .col-md-4</div>
</div>
<!-- 當螢幕尺寸為 md 以上時會有 8:4 來顯示 
     當螢幕尺寸為 sm 時會以 4:8 來顯示
     當螢幕尺寸小於 sm 時會換行顯示 -->

隨著內容變動寬度

使用 col-{breakpoint}-auto 同時搭配上 水平對齊 可以讓 column 的寬度隨著內容而改變。

間距拿掉

.row 加入:

no-gutters

e.g.
<div class="row no-gutters">

垂直對齊

.row 或 .col 加入:

align-items-start // 列或欄垂直的置頂
align-items-center // 列或欄垂直的置中
align-items-end // 列或欄垂直的置底

水平對齊

.row 加入:

justify-content-start // 置左
justify-content-center // 置中
justify-content-end // 置右
justify-content-around // 是讓該列內的欄平均排列在該列
justify-content-between // 是讓列類的欄靠邊排列在該列

Spacing

指元素的 margin 跟 padding 。

m：margin
p：padding
t：top
r：right
b：bottom
l：left
x：-right和-left
y：-top 和 -bottom

m：margin
mt：margin-top
mr：margin-right
mb：margin-bottom
ml：margin-left
mx：margin-right 和 margin-left
my：margin-top 和 margin-bottom

p：padding
pt：padding-top
pr：padding-right
pb：padding-bottom
pl：padding-left
px：padding-right 和 padding-left
py：padding-top 和 padding-bottom

Bootstrap 4 裡 Spacing 基本的單位就是 1rem。
1rem = 16px，結合上述的代碼。就是代表要多少的內距或外距。

0：0 1rem = 0px
1：0.25 1rem = 4px
2：0.5 1rem = 8px
3：1 1rem = 16px
4：1.5 1rem = 24px
5：3 1rem = 48px
auto: margin 設定為 auto

e.g.

mb-3 = margin-bottom：16px
pt-4 = padding-top：24px
m-1 = margin：4px;

使用 flexbox

class="d-flex flex-column"

flex-column：直排上到下排列內元素
flex-row：橫排左至右排列內元素

表單

class="form-control"

卡片(Cards)

Cards 是 Bootstrap 4 的新組件，使用 Flexbox 建構，有瀑布流樣式(Masonry-like)可供使用。卡片可支援各種內容，包括圖像、文字內容、清單、連結等。

ps. 瀑布流樣式(Masonry-like): 將卡片包在 .card-columns 中，就會讓卡片呈現瀑布式排列。

範例

套用 Bootstrap 4 的 class

Code
1
2
3
4
5
6
7
8
9
10
HTML

<div class="box2 bg-danger m-5"></div>

CSS

.box2{
 width: 100px;
 height: 100px;
}

長寬各 100px 的 #dc3545 色正方型，然後四邊各有 48px 的外距。

參考：
https://medium.com/@weilihmen/bootstrap-初學介紹-靜態篇-f20500235b33
https://bootstrap.hexschool.com
https://getbootstrap.com
https://cythilya.github.io/2015/04/07/bootstrap-grid-system/
https://5xruby.tw/posts/bootstrap-4/
https://ithelp.ithome.com.tw/articles/10228808?sc=iThomeR
https://pjchender.blogspot.com/2017/06/bootstrap4-grid-system.html

Bootstrap
繁