Bootstrap
Bootstrap 是預撰寫的 CSS 和 JavaScript 代碼段（chunk）的集合，
引入
任何 Web 應用，都可以通過添加如下代碼到 HTML 的 head 標簽中來引入 Bootstrap ，
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div >
<!-- something -->
</div>
其中 rel 表示該 link 用于樣式表，href 表明 Bootstrap 的地址，
或者可以把 Bootstrap 作為 JavaScript 庫引入，在 body 標簽底部放入 script 標簽，
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
其中 src 表示 Bootstrap 的地址，
Fluid
Bootstrap 會根據螢屏大小來動態調整 HTML 元素的大小————因此稱為 Responsive Design（回應式設計），
回應式設計 Responsive
現在通過 Bootstrap，只需要為 image 標簽上設定 class 屬性為 img-responsive ， 就可以讓它完美地適應頁面的寬度了，
<img src="">
文本
居中
只需要將元素的 class 屬性設定為 text-center 就可以實作，
<h2 >CatPhotoApp</h2>
顏色
使用 text-XX 來表示文本顏色，其中 XX 和下列按鈕顏色，相同.
// Primary // blue
// Secondary // grey
// Success // green
// Danger // red
// Warning // yellow
// Info // skyblue
// Light // whie
// Dark // black
// Link // anchor
按鈕
Bootstrap 的 button 元素有著獨有的、比默認 HTML 按鈕更好的樣式風格，
<button >Like</button> // white color
塊級元素按鈕
通過為按鈕添加 class 屬性 btn-block 使其成為塊級元素，按鈕會伸展并填滿頁面的整個水平空間，后續的元素會流到這個塊級元素的下方，即 "另起一行"，
<button >Like</button>
按鈕不同主題
btn-primary class 的顏色是應用的主要顏色， 這樣 “突出顯示” 是引導用戶按部就班進行操作的有效辦法，primary 被稱為 modifier 修改器，因為這部分是可以改動的，
修改器改變了組件的視覺樣式，
<button >Like</button>
// blue color
可選操作樣式
Bootstrap 有著豐富的預定義按鈕顏色， 淺藍色的 btn-info class 通常用在備選操作上，
<button >Info</button>
// 淺藍
危險
紅色 btn-danger class 用來提醒用戶此行為具有破壞性
<button >Delete</button>
柵格系統
Bootstrap 經常使用 container 作為柵格系統的父/根元素，
Bootstrap 具有一套 12 列的回應式柵格系統，可以輕松的將多個元素放入一行并指定它們的相對寬度， Bootstrap 的大部分 class 屬性都可以應用在 div 元素上，
Bootstrap 的列寬取決于用戶的螢屏寬度， 比如，手機有著窄螢屏而筆記本電腦有者更大的螢屏.
就拿 Bootstrap 的 col-md-* class 來說， 在這里， md 表示 medium （中等的）， 而 * 是一個數字，說明了這個元素占有多少個列寬度， 這個例子就是指定了中等大小螢屏（例如筆記本電腦）下元素所占的列寬度，
使用 col-xs-* ， 其中 xs 是 extra small 的縮寫 (比如窄屏手機螢屏)， * 是填寫的數字，代表一行中的元素該占多少列寬，
斷點，類前綴和維度對應：
- Extra small - xs - < 576px , 該項為默認值，因為 Bootstrap 是 mobile-first 的，
- Small - sm - >= 576px
- Medium - md - >= 768px
- Large - lg - >= 992px
- Extra large - xl - >=1200px
- Extra extra large - xxl - >= 1400px
<div >
<div >
<button >Like</button>
</div>
<div >
<button >Info</button></div>
<div >
<button >Delete</button></div>
</div>
行內元素
使用 span 標簽來創建行內元素， 可以把不同的元素放在同一行，甚至能為一行的不同部分指定不同樣式，
<p>Top 3 things cats <span >hate:</span></p>
Font-Awesome
Font Awesome 是一個非常便利的圖示庫， 通過 webfont 或矢量圖的方式來使用這些圖示， 這些圖示就和字體一樣， 不僅能通過像素單位指定它們的大小，它們也同樣會繼承父級 HTML 元素的字號，
引入:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
i 元素原本是用來表示斜體文字內容的；不過現在，用它來表示圖示也很常見， 只需要為 i 元素添加相應的 class 就可以讓它展示圖示，比如：
<i ></i>
<i ></i>
<i ></i></i>
表單
單選按鈕
Bootstrap 的 col-xs-* class 也可以用在 form 元素上！ 這樣就可以在不關心螢屏大小的情況下，將的單選按鈕均勻的平鋪在頁面上，
<div >
<div >
<label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
<div >
<label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
<div >
<label><input type="checkbox" name="personality"> Loving</label></div>
<div >
<label><input type="checkbox" name="personality"> Lazy</label></div>
<div >
<label><input type="checkbox" name="personality"> Crazy</label></div>
</div>
復選框
Bootstrap 的 col-xs-* 可應用于所有的 form 元素上，包括復選框！ 這樣就可以不必關注螢屏大小，均勻地把復選框放在頁面上了，
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
輸入框
可以在 submit button 元素內加上 <i ></i>，來添加 Font Awesome 的 fa-paper-plane 圖示，
所有文本輸入類的元素如 <input>，<textarea> 和 <select> 只要設定 .form-control class 就會占滿100%的寬度，
<input >
標題
<h3 >jQuery Playground</h3>
行
<div >
<h3 >jQuery Playground</h3>
<div >
<div ></div>
<div ></div>
</div>
</div>
Wells
Bootstrap 有一個叫作 well 的 class，作用是使界面更具層次感，
<div >
</div>
記住，可以這樣給一個元素設定 id：
<div id="center-well">
給左邊的塊設定 id 為 left-well， 給右邊的塊設定 id 為 right-well，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509528.html
標籤：Html/Css
下一篇：前端ES6 面試過關寶典