autor: Robert
Kilka dni temu miała premierę czwarta wersja Twitter Bootstrap. Twórcy pokazali dopiero wersję alpha, więc przed nami jest jeszcze minimum kilka tygodni czekania na pełną wersję. Pojawiła się natomiast już częściowa dokumentacja. Docelowo tak jak stworzyłem dla Was opis Bootstrapa w wersji 2 oraz 3 tak też oczywiście przygotuję opis wersji czwartej. Ale póki nie ma wersji „stabilnej” skupię się na opisywaniu różnic pomiędzy Bootstrap 3 a Bootstrap 4 aby przygotować Was do migracji.
rem
zamiast pikseli px
em
oraz rem
em
zamiast px
col-xl-*
, który dotyczy ekranów > ~1200px (teraz col-xs-*
dotyczy ekranu < ~480px a nie <768px jak poprzednio)$enable-gradients: true
) a nie jako oddzielny plik css
.panel
), miniaturek zdjęć (.thumbnail
) i studni (.well
) na rzecz „kart”(.card
), które są połączeniem tych elementówposition:sticky
(czytaj więcej)
text-*
do pliku _utilities.scss
.page-header
.dl-horizontal
będzie wymagała podania szerokości elementu za pomocą jednej z klas np. col-md-*
by lepiej panować nad jej szerokością<blockquote>
zostało przeniesione do klasy .blockquote
oraz blockquote-reversed
.responsive
. Teraz ową klasę wystarczy dodać do <table>
.table-condensed
zmienia nazwę na .table-sm
aby trzymać się konwencji nazw.table-inverse
_reboot.scss
.input-lg
i .input-sm
na klasy .form-control-lg
i .form-control-sm
.form-group-*
na rzecz klas .form-control-*
.horizontal-form
)
.horizontal-form
nie jest już potrzebna.form-group
nie zachowuje się już jak .row
, więc trzeba używać klasy .row
przy budowaniu poziomych formularzy.form-control-label
do pionowego centrowania etykiet formularzycol-xs-*
).nav > li >
a to mamy oddzielne klasy .nav
, .nav-item
czy .nav-link
co znacząco ułatwia nam ich stylowanie.previous
i .next
na .pager-prev
i .pager-next
.card
.item
na .card-item
Ciąg dalszy nastąpi…
o kurde to się narobiło :D mam tylko ogromną nadzieję, że autor tej strony nie zostawi nas z tymi zmianami samemu ponieważ traktuję tą stronę jak „słownik” do obsługi i nauki Bootstrapa :) bo cięzko jest znaleźć w polskim internecie tak przystępnie napisanych tutoriali BS w naszym języku. Oczywiście dziękuję raz jeszcze za Twoją pracę przy tworzeniu kursów i z niecierpliwością czekam na nowe wpisy. Pozdrawiam.
OdpowiedzRobercie, jeśli możesz to powiedz proszę w jaki sposób mam ustawić domyślną jednostkę „1rem” dla dokumentu HTML, którym chcę określać wysokość div’ów poprzez tą właśnie jednostkę (nie chodzi mi o wielkości czcionkę, a wysokości div’ów, aby ich wysokość była uzależniona np od wysokości okna przeglądarki). Czytałem o wielkości czcionki w stosunku do bazowego określenia „font-size” dla elementu głównego HTML (np: html {font-size: 15px;} wtedy element p {font-size: 2rem} będzie miał 30px… jeśli dobrze zrozumiałem :) ) Chodzi mi o ustalenie wysokości div’a poprzez „rem”, którą byśmy ustalili dla elementu głównego opartego o wysokość okna przeglądarki… ?? Jak do tego podejść? :) Będę wdzięczny za podpowiedź.
Odpowiedzrem jest to wielkość fonta przypisana dla roota dokumentu HTMLowego czyli dla znacznika <html>
. Dlatego jeśli ustawimy html {font-size: 16px;}
to ustawienie stylu np. dla paragrafu p {font-size: 1rem;}
spowoduje, że ten będzie miał wielkość 16px. Jest też fajny trik dzięki któremu np. 1.7rem = 17px, 2.4rem = 24px, więc nie trzeba się martwić przeliczaniem. Można o nim przeczytać tutaj -> http://blog.end3r.com/125/css3-manipulacja-wielkoscia-czcionki-przy-uzyciu-rem/ Oczywiście remów można używać także do marginesów, wypełnień, ramek itp, wtedy wystarczy napisać przykładowo margin-left: 0.5rem
.
Co do ustalania wysokości/szerokości diva na podstawie rozmiarów ekranu. Są dwie fajne jednostki vh
oraz vw
. Przykładowo 1vh
to 1/100 wysokości ekranu czyli 100vh
wyświetli diva, który będzie miał wysokość całego ekranu niezależnie od tego czy wyświetlimy go na smartfonie czy monitorze.Analogicznie dla 100vw
Świetny kurs! Mnóstwo użytecznych informacji. Mam nadzieję, że będzie w dalszym ciągu rozwijany.
OdpowiedzBardzo ciekawa strona :) Mam pytanie jeśli chodzi o bootstrapa, nadal jest on w fazie Alpha, ale już dosyć długo. Czy postawienie strony dla klienta na tej wersji 4 będzie błędem? Lepiej nie ryzykować i użyć bootstrapa 3? Pozdrawiam i gratuluje tak udanej strony :)
Odpowiedz