Maison > Article > interface Web > Explication détaillée des quatre compétences d'image styles_javascript de Bootstrap

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

WBOYoriginal: 2016-05-16 15:22:15928parcourir

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>

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

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

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

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

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

Le contenu ci-dessus vous présente étape par étape les connaissances pertinentes des quatre styles d'image de Bootstrap.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des compétences Bootstrap button_javascriptArticle suivant：Explication détaillée des compétences Bootstrap button_javascript

Articles Liés

Voir plus