immagine bootstrap
In questo capitolo, impareremo supporto Bootstrap per una foto. Bootstrap fornisce tre possono essere applicati all'immagine semplice classe di stile:
- .img-arrotondato:Aggiungiborder-radius: 6pxper ottenere il filetto immagine.
- .img-cerchio:aggiungereborder-radius: 50%per rendere l'intera immagine diventa circolare.
- .img-thumbnail:Aggiungere un po 'di imbottitura (padding) e un bordo grigio.
Considerare i seguenti esempi dimostrano:
Esempi
<IMG src = "/wp-content/uploads/2014/06/download.png" class = "img-arrotondato">
<IMG src = "/wp-content/uploads/2014/06/download.png" class = "img-circle">
<IMG src = "/wp-content/uploads/2014/06/download.png" class = "img-thumbnail">
Prova »
I risultati sono i seguenti:
<Img> class
Le seguenti classi sono disponibili a qualsiasi immagine.
| categoria | descrizione | Esempi |
|---|---|---|
| .img-arrotondato | L'aggiunta di un filetto di immagine (IE8 non supporta) | provare |
| .img-cerchio | Il quadro diventa circolare (IE8 non supporta) | provare |
| .img-thumbnail | Miniature | provare |
| .img-reattiva | Immagini Responsive (scalerà ben all'elemento genitore) | provare |
immagine responsive
Con tag <img> per aggiungere il supporto di classe immagine .img-sensibile per fare responsive design. Immagini scala bene all'elemento genitore.
.img-responsive classe max-width: 100%; ed altezza: auto; stile viene applicato sull'immagine: