亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

directory search
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類(lèi) Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy） Bootstrap 過(guò)渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
characters

Bootstrap 圖片

在本章中，我們將學(xué)習(xí) Bootstrap 對(duì)圖片的支持。Bootstrap 提供了三個(gè)可對(duì)圖片應(yīng)用簡(jiǎn)單樣式的 class：

  • .img-rounded：添加 border-radius:6px 來(lái)獲得圖片圓角。
  • .img-circle：添加 border-radius:500px 來(lái)讓整個(gè)圖片變成圓形。
  • .img-thumbnail：添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框。

請(qǐng)看下面的實(shí)例演示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 圖片</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-thumbnail">

</body>
</html>

結(jié)果如下所示：

圖片

<img> 類(lèi)

以下類(lèi)可用于任何圖片中。

類(lèi) 描述 實(shí)例
.img-rounded 為圖片添加圓角 (IE8 不支持) 實(shí)例 ?
.img-circle 將圖片變?yōu)閳A形 (IE8 不支持) 實(shí)例 ?
.img-thumbnail 縮略圖功能 實(shí)例 ?
.img-responsive 圖片響應(yīng)式 (將很好地?cái)U(kuò)展到父元素) 實(shí)例 ?

響應(yīng)式圖片

通過(guò)在 <img> 標(biāo)簽添加 .img-responsive 類(lèi)來(lái)讓圖片支持響應(yīng)式設(shè)計(jì)。 圖片將很好地?cái)U(kuò)展到父元素。

.img-responsive 類(lèi)將 max-width: 100%; 和 height: auto; 樣式應(yīng)用在圖片上：

實(shí)例

 <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
效果預(yù)覽 ?
Previous article： Next article：