bootstrap obrazu
W tym rozdziale poznamy Bootstrap wsparcie dla obrazu. Ładujący zawiera trzy mogą być stosowane do obrazu prostego klasy styl:
- .img zaokrąglone:Dodajborder-radius: 6 pikseli,aby uzyskać filet obrazu.
- .img-circle:dodawanieborder-radius: 50%,aby cały obraz staje się okrągła.
- .img-miniatur:Dodać trochę padding (padding) i szare obramowanie.
Rozważmy następujące przykłady pokazują:
Przykłady
<img src = "/wp-content/uploads/2014/06/download.png" class = "img zaokrąglone">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-circle">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-miniatur">
Spróbuj »
Wyniki przedstawiają się następująco:
<Img> class
Poniższe klasy są dostępne dla każdego obrazu.
| kategoria | opis | Przykłady |
|---|---|---|
| .img zaokrąglone | Dodanie filet obrazu (IE8 nie obsługuje) | próbować |
| .img-circle | Obraz staje się okrągły (IE8 nie obsługuje) | próbować |
| .img-miniatur | Miniatury | próbować |
| .img reagujący | Zdjęcia Responsive (będzie się dobrze skalować się do elementu nadrzędnego) | próbować |
responsive obrazu
Przez <img>, aby dodać klasę obsługi obrazu .img reagujący aby elastycznego projektowania. Zdjęcia będą również skalować do elementu nadrzędnego.
.img reagujący klasy max-width: 100%; oraz height: auto; styl jest stosowany na zdjęcie: