Tekst i odstępy

Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.

Pod koniec poprzedniej lekcji w końcu udało nam się umieścić elementy Call to action idealnie w centrum naszego obrazu bohatera. Jednak rezultat pozostawia wiele do życzenia.

Po pierwsze, ledwo co można tu zobaczyć!

Krok 1 - zmień kolor tekstu

Zmiana koloru tekstu w Bootstrapie jest prosta. Aby zmienić go na przykład na biały, po prostu dodaj klasę text-white do elementu.

Następnie wszystkie elementy będące jego dziećmi przyjmą tę właściwość. Więc dodaj klasę text-white do elementu nadrzędnego naszego Call to action:

      
        <!-- Call to action -->
<div class="text-white">
  <h1>Whoah, what a view!</h1>
  <h5>Learning web design is such an amazing thing</h5>
  <a class="btn btn-primary" href="#" role="button">Learn with me</a>
</div>
      
    

Trochę lepiej, ale kontrast z tłem wciąż jest zbyt słaby. Wkrótce do tego dojdziemy. Teraz spróbujmy nieco poprawić pozycję tekstu.

Krok 2 - wyśrodkuj tekst

Faktem jest, że udało nam się wyśrodkować Call to action w odniesieniu do obrazu bohatera, ale wciąż elementy takie jak nagłówki czy przycisk są przyciśnięte do lewego brzegu Call to Action. Byłoby miło, gdyby były one całkowicie wyśrodkowane.

To również bardzo łatwe do zrobienia w Bootstrapie. Wystarczy dodać klasę text-center do elementu Call to action.

      
        <!-- Call to action -->
<div class="text-white text-center">
  <h1>Whoah, what a view!</h1>
  <h5>Learning web design is such an amazing thing</h5>
  <a class="btn btn-primary" href="#" role="button">Learn with me</a>
</div>
      
    

Jak widzisz, klasa text-center wyśrodkowała nie tylko tekst, ale także przycisk.

Krok 3 - dodaj odstępy

Elementy w Call to action są bardzo blisko siebie, co sprawia, że wydają się ściśnięte. Nie wiem jak ty, ale mam wrażenie, że potrzebują trochę przestrzeni i oddechu.

Dokładnie do tego służą klasy narzędzi odstępowych w Bootstrapie - pozwalają one przesunąć elementy w 4 kierunkach: w górę, w dół, w lewo i w prawo.

Na przykład - jeśli chcesz dodać margines dolny do elementu <h1> możesz dodać do niego klasę mb- ("m" od "margin", a "b" od "bottom") i wybrać jednostkę od 1 do 5.

Więc dodajmy mb-3 do <h1> i mb-4 do <h5>:

      
        <!-- Call to action -->
<div class="text-white text-center">
  <h1 class="mb-3">Whoah, what a view!</h1>
  <h5 class="mb-4">Learning web design is such an amazing thing</h5>
  <a class="btn btn-primary" href="#" role="button">Learn with me</a>
</div>
      
    

Teraz mogą swobodnie oddychać!

Być może się domyśliłeś, że jeśli potrzebujesz użyć klasy mb- do dodania marginesu dolnego, będziesz musiał użyć klasy mt- , aby dodać margines górny. I miałbyś rację.

Możesz więc dalej wnioskować, że aby dodać margines z prawej użyłbyś klasy mr- a margines z lewej klasy ml-.

Jednak teraz muszę cię rozczarować.. Twórcy Bootstrapa postanowili unifikować narzędzia odstępowe z narzędziami flexboxowymi.

Oznacza to, że zamiast "right" używamy słowa "end" (lub skrótu e) i zamiast "left" używamy słowa "start" (lub skrótu s).

Na przykład:

ms-2, aby dodać trochę marginesu z lewej strony

me-4, aby dodać trochę marginesu z prawej strony

Poniżej znajduje się przykład użycia klas dla marginesu z prawej strony wraz z wizualną reprezentacją ich wielkości. Te same wielkości stosują się do wszystkich kierunków (lewo, prawo, góra, dół) oraz zarówno do marginesów, jak i do odstępów.