Bootstrap響應式前端框架筆記十三——警告框與進度條

Bootstrap響應式前端框架筆記十三——警告框與進度條

    在Bootstrap中，使用alert相關類能夠實現簡潔的警告框控件，示例以下：

<p>alert相關類能夠實現簡潔的警告框樣式</p>
		<div class="alert alert-success">成功風格的警告框</div>
		<div class="alert alert-info">詳情風格的警告框</div>
		<div class="alert alert-warning">警告風格的警告框</div>
		<div class="alert alert-danger">危險風格的警告框</div>

效果以下圖所示：

警告框上面也能夠添加有一個關閉按鈕，示例以下：

<p>帶關閉按鈕的警告框</p>
		<div class="alert alert-warning alert-dismissible">可關閉的警告框
		<button type="button" class="close">
			<span aria-hidden="true">&times;</span>
		</button>
		</div>

效果以下：

警告框中也能夠添加跳轉連接，示例以下：

<p>帶連接的警告框</p>
		<div class="alert alert-danger">
			您輸入的用戶名或密碼有誤
			<a class="alert-link" href="#">找回密碼</a>
		</div>

效果以下圖所示：

    關於進度條組件，Bootstrap中使用progress類來建立，示例以下：

<p>默認的進度條組件</p>
		<div class="progress">
			<div class="progress-bar" style="width: 60%;">
			</div>
		</div>

效果以下：

進度條組件也支持多種樣式，示例以下：

<p>各類風格的進度條組件</p>
		<div class="progress">
			<div class="progress-bar progress-bar-danger" style="width: 60%;">
				60%
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-info" style="width: 60%;">
				60%
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-success" style="width: 60%;">
				60%
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-success" style="width: 60%;">
				60%
			</div>
		</div>

效果以下圖：

進度條也支持條紋模式，使用progress-bar-striped類能夠建立條紋進度條，添加active類能夠展示條紋動畫，示例以下：

<p>帶條紋的進度條</p>
		<div class="progress">
			<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 60%;">
				60%
			</div>
		</div>

效果以下圖：

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

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

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