Bootstrap tutorial logo

W tym poście opiszę budowę rusztowania szablonu czyli elementów, które tworzą szkielet strony i wewnątrz których będziemy zamieszczać inne elementy. Kontener Jak pewnie zauważyliście, większość stron w Internecie nie jest całej szerokości okna przeglądarki a posiada puste miejsca po bokach. Rozwiązanie takie zwiększa czytelność strony i jest standardową praktyką przy tworzeniu stron. Bootstrap oferuje klasę […]

Czytaj!

Gdy chcemy stworzyć tylko jedną kolumnę o szerokości 4 i na dodatek wyśrodkowaną nie musimy tworzyć pustej kolumny z klasą .col-md-4 a następnie kolejnej kolumny albo tworzyć dodatkowych klas CSS. Służy do tego klasa .col-md-offset-*, która tworzy nam margines po lewej o wybranej szerokości. Oczywiście klasa .col-md-offset-* może przyjmować wartości od 1 do 11 i […]

Czytaj!

Podczas zagnieżdżania kolumn należy zapamiętać, że każdy „poziom” niżej znów może zmieścić 12 kolumn. Na przykład tworzymy 2 kolumny o szerokości 6, w każdej z nich możemy zmieścić po 2 kolumny o szerokości 6 a w nich kolejne. Myślę, że przykład doskonale pokazuje o co mi chodzi. Strona z przykładami

Czytaj!

Nagłówki Możemy korzystać ze wszystkich nagłówków HTML od <h1> do <h6> h1, Nagłówek H1 h2, Nagłówek H2 h3, Nagłówek H3 h4, Nagłówek H4 h5, Nagłówek H5 h6, Nagłówek H6 Nagłówki z małym tekstem Jeśli wewnątrz dowolnego nagłówka od <h1> do <h6> umieścimy znacznik <small>…</small> otrzymamy „dopisek” do tytułu h1, Nagłówek H1 Dopisek h2, Nagłówek H2 […]

Czytaj!

W poprzednim wpisie znalazło się prawie wszystko co można powiedzieć o typografii w bootstrapie. Do omówienia zostały jeszcze listy które postaram się przybliżyć poniżej. Lista nieuporządkowana Lorem ipsum dolor sit amet Ut enim ad minim veniam Duis aute irure dolor in reprehenderit Excepteur sint occaecat cupidatat Donec molestie elementum purus Lista uporządkowana Lorem ipsum dolor […]

Czytaj!

Czasami zdarza się tak, że chcemy wstawić opis jakiegoś znacznika HTML na naszej stronie. Niestety nie możemy tego zrobić zapisanie go w ostrych nawiasach gdyż wtedy jest to sygnał dla przeglądarki aby go interpretować a nam zależy jedynie na wyświetleniu. Tutaj z pomocą przychodzą tagi <code> oraz <pre>. Pamiętajmy, że aby wyświetlić ostre nawiasy wewnątrz […]

Czytaj!

Jak wiemy tabele znajdują swoje zastosowanie bardzo często. Bootstrap posiada kilka klas które umożliwiają ich dostosowywanie a także zapewniają estetyczny wygląd. Podstawowa tabela Tabele tworzymy poprzez HTMLowy znacznik <table>…</table> ale wystarczy dodać do niego klasę .table by uzyskać w niej dopełnienie oraz poziome linie oddzielające poszczególne wiersze. # Imię Nazwisko 1 Jan Kowalski 2 Jakub […]

Czytaj!

Na naszych stronach internetowych bardzo często korzystamy z formularzy. Służą one do wysłania wiadomości, zostawienia komentarza, wyszukiwania czy zapisywania się do newslettera. Skoro ten tutorial posiada taki wpis to znaczy, że bootstrap posiada jakieś ułatwienia w ich stosowaniu. Podstawowy formularz Wstępnie pokażę jak zrobić prosty formularz z polem do podania adresu email, „zakropkowanym” hasłem, polem […]

Czytaj!

W poprzednim wpisie pokazałem jak tworzyć podstawowe formularze ale nie opisałem jakie rodzaje pól można w nich stosować. W tym poście znajdziecie na to odpowiedź. Podstawowe pole formularza Jest to pole które w którym zwykle wpisujemy swoje imię, login, hasło, adres email itp. Tworzymy je poprzez znacznik <input> Pola formularza są zgodne ze wszystkimi znacznikami <type> […]

Czytaj!

Formularze to dosyć rozbudowany temat w bootstrapie, pokazałem już jak je tworzyć oraz jakie pola mogą zawierać. Teraz postaram się przybliżyć opcje które zmieniają ich wygląd czy dodają nowe funkcjonalności. Statyczne pole formularza Czasami w naszym formularzu chcemy podać stałą wartość np. Mail na jaki będzie wysłana wiadomość. Można to uzyskać w formularzu z opisami […]

Czytaj!

Do określania wysokości pól formularza korzystamy z dwóch klas .input-lg, która jak można się domyślać powiększa. Oraz .input-sm, która zmniejsza wielkośc pola w formularzu. W celu zmiany szerokości pól formularza będziemy korzystać z dobrze nam znanych klas jak .col-lg-* Zmiana wysokości pól formularza input-lg Standardowa wielkość input-sm Zmiana szerokości pól formularza Standardowo wszystkie pola formularzy […]

Czytaj!

Gdy omówiliśmy już formularze to dobrze było by jakoś dane które do nich wprowadzamy wysłać do serwera. Bootstrap pozwala nam skorzystać z kilku gotowych i estetycznych przycisków, których listę znajdziecie poniżej. Aby wyświetlić button używamy znaczników <a class=”btn” href=”…”>…</a> lub <button class=”btn”>…</button> Klasy przycisków Button Klasa (class=” „) Standardowy przycisk class=”btn btn-default” Primary class=”btn btn-primary” […]

Czytaj!

Twitter Bootstrap udostępnia 3 klasy które pozwalają zaokrąglić rogi obrazka, wyświetlić go w kółku oraz dołożyć ramkę by wyglądał on jak polaroid. Normalny obrazek Zaokrąglenie rogów Wykonujemy poprzez dodanie klasy .img-rounded Obraz w kółku Wykonujemy poprzez dodanie klasy .img-circle Polaroid Wykonujemy poprzez dodanie klasy .img-thumbnail

Czytaj!

Zaczniemy od kolorowania tekstu i nadawania mu „ramki” w standardowych bootstrapowych kolorach o których pisałem już wielokrotnie. Kolorowanie tekstu Nadanie kolorów polega na dodaniu wymienionych poniżej klas do paragrafów, spanów, emfaz lub hiperłącz. class=”text-muted” class=”text-primary” class=”text-success” class=”text-info” class=”text-warning” class=”text-danger” Nadawanie tła dla tekstu Podobnie jak powyżej dodajemy odpowiednią klasę, przykłady podane poniżej   Lorem ipsum […]

Czytaj!

Ten wpis powinien pojawić się na początku kursu ale jakoś mi umknął więc będzie teraz:) Gdy tworzymy responsywną stronę internetową to normalne jest, że ukrywamy niektóre elementy na różnych urządzeniach, przykładowo slider jest praktycznie nieczytelny na smartfonach więc nie musimy go wyświetlać. Albo w drugą stronę, przykładowo robimy stronę dla pomocy drogowej, fajnie by było […]

Czytaj!