Bootstrapの4つの画像スタイル_JavaScriptスキルを詳しく解説-jsチュートリアル-php.cn

Bootstrapの4つの画像スタイル_JavaScriptスキルを詳しく解説

WBOY

リリース： 2016-05-16 15:22:15

オリジナル

962 人が閲覧しました

この章では、Bootstrap によるイメージのサポートについて学びます。 Bootstrap は、画像に単純なスタイルを適用できる 4 つのクラス、つまり

を提供します。

img-rounded は、画像の角を丸くするために border-radius:6px を追加します
img-circle border-radius:50% を追加して画像全体を円形にします
img-thumbnail はパディングと灰色の境界線を追加します
img レスポンシブ画像レスポンシブ

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%;}

効果 (この画像の幅と高さが異なるため、楕円として表示されます。幅と高さを同じに設定すると、円が表示されます):

3. 画像サムネール

<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{表示:インラインブロック;最大幅:100%;高さ:自動;パディング:4px;行の高さ:1.42857143;
背景色:#FFF;ボーダー:1px ソリッド #DDD;ボーダー半径:4px;トランジション:すべて 0.2 秒イーズインアウト;}

効果:

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-sensitive{表示:ブロック;最大幅:100%;高さ:自動;}

効果 (img の width 属性値は無視されます):