web-dev-qa-db-fra.com

Bootstrap 4 classes de vignettes d'images

J'ai obtenu un code HTML dans ce qui suit en utilisant bootstrap 3.3.7, en utilisant la classe de vignettes, les images peuvent être redimensionnées et s'intégrer parfaitement dans la grille.

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Project</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 </head>

<div class="container">
  <h2>Pictures of Coffee</h2>
  <div class="row">
 <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div> 
  </div>
</div>

 </body>
 </html>

Cependant, la classe de vignettes ne semble pas exister dans bootstrap 4.0 https://getbootstrap.com/docs/4.0/layout/grid/ Pour simuler le problème, vous pouvez essayer de remplacer le lien html rel par le suivant

 <link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
 crossorigin="anonymous">

Vous pouvez voir que les images seront déplacées et je voudrais savoir quelle est la classe similaire pour obtenir le même résultat en 4.0. Ou je dois recourir à bootstrap 3.3.7?

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
6
csamleong

Selon le docs v4 , vous recherchez img-thumbnail (qui doit être utilisé dans la balise img au lieu de col-*-* comme vous l'avez)

Remarques:

  • Dans la v4 col-xs a été remplacé par col-
  • J'ai ajouté img-fluid classe utilitaire pour rendre les images réactives
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <h2>Pictures of Coffee</h2>
  <div class="row">
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
  </div>
</div>
10
dippas

Dans Bootstrap 4, vous pouvez effectuer les opérations suivantes.

Pour les colonnes col-xs- n'existe plus, remplacez par col-. La valeur par défaut est xs.

Pour la vignette, vous pouvez utiliser le img-thumbnail classe sur l'élément img au lieu de sur l'élément div.

De plus, pour obtenir un remplissage de 0 sur chaque colonne et ligne, vous pouvez remplacer le remplissage de Bootstrap en ajoutant une règle de style personnalisée.

    .row > .col-lg-4,
       .col-6 {
               padding: 0;
       }

Le fichier Bootstrap 4 résultant serait le suivant:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Project</title>
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            .row>.col-lg-4,
            .col-6 {
                padding: 0;
            }

        </style>
    </head>
    <div class="container">
        <h2>Pictures of Coffee</h2>
        <div class="row">
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt="">
            </div>
        </div>
    </div>
    </body>

    </html>

J'espère que cela t'aides.

2
devisscher