Clearfix

Stosowanie właściwości float może powodować problemy z poprawnym wyświetlaniem elementów, które ją posiadają. Przykładowo poniżej mamy tekst oraz obrazek, zamknięte w divie z tłem. Jednak z powodu zastosowania float „wyszły” one z tego diva, przez co ma on zerową wysokość i się nie wyświetla. Dodatkowo psuje to ramkę przykładu. Rozwiązaniem tej sytuacji jest zastosowanie tzw […]

Display

W tym wpisie poznamy klasy, które pozwalają nam zmieniać sposób wyświetlania elementu. Jak wiecie dzięki właściwości display: CSS możemy definiować by element wyświetlał się między innymi blokowo, liniowo, jako element listy czy tabela. Klasy te odpowiadają wartością właściwości display z dopiskiem .d-*. Dodatkowo możemy je stosować do wybranych breakpointów. Wtedy składnia klasy wygląda następująco .d-*-* […]

Ikona zamykania / Close icon

Gdy tworzymy na przykład modal to dobrze umieścić w nim ikonę do zamykania. W Bootstrapie jest ona bardzo prosta do uzyskania. Wystarczy, że stworzymy button i umieścmy w nim encję HTML times;.

Kolory / Colors

Czytając pozostałe wpisy na pewno natknęliście się na kolory zaimplementowane w Bootstrap. Z pomocą klas możemy zmieniać kolory tekstu, linków, buttonów, nadawać kolory teł itp. Kolor tekstu Dla tekstu mamy przygotowane kilkanaście klas. Nie będę ich tutaj wymieniał, myślę, ze przykład doskonale pokazuje o co z nimi chodzi. Kolor linka Tutaj sytuacja wygląda podobnie do […]

Ramki / Borders

Prócz gotowych elementów Bootstrap zawiera także wiele małych narzędzi ułatwiających budowanie layoutu stron. Są to zwykle klasy robiące bardzo proste rzeczy jak wyrównanie tekstu czy dodanie ramek. Podstawowy przykład Aby dodać poszczególne ramki naszemu elementowi mamy do wyboru pięc klas: .border – dodaje ramki na wszystkich bokach .border-top – dodaje ramkę u góry .border-right – […]

Umieszczanie YouTube / Embeds

Na naszych stronach możemy umieszczać video z Youtube czy Vimeo. Ale możemy także umieszczać elementy innych stron lub jakieś widżety z pomocą iframe. Bootstrap ma przygotowane kilka klas pozwalających na umieszczanie na stronach responsywnych iframe i w przypadku filmów, również pilnowania ich proporcji. Zaczniemy od stworzenia diva z klasą .embed-responsive a w nim umieścimy iframe […]