Explication détaillée des quatre compétences d'image styles_javascript de Bootstrap-js tutoriel-php.cn

Explication détaillée des quatre compétences d'image styles_javascript de Bootstrap

WBOY

Libérer： 2016-05-16 15:22:15

original

967 Les gens l'ont consulté

Dans ce chapitre, nous découvrirons la prise en charge des images par Bootstrap. Bootstrap propose quatre classes qui peuvent appliquer des styles simples aux images, à savoir :

img-rounded ajoute border-radius:6px pour obtenir des coins arrondis de l'image
img-circle Ajoutez border-radius:50% pour rendre toute l'image circulaire
img-thumbnail ajoute un peu de remplissage et une bordure grise
img-responsive image réactive

1. img-arrondi

<!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>

Copier après la connexion

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

Effet :

2. img-cercle

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

Copier après la connexion

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

Effet (parce que la largeur et la hauteur de cette image sont différentes, elle apparaîtra comme une ellipse. Si la largeur et la hauteur sont définies de la même manière, un cercle apparaîtra) :

3. img-vignette

<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>

Copier après la connexion

.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 easy-in-out;}

Effet :

4. img-responsize

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

Copier après la connexion

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

Effet (la valeur de l'attribut de largeur dans img est ignorée) :