一個(gè)HTML的結(jié)構(gòu)
html<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> <!--導(dǎo)入js文件-->
<meta charset="utf-8"> <!--網(wǎng)頁(yè)編碼選擇utf-8字符集-->
<title>這是標(biāo)題</title>
<style>
/*這里是寫(xiě)css的*/
.a{ /*這表示對(duì)class為a的元素進(jìn)行css處理 這里的意思是設(shè)置外邊距為20px */
margin:20px;
}
</style>
<script>
//這里是你可以直接寫(xiě)js代碼的地方
</script>
</head>
<body>
<!--每個(gè)< >這樣的東西叫做一個(gè)標(biāo)簽，比如div就是一個(gè)框的標(biāo)簽，代表一個(gè)框的元素，h1代表的是大標(biāo)題 -->
<div class="a" id="myId">
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</div>
</body>
</html>
就是這個(gè)樣子的
導(dǎo)入Bootstrap
具體參考官網(wǎng)：https://v3.bootcss.com/
（目前中文官網(wǎng)貌似比國(guó)外的版本低，所以不太一樣，最好別混著用）
我們還是以上面的那個(gè)文件為例
在head里面引入一堆代碼
像這樣，直接從官網(wǎng)上剽
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
先別管，把這幾行放到你的head里去
在body里的操作
創(chuàng)建一個(gè)div標(biāo)簽并且讓其class="container"
然后所有的后續(xù)標(biāo)簽全部寫(xiě)在這個(gè)div里面
像這樣：
至此，你就可以開(kāi)心地使用bootstrap了
使用bootstrap
打開(kāi)剛才的網(wǎng)頁(yè)，好像沒(méi)有什么太大的變化？
但是你仔細(xì)看，這些字已經(jīng)不是在最左邊了，而是稍微被往中間放了，這其實(shí)就是Bootstrap開(kāi)始自動(dòng)幫你調(diào)整頁(yè)面了（而且這種頁(yè)面的調(diào)整是響應(yīng)式的）
無(wú)腦剽代碼
去官網(wǎng)上找到：組件 這里
選一個(gè)你喜歡的東西
比如我選的巨幕
然后我把下面的代碼復(fù)制了
直接粘貼到我的html文件里去
然后就可以用了：
自己寫(xiě)點(diǎn)字上去
如果你覺(jué)得這個(gè)不夠爽，那還有：
手寫(xiě)一個(gè)好看的導(dǎo)航欄是不是很累？
Bootstrap一鍵解決：
去官網(wǎng)的組件部分找到 導(dǎo)航欄
然后選一個(gè)你心儀的：
然后剽代碼：
雖然看起來(lái)很復(fù)雜但是都是一鍵剽的.....
然后保存，打開(kāi)：
done!
具體功能還需要自己實(shí)現(xiàn)
然后有些樣式出問(wèn)題了的話(huà)自己再調(diào)節(jié)一下就好了
無(wú)腦改樣式
我們都知道，原版的按鈕很丑
這么丑：
然而B(niǎo)ootstrap人家twitter的工程師已經(jīng)給你設(shè)計(jì)了好看的樣式了，你只需要加入短短一句代碼：像這樣：
然后：
就好多了
其他還有很多樣式，具體可以去官網(wǎng)的全局樣式那里看：
還是直接復(fù)制就可以了
因?yàn)闉g覽器不同可能按鈕不完全一樣（比如我上面的那個(gè)）
另外還有更高級(jí)的東西比如按鈕組，在組件部分里：
抄就對(duì)了
柵格系統(tǒng)
這個(gè)應(yīng)該算是Bootstrap里最難的部分了.....其實(shí)也很簡(jiǎn)單，只不過(guò)寫(xiě)不寫(xiě)得好看就是另外一回事了
在Bootstrap里
整個(gè)網(wǎng)頁(yè)實(shí)際上為了控制元素位置大小是被化成了很多個(gè)格子的
比如他規(guī)定，一行就有12個(gè)格子
那么柵格系統(tǒng)就是用來(lái)控制你元素的位置的
比如他的官網(wǎng)
你可以看到，他的總體結(jié)構(gòu)是這樣樣子的：
每個(gè)框框就是一個(gè)div標(biāo)簽，然后上面導(dǎo)航欄是一個(gè)長(zhǎng)長(zhǎng)的div，中間寫(xiě)著組件的那段是一個(gè)長(zhǎng)度長(zhǎng)一些的占了整整一排的div框框，然后下面你可以看到左邊是說(shuō)明，右邊是目錄，大概比例為2：1，其實(shí)就是下面總體部分就是個(gè)大的div，里面分為兩個(gè)小的div框框，其中左邊那個(gè)的寬度是8，右邊的那個(gè)寬度是4。
