HTML開始5

下面我們來寫一下長條的按鈕

<button class="btn btn-block">Like</button>

其中block的意思：大塊的

當然這也是在Bootstrap下完成的

（渣渣理解，如有錯誤，請大神不吝賜教）

在Bootstrap下我們可以改變按鈕的顏色

btn-primary：按鈕為深藍色

<botton class="btn btn-block btn-primary">Like</botton>

這段代碼代表著一個深藍色文本為Like的長按鈕

btn：按鈕

btn-block：大塊的，長

btn-primary：深藍色

（渣渣理解，如有錯誤，請大神不吝賜教）

Bootstrap中自帶了一些預定義的按鈕顏色。淺藍色btn-info被用在那些用戶可能會採用的操作上

栗子:

<botton class="btn btn-block btn-info">Like</botton>

info：信息，情報

淺藍色長按鈕

（渣渣理解，如有錯誤，請大神不吝賜教）

Bootstrap中紅色btn-danger被用來提醒用戶該操作具有「破壞性」，例如：刪除

栗子：

<botton class="btn btn-block btn-banger">Delete</botton>

danger：危險

紅色長按鍵 刪除

（渣渣理解，如有錯誤，請大神不吝賜教）

Bootstrap使用一種響應式網格布局——可輕鬆實現將多個元素放入一行並指定各個元素的相對寬度的需求。

這張圖表顯示了Bootstrap的12列網格布局是如何器作用的：

class屬性col-md-*

md表示medium（中等的）

*：指定了這個元素所佔的列寬。

通過這個圖標的屬性設置克制，在中等大小的屏幕上，元素得到列寬被指定了

還有一種是適用於小屏幕的使用的是col-xs-*

xs：是extra small的縮寫

當div元素設置了class屬性row（行）之後，那幾個按鈕便可嵌入其中

栗子：

<div 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>

（渣渣理解，如有錯誤，請大神不吝賜教）

在Bootstrap下

img-responsive:使圖片大小適應屏幕尺寸

text-primary：使文本顏色辦成淡藍色

（渣渣理解，如有錯誤，請大神不吝賜教）

你可以用span（跨度，範圍）標籤來創建行內元素

例如：使用.btn-block來創建填滿整行的按鈕

我們可以通過使用span元素，來把幾個元素放在一起

我們也可以用此為一個元素的不同部分指定樣式

栗子：

<p>Top 3 things cats <span class="text-danger">hate</span></p>

這段代碼會使hate變成紅色

（渣渣理解，如有錯誤，請大神不吝賜教）