引言
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.導航條
4.分頁
«
»
檸檬為大家準備了一些web、JavaScript、Bootstrap、CSS、Mybatis、HTML、jQuery的學習教程分享,希望可以幫助到大家。
獲取方式:請大家轉發+關注並私信小編關鍵詞:“資料”即可獲取前端自學教程一套。
閱讀更多 IT老農民 的文章
關鍵字: 前端 程序員 JavaScript