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

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

Bootstrap 圖片

在本章中，我們將學習 Bootstrap 對圖片的支持。Bootstrap 提供了三個可對圖片應用簡單樣式的 class：

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

請看下面的實例演示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 圖片</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>

結果如下所示：

圖片

<img> 類

以下類可用于任何圖片中。

類 描述 實例
.img-rounded 為圖片添加圓角 (IE8 不支持) 實例 ?
.img-circle 將圖片變?yōu)閳A形 (IE8 不支持) 實例 ?
.img-thumbnail 縮略圖功能 實例 ?
.img-responsive 圖片響應式 (將很好地擴展到父元素) 實例 ?

響應式圖片

通過在 <img> 標簽添加 .img-responsive 類來讓圖片支持響應式設計。 圖片將很好地擴展到父元素。

.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上：

實例

 <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
效果預覽 ?
Artikel sebelumnya： Artikel seterusnya：