Bootstrap響應式前端框架筆記五——按鈕

Bootstrap響應式前端框架筆記五——按鈕

    Bootstrap中預設了default，primary，info，warning，danger和link6種按鈕風格，示例以下：

<p>Bootstrap中預設的按鈕樣式以下</p>
		<button type="button" class="btn btn-default">正常</button>
		<button type="button" class="btn btn-primary">重要</button>
		<button type="button" class="btn btn-success">成功</button>
		<button type="button" class="btn btn-info">信息</button>
		<button type="button" class="btn btn-warning">警告</button>
		<button type="button" class="btn btn-danger">危險</button>
		<button type="button" class="btn btn-link">連接</button>

效果以下：

能夠爲按鈕元素添加btn-lg，btn-sm，btn-xs類來進行按鈕尺寸的設置，示例以下：

<p>設置按鈕的大小</p>
		<button type="button" class="btn btn-default btn-lg">正常</button>
		<button type="button" class="btn btn-primary">重要</button>
		<button type="button" class="btn btn-success btn-sm">成功</button>
		<button type="button" class="btn btn-info btn-xs">信息</button>

效果以下圖：

使用btn-block類能夠將按鈕設置爲充滿整個父元素，示例以下：

<p>使用btn-block類能夠將按鈕設置爲充滿父元素</p>
		<button type="button" class="btn btn-default btn-block">正常</button>
		<button type="button" class="btn btn-primary btn-block">重要</button>

效果以下：

須要注意：當button標籤被用戶點擊時，按鈕周圍會出現邊框，若是不須要這個邊框，能夠使用a標籤來建立按鈕。

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/button.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536