自學Bootstrap的時候，是跟著官網文檔學的。官網寫的其實很清楚完整，但對於前端的初學者來說，其實還是有很多零零散散的知識點可以除去暫時不看的。
【相關影片推薦：Bootstrap教學】
所以在此將其中的知識點刪刪減減的做了一個小總結，希望在「入門」這個方面能幫到你。
bootstrap筆記-起步CSS基礎
一、開始
#1.引用
透過官網下載，或透過bootCDN提供的CDN服務，又或透過cdnjs提供的CDN服務引用一下文件
bootstrap.min.css bootstrap.min.js
在引用bootstrap.min.js之前需要引用jquery
jquery.min.js
CDN服務
https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js
引用我們文件的時候，建議寫在body標籤內容的最下面
… <bdoy> … <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> </body> …
2.移動優先
為了確保適當的繪製和觸控螢幕縮放，需要在
之中添加viewport 元資料標籤。<meta name="viewport" content="width=device-width, initial-scale=1">
在行動裝置瀏覽器上，透過為視窗（viewport）設定 meta 屬性為 user-scalable=no 可以停用其縮放（zooming）功能。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
如果想弄清楚以上程式碼的具體內容，想完全搞清楚移動像素的問題。推薦去慕課網看一下WEB移動的課程
二、CSS排版佈局
1.佈局容器
內容容器，寬度進行了固定（左右有間距）
<div class="container"></div>
內容容器，寬度為100%
<div class="container-fluid"></div>
2.柵格系統
柵格化系統，將螢幕寬平均分成了12份，div佔多少份，就在class裡面寫什麼數字
比如
class="col-md-12"
針對於不同的螢幕大小，分成了四大類，分別是：
.col-lg-大屏幕 >1200px .col-md-中等屏幕 992px~1200px .col-sm-小屏幕 750px~992px .col-xs-超小屏幕 <750px
html:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
<div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
<div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
<div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
</div>
</div>css:
<style>
div[class^="col"]{
outline-offset: 1px;
outline:1px solid red;
}
</style>3.排版-標題
<mark></mark> 标记标签 <small></small> 小文本标签/副标题标签
4.排版-程式碼
<kbd></kbd> 标记通过键盘输入的内容
<code></code> 标记代码内容5.表格
在傳統的table>tr>td的基礎上添加類別名稱即可使用bootstrap提供的表格特效
基礎表格：
<table class="table"></table>
在< ;b>.table的基礎上，再增加以下下類別名，可增加對應的效果
.table-bordered 带边框的 .table-striped 带条纹的 .table-hover 鼠标悬停 .table-condensed 紧缩表格 单元格内的padding值减半
狀態類別 透過這些狀態類別可以為行或儲存格設定顏色
.active 滑鼠懸停在行或儲存格上時所設定的顏色.success 滑鼠停留在行或儲存格上時所設定的顏色.success 標示成功或正向的動作.info 標示普通的提示訊息或動作.warning 標示警告或需要使用者註意.danger 標示危險或潛在的帶來負面影響的動作
6.情境顏色（文本，按鈕，背景等等）
顏色在之後的學習中很多地方都會用到
-default; 默认
-primary; 首选项
-success; 成功（一般用于表达积极向上）
-info; 信息
-warning; 警告
-danger; 危险7.按鈕
通常我們用input或button標籤寫表單按鈕，也會用a標籤仿寫按鈕。
<a class="btn btn-danger" href="">百度一下</a>
<input class="btn btn-danger" type="button" value="按钮2">
<button class="btn btn-danger">按钮3</button>按鈕有以下幾種皮膚，或者說是主題，或簡單稱之為顏色吧：
btn-default; 默认 btn-primary; 首选项 btn-success; 成功（一般用于表达积极向上） btn-info; b 信息 btn-warning; 警告 btn-danger; 危险 btn-link; 连接（a标签的方式）
8.三角符號
透過使用三角符號可以指示某個元素具有下拉式選單的功能。注意，向上彈出式選單中的三角符號是反方向的。
<span class="caret"></span>
9.關閉按鈕
透過使用一個象徵關閉的圖標，可以讓模態框和警告框消失。
<button type="button" class="close" >
<span>×</span>
</button>
以上是bootstrap教程整理-起步+CSS基礎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
