詳解Bootstrap四種圖片樣式

更新時(shí)間：2016年01月04日 10:34:35 投稿：mrr

本文給大家介紹Bootstrap 對圖片的支持，Bootstrap提供了四個(gè)可對圖片應(yīng)用簡單樣式的class，對Bootstrap四種圖片class相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧

在本章中，我們將學(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è)灰色的邊框
img-responsive 圖片響應(yīng)式

1、img-rounded

<!doctype html> 
<html lang="en"> 
<head> 
  <!--網(wǎng)站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="關(guān)鍵詞一，關(guān)鍵詞二"> 
  <meta name="Description" content="網(wǎng)站描述內(nèi)容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 
  <body style="padding: 20px;"> 
    <div class = "container"> 
      <img src = "5.jpg" class="img-rounded" >    
    </div> 
  </body> 
</html>

.img-rounded{border-radius:6px;}

效果：

2、img-circle

<body style="padding: 20px;"> 
  <div class = "container"> 
    <img src = "5.jpg" class="img-circle" >    
  </div> 
</body>

.img-circle{border-radius:50%;}

效果(因?yàn)楸緢D片的寬高大小不同，所以呈現(xiàn)出橢圓，如果將width和height設(shè)置相同，那么會呈現(xiàn)出一個(gè)圓)：

3、img-thumbnail

<body style="padding: 20px;"> 
  <div class = "container"> 
    <img src = "5.jpg" class="img-thumbnail" >  
    <img src = "4.jpg" class="img-thumbnail" >  
    <img src = "3.jpg" class="img-thumbnail" >  
  </div> 
</body>

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}

效果：

4、img-responsize

<body style="padding: 20px;"> 
  <div class = "container" style = "width:150px;"> 
    <img src = "5.jpg" class="img-responsive" width="400px" >    
  </div> 
</body>

.img-responsive{display:block;max-width:100%;height:auto;}

效果(img中的width屬性值被忽略)：

以上內(nèi)容分步驟給大家介紹了Bootstrap四種圖片樣式的相關(guān)知識，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

使用js實(shí)現(xiàn)復(fù)制功能
這篇文章主要為大家詳細(xì)介紹了使用js實(shí)現(xiàn)復(fù)制功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
微信小程序之事件交互操作實(shí)例分析
這篇文章主要介紹了微信小程序之事件交互操作,結(jié)合實(shí)例形式分析了微信小程序事件響應(yīng)、交互及界面布局等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-12-12
js實(shí)現(xiàn)自定義進(jìn)度條效果
本文主要介紹了js實(shí)現(xiàn)自定義進(jìn)度條效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
js+數(shù)組實(shí)現(xiàn)網(wǎng)頁上顯示時(shí)間/星期幾的實(shí)用方法
在網(wǎng)頁上顯示時(shí)間(年月日/時(shí)分秒),很多新手朋友都想實(shí)現(xiàn)這樣的功能，本文整理了一些實(shí)用技巧，殺出來與大家分享，感興趣的朋友可以了解下
2013-01-01
webpack@v4升級踩坑(小結(jié))
這篇文章主要介紹了webpack@v4升級踩坑(小結(jié)),之前就嘗試了升級，由于部分插件的原因，未能成功,今天就來試一下在我的項(xiàng)目中升級會遇到哪些坑。感興趣的小伙伴們可以參考一下
2018-10-10
Vue項(xiàng)目中關(guān)于全局css的處理
我們在寫CSS的時(shí)候，會遇到大量相同的屬性(比如：margin-top:10px)這種屬性幾乎每個(gè)vue頁面都有。這個(gè)時(shí)候，我們可以把css掛載到全局上，供所有vue頁面使用，同時(shí)也方便修改。感興趣的同學(xué)可以參考一下
2023-04-04
分析JS中this引發(fā)的bug
這篇文章主要介紹了分析JavaScript中this引發(fā)的bug以及相關(guān)的處理方法分析，一起學(xué)習(xí)下吧。
2017-12-12
JS解決iframe之間通信和自適應(yīng)高度的問題
關(guān)于iframe之間的通信問題與自適應(yīng)高度問題網(wǎng)上有很多，那么這篇文章小編也和大家一起來談?wù)刬frame之間通信問題及iframe自適應(yīng)高度問題，有需要的可以參考借鑒。
2016-08-08
如何使用 Intl.RelativeTimeFormat 在 JavaScript&nbs
Intl.RelativeTimeFormat是JavaScript提供的一個(gè)國際化API,用于格式化相對時(shí)間,如"3天前"或"2年后",支持多種語言和配置選項(xiàng),適用于社交媒體時(shí)間戳和事件提醒等場景,它簡化了國際化的相對時(shí)間顯示,使開發(fā)者能夠根據(jù)用戶的語言和區(qū)域設(shè)置輕松實(shí)現(xiàn)時(shí)間格式化
2024-09-09
小程序自動化測試的示例代碼
這篇文章主要介紹了小程序自動化測試，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08