從零認識Bootstrap基礎功能

• bootstrap studio

bootstrap studio新增專案

說明：

顧名思義就是容器，建立於body置中，可說是建立一個網頁排版的第一步。類似設定內容的大範圍。

bootstrap中的區塊功能，本身不具任何意義。但有了container才能延伸輸入row和col

container-fluid是強制滿版，可於bootstrap右方的options中打開。

若是建立一個網站，最好都在1920*1080的環境下進行。否則在自適應或是用瀏覽器觀看網站時，右方會有個大白框。

這種情況下基本上只能重做，因為屬於bootstrap內的小問題。

---

說明：

垂直區塊，不停重複向下增加。

存在於container之中，和col之間沒有絕對的上下層關係。但是一層row下面不能在沒有col的情況下就再次建立一個row。

---

說明：

水平區塊，不停重複向右增加。

存在於container之中，和row之間沒有絕對的上下層關係。但是一層col下面不能在沒有row的情況下就再次建立一個col。

---

進階使用：

l 說明1：

col-md-1，col-瀏覽器尺寸-col的數量

瀏覽器尺寸在bootstrap裡面分為：**XL / LG / MD / SM / XS ，意思為在指定的瀏覽器尺寸內，我希望呈現的col的數量。(一旦數量改變，col的大小也會隨之改變，這也是種自適應效果。)

但是現在bootsrap裡的XS，不需要另外寫上XS，只需要輸入col-數量，即是XS的效果。

一個container裡面基本上最多就是12個col(橫向)

這個語法就是在分別瀏覽器大小裡面，強制col保持一定的尺寸，否則都會任由瀏覽器拉長

Col-md-1 裡面的-1表示的就是十二分之一

---

l 說明2：

col一行內最多可以有12個，-1就是1/12，-6就是2/12，-12就是12/12滿版。基本上就是，12÷希望呈現的col數量=class name的”-x”

綜合運用1：

左邊圈起來這樣有距離分隔的兩個col (icon和文字是分別兩個col)，會需要製作出這樣的效果是為了讓縮小瀏覽器尺寸時，即使不換行也能保持一定的比例。

要做出這樣的兩個col的距離差(一短一長)，不能去調整col的width

可以說是width和height在任何地方，能不調就不要去調。

因為自適應上較麻煩。

Col的class name是可以個別分開設定的，不需要每個都用一樣的數值。

例如icon 的 col是使用： col-md-1 col-sm-1 col-1

文字的icon是保留原本的預設值

以上就是做出範例圖中的分別效果。

綜合運用2
可以靈活運用col的class name強制固定住自適應時的變化，圖中效果是希望紅色字體靠左對齊，綠色字體靠右對齊，不要換行及變形。

這時候兩者的class name 都修正成了：col-6 col-sm-6 col-md-6 ，再把col的文字設定靠左及靠右。

自適應時，文字就能保持位置不變形不換行。

這樣的分別效果對於自適應很有幫助。

若是縮小瀏覽器時，希望此col能夠換行時

範例：

在一般長幅的瀏覽器下看起來沒什麼問題，但若縮小瀏覽器大小或者以手機瀏覽網頁時，會呈現下方圖中的樣子

縮小後兩個col的都擠在一起。不但圖片看不清楚，文字的段落也亂七八糟的。 這時候如果有設定col的class name，則是以下效果。

---

說明：

假設一個row已於col之中的情況下，希望此row與此col中心點對齊。應該點擊上層的col設定，右方options使用Vertical Align的center效果。

一般希望指定的物件有指定效果，都是從上一層設定。

也可以善用Font的置中文字效果，雖然說是Font但並不是只有文字會居中，假設一個col中有放置一張圖片，在此效果中圖片也是會居中對齊的。包括其他物件也通用。

---

說明：

Padding是類似內縮效果

是從父物件調整數值，針對內部的子物件進行間距，是內部物件會被擠壓。

Margin是類似外擴效果

針對外部的物件進行間距，是推開的效果。

用於排版留白非常有幫助

範例

圖中為一個滿版container的padding調整

圖中為一個row的margin調整，row本身之外的物件都算是Margin的範圍，包括其父物件也算是。子物件若沒調整padding則不受影響。

不論是padding或是Margin都能夠調整至負值

---

說明：

一般而言就是最上方和最下方的區塊物件，作用和container差不多。

最開始的header是不會綁定在最上方的，若是想要最上方或最下方的橫幅隨著滾輪滑動移動得自行設定class name.

Class name 綁定最上方語法為：fixed-top

Class name 綁定最下方語法為：fixed-bottom

任何物件基本上都能寫上此語法

---

說明：

即為上方欄位之選單列，bootstrap裡有內建很多模組，可選擇合適的套用。滑鼠移到上方時會出現預覽圖可參考。

Navbar的options中有內建FIX-TOP，可以在不需要自己改語法的情況下調整為綁定最上方。

另外一般情況下，Bootstrap的navbar是已經寫好自適應的縮放效果的。在xs的情況下會變成清單icon的形式呈現，這個在options內也可以調整。

一般情況下都是用Navbar即可

---

說明：

點擊一鏈接或按鈕後，縮呈現的浮空頁面。

排版上與一般container沒什麼差別，需注意的是鏈接方式。

建議視情況使用modal,因為modal是bt自己的物件，如果是要製作app建議分頁做html再請程式人員鏈接。（例如錯誤提示視窗等）

排版製作上，以完整內容為前提，其中內容功能能越簡單越好。

範例1：

預設最基礎之Modal的樣式

內建就已經有分層

範例2：以下為鏈接方式之順序

1. 排版後首先先輸入Modal之ID名稱，設定成功後左下方的名稱右方會出現 #ID名稱。（ID名稱可以使用“-”但不能有空格，會無法判別）
   
2. 回到欲鏈接之位置(button 或 link 等)，打開options先將鏈接位置指定至 #ID名稱
   
3. 打開欲鏈接位置(button 或 link 等)之Attributes，在key的位置輸入：data-toggle
4. 在Value的位置輸入：modal （不需要指定ID名稱，因為已經有透過URL指定位置了。此步驟是用於讀取modal）
   
5. 完成以上步驟即可成功讀取

---

說明：

先將整體頁面做好，來到想跳轉至的區塊上(最好是像container那樣大範圍之容器，不過其實任何物件都可以設置)，設置ID名稱。

回到可跳轉欲鏈接位置(button 或 link 等)，鏈接至跳轉區塊之 #ID名稱，即可跳轉。

ID名稱可以使用“-”但不能有空格，會無法判別

---

說明：

Button中可以放入圖片(jpg/png/gif)或者icon，文字內建可輸入。

Link不只能輸入文字，也可以將圖片建立在link之下。

但其實兩者效果差不多，Link是建立鏈接，Button是能夠指定連接或者是開關效果或是登入按鈕等等。

圖片都是建立於button或Link之下，不能將鏈接建立於圖片之下。若是想將現有圖片指定鏈接，只能靠css硬改，此做法不是很必要。只需再圖片上層建立鏈接即可。

基本上兩者都是透過URL進行連接。

---

說明：

- 進階1 ( block貼合 )

Button若是建立，是能夠滿版貼合上層物件，也就是貼合父物件。只要父物件縮放大小，button也會隨之變換。

此效果只需將Option裡的Block打開

不過不管Button上層是什麼父物件，只要將Block打開就會貼合上層，但若是父物件使用col會較好調整尺寸。並且自適應上效果較良好。

↑初始效果

↑滿版效果

---

- 進階2 (消除藍框 )

Button建立好後，進行預覽點擊時，發現就算改變Background了，也將外框色取消了，點擊後外面還是會有藍色框框。

這時候得在初始的style中Create貼上一段小語法。

.btn:focus { box-shadow: none; }

只需Create一次，所有的button藍框都會被取消。

---

- 進階3 ( Hover換圖 )

Hover於PC上瀏覽時，無非是利用滑鼠移動進行效果

在行動裝置上時只能用點擊的方式進行。

此效果用於button上時，可有點擊前後之效果。

於pc上或行動裝置上的語法不同，但重複輸入語法並不會衝突。

---

滑鼠移入時：(於buton下的img中輸入)

Key輸入：onmouseenter

Value輸入：this.src="圖片位置"

---

滑鼠移開時：

Key輸入：onmouseleave

Value輸入：this.src="圖片位置"

---

image在匯入時若是有建立資料夾，可用複製路徑的方式輸入位置。

在指定圖片上右鍵，copy path後即可貼上。

---

若是用於行動裝置上：

Key輸入：ontouch

Value輸入：this.src="圖片位置"

---

鏈接位置都能從option中設定，一般我們點擊一個鏈接都是在原本的頁面中跳轉，但是如果點到Target中的Blank後，點擊鏈接之後則會在新分頁開啟。

---

大多數物件的Option中都有Box shadow的選項

一般的shadow都是像下落式陰影一樣，唯一不同是能調整暈影的大小及坐標。

若是將Inset打開則是有內光暈效果。

使用範例：

設置在col中，將Inset打開並把col的背景色設為透明

最常見之下落式陰影效果

反轉使用亮色，也能製造出光暈效果

使用得當能有明確的分層效果

---

大多數物件的Option只要有Background就會有漸層效果，漸層效果基本上就是針對背景色去製作。


可以和背景圖同時出現

有分為線性和圈型的漸層，和AI差不多，每個顏色內也可以調整透明度。

可以疊加多項顏色

可以使用不止一個漸層，左邊可以像圖層一樣調整順序，注意：若是上層漸層沒有調整透明度是無法看到下方的漸層。

---

在製作UI的過程中一定會需要大量用到系統色，這時候不需要個別輸入或者複製色碼等。

選定一個顏色後可以善用Favorites color的功能，可以直接點選套用，保存一個顏色的同時會將他的透明度也一併儲存。