首頁 > web前端 > js教程 > 詳解Bootstrap四種圖片樣式_javascript技巧

詳解Bootstrap四種圖片樣式_javascript技巧

WBOY
發布: 2016-05-16 15:22:15
原創
974 人瀏覽過

在本章中,我們將學習 Bootstrap 對圖片的支持。 Bootstrap 提供了四個可對圖片套用簡單樣式的class,分別是:

img-rounded 增加 border-radius:6px 以獲得圖片圓角
img-circle 增加 border-radius:50% 讓整張圖片變成圓形
img-thumbnail 增加一些內邊距(padding)和一個灰色的邊框
img-responsive 圖片響應式

1、img-rounded

<!doctype html> 
<html lang="en"> 
<head> 
  <!--网站编码格式,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="关键词一,关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <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%;}

效果(因為本圖片的寬高大小不同,所以呈現出橢圓,如果將width和height設定相同,那麼會呈現出一個圓):

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-outout;border-radius:4px;transition:all 0.2s ease-in-outout;

效果:

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屬性值被忽略):


以上內容逐步跟大家介紹了Bootstrap四種圖片樣式的相關知識,希望大家喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板