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