Jak korzystać z podstawowego CSS w Bootstrap

Jedną z najbardziej skomplikowanych rzeczy podczas pracy z projektowaniem stron internetowych jest pokonanie subtelnych różnic między przeglądarkami, chociaż teoretycznie każda przeglądarka musi być zgodna ze standardami, a w większości przypadków istnieją bardzo subtelne drobne różnice, które mogą spowodować nasz projekt trudny do zrealizowania.

Przed istnieniem Bootstrap plik o nazwie reset.cssW tym celu zostało zrobione, że wszystkie wartości podstawowych i kluczowych elementów, takich jak dopełnienia, marginesy, domyślna czcionka itp. zostały wyraźnie określone. Dzięki temu uniemożliwiliśmy przeglądarce robienie tego, co chciała podczas definiowania elementów, których nie modyfikowaliśmy w naszych niestandardowych stylach.

dzisiaj Bootstrap dba o te szczegóły za nas, osiąga się to za pomocą pliku o nazwie bootstrap.css który jest powszechnie znany jako plik podstawowy.

WymaganiaAby móc wykonać przykłady i ćwiczenia z tego samouczka, musimy mieć projekt z Bootstrap już pobrane, lub jeśli to się nie powiedzie, połączenie z Internetem, aby móc korzystać z bibliotek bezpośrednio z twojego CDN. Potrzebujemy nowoczesnej przeglądarki, takiej jak Chrom lub Firefox w najnowszych wersjach, a na koniec potrzebujemy edytora tekstu takiego jak Wzniosły tekst lub NotePad++, aby tworzyć treści HTML w bardziej przyjazny sposób, chociaż jeśli chcemy, aby gedit lub notatnik służyły naszym celom.

Nagłówki
Jedną z rzeczy, które najbardziej przyciągają uwagę na stronie internetowej są tytuły i podtytuły treści, oczywiście taka jest funkcja tych elementów, CSS podstawa Bootstrap ma ciekawy sposób na radzenie sobie z tym, przede wszystkim ma kilka rozmiarów i czcionkę zdefiniowaną dla elementu h w dowolnej jego numeracji od 1 do 6, ale ma również klasy odpowiadające każdemu elementowi, dzięki czemu możemy zastosować te same style do div lub jeszcze Zakres.

Inną ciekawą rzeczą jest to, że możemy użyć elementu mały aby zmniejszyć rozmiar sekcji tytułu, ale zachowując proporcje w stosunku do elementu lub elementu, który używa odpowiedniej klasy.

Z tym po prostu, że gdy mamy wiele przeglądarek, zachowana jest jednorodność naszego projektu, dzięki czemu tytuły nie muszą wyglądać inaczej, na przykład w Safari do Firefox, gdy wiemy, że obie przeglądarki domyślnie działają z różnymi czcionkami.

Wprowadzanie w życie tego, czego się nauczyłeś
Stworzymy małą stronę, na której zrobimy listę tytułów, umieścimy dwa nachylenia jeden na drugim, abyśmy mogli zobaczyć, jak różnice już nie istnieją dzięki plikowi bazowemu Bootstrap. Spójrzmy najpierw na kod, a potem zobaczymy, jak wygląda w naszej przeglądarce.

 Korzystanie z pliku Base BootstrapTo jest div z klasą H1 źródło małe
To jest tytuł H4 mała czcionka
To jest div z klasą H4 małe źródło

Tutaj widzimy, jak zrobiliśmy w ciele różne elementy, które zamierzamy wykorzystać jako tytuły, dodatkowo pokazujemy, jak działa element, aby móc połączyć go z tytułami, aby uzyskać bardzo ciekawe efekty. Zamieszczamy również dodatkowy styl, aby dodać trochę wyściółki dodatkowe, abyśmy mogli uzyskać wynik podobny do tego, który zobaczymy na poniższym obrazku:

POWIĘKSZAĆ

Paragrafy
Gdy już zwrócimy uwagę czytelnika lub użytkownika tytułami naszej aplikacji, zwykle potrzebujemy treści, które można skonsumować, zwykle jest to tekst, który umieszczamy w akapicie, chociaż może to być również obraz, dźwięk lub wideo.

Wracając do akapitu, już element

przynosi styl predefiniowany przez podstawowy CSS, jednak ta baza oferuje nam również specjalny typ akapitu, który nazywa się Ołów, dodając tę ​​klasę do akapitu, od razu wyróżnimy ją spośród innych podobnych, ponieważ zwiększa się jej rozmiar i niektóre właściwości czcionek są modyfikowane.

Zobaczmy w poniższym kodzie, jak to działa, co właśnie wyjaśniliśmy, w tym przykładzie stworzymy dwa akapity, w których pierwszy będzie miał klasę Ołów, w ten sposób zobaczymy jak to podkreśli, oczywiście to wszystko działa jeśli mamy Bootstrap w naszym projekcie zobaczmy nasz kod:

 Korzystanie z pliku Base Bootstrap
Ból boczek ipsum amet w laboris magna ullamco, w bólu podudzia boudin eiusmod andouille leberkas ćwiczenia boczku ex. Żeberka wołowe magna peklowana wołowina incididunt id. Kevin zad w ogonie biltong. Filet mignon z indyka quis, golonka z dziczyzny ullamco suszony polędwica wieprzowa.
Ból boczek ipsum amet w laboris magna ullamco, w bólu podudzia boudin eiusmod andouille leberkas ćwiczenia boczku ex. Żeberka wołowe magna peklowana wołowina incididunt id. Kevin zad w ogonie biltong. Filet mignon z indyka quis, golonka z dziczyzny ullamco suszony polędwica wieprzowa.

Uruchommy nasz przykład i zobaczmy, jak wygląda w naszej przeglądarce:

POWIĘKSZAĆ

Wyrównaj tekst
Jedną z rzeczy, która jest również bardzo ważna, jest wyrównanie tekstu, ponieważ czasami potrzebujemy, aby nasz tekst był wyjustowany, wyrównany do prawej, do środka lub na siłę do lewej, chociaż w CSS istnieją odpowiedniki mające klasa do tego oszczędza nam dużo pracy, a także pomaga nam zapewnić spójność kodu.

W poniższym przykładzie zobaczymy, jak zastosujemy każdą z tych klas do różnych elementów i aby nasz kod był bardziej czytelny, zrobimy akapity dotyczące wszystkich elementów. Zobaczmy kod:

 Korzystanie z pliku Base Bootstrap
Boczek ipsum dolor amet w laboris magna ullamco, w podudzie dolor boudin eiusmod andouille
leberkas ćwiczenia boczku ex. Żeberka wołowe magna peklowana wołowina incididunt id.
leberkas ćwiczenia boczku ex. Żeberka wołowe magna peklowana wołowina incididunt id. leberkas ćwiczenia boczku ex. Żeberka wołowe magna peklowana wołowina incididunt id. Kevin zad
w ogonie biltong. Filet mignon z indyka quis, golonka z dziczyzny ullamco suszony polędwica wieprzowa.

Zobaczmy teraz, jak każda klasa zachowuje się w naszej przeglądarce, jest szczególny przypadek z uzasadniać, który jest bardzo subtelny, więc jego efekt może nie być widoczny.

POWIĘKSZAĆ

Listy
Listy są często niezbędne i nie tylko po to, aby wyliczać rzeczy, są one niejednokrotnie istotnymi elementami projektu. Bootstrap obsługuje je w przejrzysty sposób, podobnie jak poprzednie elementy, które widzieliśmy, listy mają styl predefiniowany przez CSS podstawowa, jednak mamy kilka wariantów, na przykład wystawienie bez stylów w celu uniknięcia wypunktowań oraz wystawienie z wbudowany, ten ostatni sprawia, że ​​lista jest pozioma.

Zobaczmy zatem w poniższym kodzie przykład każdej z tych list, abyśmy mogli użyć ich w naszym kodzie:

 Korzystanie z pliku Base Bootstrap
Lista wbudowana

Pierwszy element
Drugi element
Trzeci element
Czwarty element
Piąty element

Lista bez stylów

Pierwszy element
Drugi element
Trzeci element
Czwarty element
Piąty element

Lista standardowa

Pierwszy element
Drugi element
Trzeci element
Czwarty element
Piąty element

Zobaczmy teraz, jak to wygląda w naszej przeglądarce, gdzie widzimy, że różnice są od razu zauważalne:

Na tym kończymy ten samouczek, widzieliśmy, że podstawowy CSS z Bootstrap Daje nam standardową podstawę do tego, aby elementy, których nie zdefiniowaliśmy lub dostosowaliśmy, pojawiały się w określony sposób bezpośrednio w przeglądarce, co daje nam pełną kontrolę nad naszą aplikacją niezależnie od przeglądarki.