Hello World

8 185 4

Witajcie!

Bootstrap jest zbiorem gotowych elementów HTML/CSS oraz skryptów JS, który umożliwia tworzenie responsywnych stron internetowych. Dzięki niemu możecie stworzyć stronę, która będzie się „dopasowywać” do ekranów smartfonów, tabletów i komputerów. Dzięki siatce (grid) z łatwością podzielimy stronę na kilka części, które mogą zachowywać się inaczej w zależności od rozdzielczości. Mnogość gotowych elementów również znacząco przyspiesza tworzenie nowych witryn. Nie musimy na przykład stylować przycisku od podstaw, gdzie stworzenie takiego najprostszego to minimum kilka linijek CSSa a później jeszcze musimy zadbać o zmianę jego koloru po najechaniu kursorem oraz ostylować link, który pod niego podepniemy. Wykorzystujemy gotową klasę .btn i nasz przycisk jest gotowy. Oczywiście takich elementów jest dużo więcej, mogą one modyfikować typografię, obrazy, tabele, tworzyć paski nawigacji czy okienka pop-up.

Na tej stronie, podobnie jak w moim tutorialu o Bootstrap 3, który pewnie część z Was czytała, nie będę zwyczajnie tłumaczył oficjalnej dokumentacji. Postaram się dokładnie opisywać jak wykorzystać daną klasę CSS, która część kodu HTML odpowiada za dany element złożonych komponentów a także pisał gdzie można ich używać na stronie.

Odnośnie nowości: Wzorem oficjalnej strony Bootstrapa postanowiłem wprowadzić sekcję, w której będziecie mogli pochwalić się swoimi realizacjami. Zmienił się trochę layout – ale tutaj podobnie jak poprzednio – wykorzystywałem tylko gotowe elementy Bootstrap 4 bo chciałem abyście widzieli, jak bez żadnych modyfikacji można zbudować na nim stronę a nie zmodyfikować go tak by nie wyglądał jak BS. Gdy będziecie już biegle się w nim poruszać sami dacie radę dopasowywać go pod siebie. W planach mam jeszcze opisanie jak korzystać z Bootstrapa w połączeniu z SASSem oraz stworzyć cheatsheet z gotowymi elementami – bez lania wody, ale to później:) Nowe wpisy będę się starał wrzucać jak najczęściej ale robię to po pracy i czasami nie mam już ochoty patrzeć na komputer, więc proszę o wyrozumiałość:) Zachęcam także do komentowania, odpowiadania na pytania innych czytelników, chwalenia się w komentarzach swoimi modyfikacjami itp:)

Kursy wideo Bootstrap

Jeśli zamiast czytać, wolicie oglądać materiały wideo o Bootstrapie to sprawdźcie poniższe kursy on-line na platformie strefakursow.pl.

Kurs Bootstrap 4 - od podstaw
Kurs Bootstrap 4 - praktyczny projekt

Zapraszam do lektury.

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (36 głosów, średnia: 4,97 na 5)
Loading...

4 komentarzy w “Hello World

Bgr

Strona bardzo mi pomogła, nigdzie nie widziałem tak jasno opisanego każdego elementu+ kod do wypróbowania- widać ogrom włożonej pracy 🙂
Proszę tylko o obiecany tut z sassem
Pozdrawiam

Marek

Chce stworzyć stronę z pomoca Bootstrapa. Czy lepiej uczyć się już od Bootstrap 4? Czy najpierw zacząć od 3 ?

    Robert Autor

    Na daną chwilę Bootstrap 4 jest w bardzo wczesnej fazie i zawiera trochę błędów. Ja na twoim miejscu nauczył bym się Bootstrap 3 bo on jest na rynku już jakiś czas. Posiada on także wiele „dodatków” jak np. http://bootsnipp.com/ Gdy nauczysz się Bootstrap 3 to przejście na 4 będzie bardzo proste.

Tomasz

Super sprawa – konkretna i uporządkowana informacja

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*