當(dāng)前位置：
首頁 >
2016年5月30日上午（传智Bootstrap笔记六（图片样式））
發(fā)布時(shí)間：2025/3/15
37
豆豆
生活随笔
收集整理的這篇文章主要介紹了
2016年5月30日上午（传智Bootstrap笔记六（图片样式））
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
為了給段落添加強(qiáng)調(diào)文本，則可以添加 class="lead"，這將得到更大更粗、行高更高的文本，如下面實(shí)例所示：
<body style="padding:50px;background-color:#ccc;"><hr><h2>引導(dǎo)主體副本</h2><p class="lead">這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。</p></body>
1、Bootstrap?圖片
通過在 <img> 標(biāo)簽添加 .img-responsive 類來讓圖片支持響應(yīng)式設(shè)計(jì)。 圖片將很好地?cái)U(kuò)展到父元素。
.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應(yīng)用在圖片上：
<body style="padding:50px;background-color:#ccc;"><h2 class="page-header">圖片樣式應(yīng)用</h2><div><img class="img-responsive" width="400px" src="1.jpg"><p>在本章中，我們將學(xué)習(xí) Bootstrap 對圖片的支持。Bootstrap 提供了三個(gè)可對圖片應(yīng)用簡單樣式的 class：.img-rounded：添加 border-radius:6px 來獲得圖片圓角。.img-circle：添加 border-radius:50% 來讓整個(gè)圖片變成圓形。.img-thumbnail：添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框。</p></div></body>? ? ? ? ? ? ?
在本章中，我們將學(xué)習(xí) Bootstrap 對圖片的支持。Bootstrap 提供了三個(gè)可對圖片應(yīng)用簡單樣式的 class：
-
- .img-rounded：添加?border-radius:6px?來獲得圖片圓角。（圓角圖片）
- .img-circle：添加?border-radius:50%?來讓整個(gè)圖片變成圓形。（圓形圖片）
?
<body style="padding:50px;background-color:#ccc;"><h2 class="page-header">圖片樣式應(yīng)用</h2><div><img class="img-responsive img-circle" width="400px" src="1.jpg"><p>在本章中，我們將學(xué)習(xí) Bootstrap 對圖片的支持。Bootstrap 提供了三個(gè)可對圖片應(yīng)用簡單樣式的 class：.img-rounded：添加 border-radius:6px 來獲得圖片圓角。.img-circle：添加 border-radius:50% 來讓整個(gè)圖片變成圓形。.img-thumbnail：添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框。</p></div></body>?
? ? ? ? ? ? ? ? ? ?
?
- .img-thumbnail：添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框。（邊框圓角）
?
<body style="padding:50px;background-color:#ccc;"><h2 class="page-header">圖片樣式應(yīng)用</h2><div><img class="img-responsive img-thumbnail" width="400px" src="1.jpg"><p>在本章中，我們將學(xué)習(xí) Bootstrap 對圖片的支持。Bootstrap 提供了三個(gè)可對圖片應(yīng)用簡單樣式的 class：.img-rounded：添加 border-radius:6px 來獲得圖片圓角。.img-circle：添加 border-radius:50% 來讓整個(gè)圖片變成圓形。.img-thumbnail：添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框。</p></div></body>?
?
center-block；圖片居中
?
<body style="padding:50px;background-color:#ccc;"><h2 class="page-header">圖片樣式應(yīng)用</h2><div><img class="img-responsive img-circle center-block" width="400px" src="1.jpg"><p>在本章中，我們將學(xué)習(xí) Bootstrap 對圖片的支持。Bootstrap 提供了三個(gè)可對圖片應(yīng)用簡單樣式的 class：.img-rounded：添加 border-radius:6px 來獲得圖片圓角。.img-circle：添加 border-radius:50% 來讓整個(gè)圖片變成圓形。.img-thumbnail：添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框。</p></div></body>?
?
轉(zhuǎn)載于:https://www.cnblogs.com/zzjeny/p/5542093.html
總結(jié)
以上是生活随笔為你收集整理的2016年5月30日上午（传智Bootstrap笔记六（图片样式））的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【转】oracle数据库NUMBER数据
- 下一篇： I/O(输入/输出)---序列化与反序列