Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.
With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.
Bootstrap將會(huì)根據(jù)你的屏幕的大小來調(diào)整HTML元素的大小 —— 強(qiáng)調(diào) 響應(yīng)式設(shè)計(jì)的概念。
通過響應(yīng)式設(shè)計(jì)扫尖，你無需再為你的網(wǎng)站設(shè)計(jì)一個(gè)手機(jī)版的。它在任何尺寸的屏幕上看起來都會(huì)不錯(cuò)合住。
引入 BootStrap
<link rel="stylesheet" />
適配圖片
通過Bootstrap，我們要做的只是給圖片添加 img-responsive class屬性戳晌。這樣圖片的寬度就能完美地適配你的頁面的寬度了。
適配文本
使用Bootstrap，使文本居中菜枷，使它看起來更棒。 我們所要做的只是把text-center class屬性添加給 h2 元素叁丧。
<h2 class="red-text text-center">your text</h2>
適配按鈕
通常情況下啤誊，你的 button 元素僅與它所包含的文本一樣寬。通過使其成為塊級元素拥娄，你的按鈕將會(huì)伸展并填滿頁面整個(gè)水平空間蚊锹，任何在它之下的元素都會(huì)跟著浮動(dòng)至該區(qū)塊的下一行。
<button class="btn btn-block">Like</button>
添加Bootstrap的 btn-primary class 屬性到按鈕標(biāo)簽上稚瘾，使按鈕高亮牡昆。
<button class="btn btn-block btn-primary">Like</button>
Bootstrap自帶了一些預(yù)定義的按鈕顏色。淺藍(lán)色 btn-info 被用在那些用戶可能會(huì)采取的操作上摊欠。
<button class="btn btn-block btn-info">Info</button>
紅色btn-danger被用來提醒用戶該操作具有“破壞性”
<button class="btn btn-block btn-danger">Delete</button>
適配網(wǎng)格布局
class row 行
class col-md-* (中等屏幕適配)丢烘，col-xs-*(小屏適配)
- 填數(shù)字
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
Font Awesome
Font Awesome 是一個(gè)非常方便的圖標(biāo)庫。這些圖標(biāo)都是矢量圖形些椒，被保存在 .svg 的文件格式中播瞳。這些圖標(biāo)就和字體一樣，你可以通過像素單位指定它們的大小免糕，它們將會(huì)繼承其父HTML元素的字體大小赢乓。
引入
<link rel="stylesheet" />
給按鈕添加一個(gè)icon
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like<i class="fa fa-thumbs-up"></i></button>
</div>
