WEB！讀完本文讓你豁然開朗！前端UI框架Bootstrap超級簡單

引言

Bootstrap是一個簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。它把網站頁面開發常用的一些樣式、組件、特效集中在一起，讓開發者可以直接使用。通過它，可以很輕鬆地寫出優雅的界面，提高頁面開發的效率。有了它，後端程序猿也能寫出好看的頁面了。

但有一點需要強調下，使用 Bootstrap 並不代表不用寫 CSS 樣式，而是不用寫絕大多數大家都會用到的樣式。

一、安裝

在頁面中引入Bootstrap的css和js文件,我們直接使用官方提供的cdn即可。

<link>

<link>

二、使用

Bootstrap的每個樣式、組件都對應一個或多個class。 比如藍色按鈕的代碼為：

<button>（首選項）Primary /<button>

它在頁面上的效果為：

定義它的樣式的就是btn和btn-primary這兩個類。

如果對這些組件不熟悉的話直接去官網（地址https://v3.bootcss.com/css/），把我們想要的組件代碼copy下來，放進頁面中在進行調整。

三、佈局

Bootstrap定義了一個柵格系統，幫助我們對頁面元素進行排版和佈局。如圖所示：

以PC端為例子，它把整個屏幕橫向分成12等分，每個"row"表示一行，“row”裡面的每個“col-md-1”表示十二分裡的一份，“col-md-”後面的數字表示這個頁面元素佔這一行多少份。

打個比方，如果我們要設置兩個板塊，左邊的版塊寬度佔25，右邊的版塊佔75%，可以這樣寫：

四、常用樣式

1.按鈕

<button>（默認樣式）Default/<button>

<button>（首選項）Primary/<button>

<button>（成功）Success/<button>

<button>（一般信息）Info/<button>

<button>（警告）Warning/<button>

<button>（危險）Danger/<button>

<button>（鏈接）Link/<button>

2.標籤頁

3.導航條