在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 縮略圖
警告框
標(biāo)簽頁
代碼
輪播
進(jìn)度條
輔助類
按鈕組
社區(qū)
標(biāo)簽
導(dǎo)航
響應(yīng)式工具
禁止響應(yīng)式布局
工具提示
概覽
媒體對象
概覽
具有響應(yīng)式特性的嵌入內(nèi)容
Well
折疊
下載
對第三方組件的支持
Glyphicons 字體圖標(biāo)
編譯 CSS 和 JavaScript 文件
徽章
柵格系統(tǒng)
瀏覽器和設(shè)備的支持情況
輸入框組
表格
滾動監(jiān)聽
下拉菜單
排版
巨幕
按鈕
頁頭
使用 Sass
包含的內(nèi)容
縮略圖
模態(tài)框
基本模板
面版
圖片
路徑導(dǎo)航
分頁
導(dǎo)航條
警告框
過渡效果
從 v2.x 版本升級到 v3.x 版本
工具
可訪問性
彈出框
按鈕式下拉菜單
表單
列表組
按鈕
使用 Less
下拉菜單

縮略圖

通過縮略圖組件擴(kuò)展 Bootstrap 的 柵格系統(tǒng),可以很容易地展示柵格樣式的圖像、視頻、文本等內(nèi)容。

如果你想實(shí)現(xiàn)一個類似 Pinterest 的頁面效果(不同高度和/寬度的縮略圖順序排列)的話,你需要使用一個第三方插件,比如 Masonry、IsotopeSalvattore

默認(rèn)樣式的實(shí)例

Boostrap 縮略圖的默認(rèn)設(shè)計僅需最少的標(biāo)簽就能展示帶鏈接的圖片。

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

自定義內(nèi)容

添加一點(diǎn)點(diǎn)額外的標(biāo)簽,就可以把任何類型的 HTML 內(nèi)容,例如標(biāo)題、段落或按鈕,加入縮略圖組件內(nèi)。

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>
上一篇:頁頭下一篇:禁止響應(yīng)式布局