Grafika w Bootstrap 3

bootstrap tutorials kurs

Kategoria wpisu Bootstrap 3, Kurs Bootstrap, Kursy Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Bootstrap podobnie jak w przypadku przycisków posiada różne gotowe wzorce wyświetlania się ilustracji.

Znaleźć w nich można nie tylko dodanie efektu RWD do obrazków, ale również zmiana ich kształtów czy wielkości.

Nadawanie właściwości

W celu uzyskania danego efektu wystarczy użyć określonej klasy np:

  • .img-rounded zaokrąglenie narożników obrazka (nie działa w IE8)
  • .img-circle kształt spłaszczonego okręgu, elipsy (nie działa w IE8)
  • .img-thumbnail kształt thumbnail czyli miniaturki do wpisu
  • .img-responsive nadanie zdjęciu responsywności (obraz będzie się skalował, dostosowywał do szerokości strony i kontenera)

img-rounded
safari

Ustawienia:


.img-circle
safari

Ustawienia:


.img-thumbnail
safari

Ustawienia:


.img-responsive
safari

Ustawienia:


Ustawianie obrazka na stronie

Do prawej:
safari

Do lewej
safari

Wyśrodkowanie
safari

safari

Jak prezentuje się kod CSS powyższych przykładów:

Dodatkowe tagi:
Jak wykorzystać podstawowe ustawienia Twitter Bootstrap do pracy z grafiką?
przykładowe użycia biblioteki do edycji obrazu
praca z fremwork
images bootstrap
obrazki, obrazek edycja
ilustracje RWD
obrazy dostosowujące się do rozmiarów strony
responsywne, dopasowujące się do szerokości strony

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *