Images d'amorçage


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

  • .img-rounded : ajoutez border-radius:6px pour obtenir l'image. coins arrondis.

  • .img-circle : ajoutez border-radius:50% pour rendre l'image entière circulaire.

  • .img-thumbnail : Ajoutez un peu de remplissage et une bordure grise.

Veuillez consulter l'exemple suivant :

<!DOCTYPE html>
<html>
<head>
<title>Exemple de bootstrap - Image</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src=" /scripts /jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head> ;
<body>

<img src="/wp-content/uploads/2014/06/download.png"
class="img-rounded">
< img src="/wp-content/uploads/2014/06/download.png"
class="img-circle">
<img src="/wp-content/uploads/2014 /06 /download.png"
class="img-thumbnail">

</body>
</html>

Instance 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 图片</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-thumbnail">

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


<img> Classes

Les classes suivantes peuvent être utilisées dans n'importe quelle image.

类描述实例
.img-rounded为图片添加圆角 (IE8 不支持)尝试一下
.img-circle将图片变为圆形 (IE8 不支持)尝试一下
.img-thumbnail缩略图功能尝试一下
.img-responsive图片响应式 (将很好地扩展到父元素)尝试一下

Images réactives

Faites en sorte que les images prennent en charge la conception réactive en ajoutant la classe .img-responsive à la balise <img> L'image s'agrandira bien jusqu'à l'élément parent. La classe

.img-responsive applique max-width: 100%; et height: auto; styles aux images :

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  </head>

  <body>
     <div class="container">
      <h2>图片</h2>
      <p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>                  
      <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
    </div>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </body>

</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne