Bootstrap響應式前端框架筆記六——圖片與其餘輔助類

Bootstrap響應式前端框架筆記六——圖片與其餘輔助類

    在頁面中插入圖片，Bootstrap框架中定義了3中圖片的Css類樣式，分別爲圓角圖片img-rounded類，圓形圖片img-circle類和帶邊框的圖片img-thumbnail類，示例以下：

<p>設置img-rounded類能夠使圖片顯示圓角，img-circle類能夠使圖片顯示圓形，img-thumbnail能夠爲圖片加上邊框</p>
		<img src="image/test.png" class="img-rounded" />
		<img src="image/test.png" class="img-circle" />
		<img src="image/test.png" class="img-thumbnail" />

效果以下圖所示：

    text-xxx相關類定義了一些經常使用的字體顏色，示例以下：

<p class="text-muted">正常文字</p>
		<p class="text-primary">重要文字</p>
		<p class="text-success">成功文字</p>
		<p class="text-info">詳情文字</p>
		<p class="text-warning">警告文字</p>
		<p class="text-danger">危險文字</p>

效果以下圖所示：

與上面文字顏色的類相對應，Bootstrap中也定義了一組背景顏色類，示例以下：

<p class="bg-muted">正常背景</p>
		<p class="bg-primary">重要背景</p>
		<p class="bg-success">成功背景</p>
		<p class="bg-info">詳情背景</p>
		<p class="bg-warning">警告背景</p>
		<p class="bg-danger">危險背景</p>

效果以下：

使用caret類能夠方便的建立倒三角圖案，示例以下：

<p>使用caret類能夠建立一個倒三角圖案</p>
		<span class="caret"></span>

效果以下：

使用show和hidden類能夠進行標籤的顯示與隱藏，示例以下：

<p class="hidden">show和hidden能夠進行便籤的顯示與隱藏</p>

Bootstrap中還提供了一些與響應類開發相關的類，開發者能夠設置某些元素在某個尺寸的屏幕中可見或者隱藏，也能夠設置某個元素在瀏覽器或打印機上可見或隱藏，以下：

屏幕尺寸響應式類：

顯示設備響應式類：

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

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

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