W 2011 roku Twitter wprowadził framework Bootstrap. Od tego czasu ta struktura CSS została dwukrotnie przeredagowana, a ostatnia (Bootstrap 3) została wydana w 2013 roku. Bootstrap 3 przekształcił bibliotekę CSS, wdrażając podejście mobile-first, które pozostawiło framework całkowicie responsywny.
Od 2022 r. Bootstrap jest w wersji piątej i jest jednym z najpopularniejszych frameworków frontendowych. Ma obszerną listę gotowych komponentów i imponującą kolekcję wtyczek JavaScript. W tym artykule dowiesz się, jak korzystać z Bootstrap i jak najlepiej wykorzystać jego funkcje.
Instalowanie Bootstrapa w Twoim projekcie
Są trzy sposoby, aby użyj Bootstrapa w swoim projekcie. Możesz pobrać i hostować pliki CSS i JavaScript, zainstalować je w swoim projekcie za pomocą npm lub skopiować i wkleić odpowiednie łącza cdn w swoim projekcie.
Przy podejściu cdn musisz pamiętać, aby umieścić link Bootstrap przed jakimkolwiek innym linkiem CSS w tagu head pliku HTML.
Niektóre komponenty Bootstrap mają czynności funkcjonalne, takie jak przełączanie przycisków i pozycjonowanie, które wymagają importu skryptów JavaScript i Popper. Tak więc, jeśli zamierzasz korzystać z dowolnych komponentów funkcjonalnych, musisz również dodać tag skryptu do pliku HTML.
Ostatnią rzeczą, której potrzebujesz, aby zacząć korzystać z Bootstrap, jest wziernik etykietka.
Ponieważ Bootstrap jest technologią mobilną, wziernik etykietka pomoże w responsywnym projektowaniu. Prostym sposobem wykorzystania bootstrapu w projekcie jest po prostu kopiowanie Szablon startowy Bootstrapa.
Tworzenie strony internetowej za pomocą Bootstrapa
Kiedy tworzysz nową stronę internetową, jedną z pierwszych rzeczy, które musisz wziąć pod uwagę, jest układ. Następnie możesz przejść do innych komponentów, takich jak przyciski i typografia.
Bootstrap zawiera kolekcję komponentów strukturalnych, których możesz użyć do organizowania elementów na stronie internetowej. Te struktury układu obejmują:
- Kontenery
- Krata
- Kolumny
- Rynny
- Punkty przerwania
Korzystając z nieco zmienionej wersji szablonu Bootstrap startowego, możesz zacząć zarysować strukturę swojej strony internetowej i dodać nowe komponenty.
Plik index.html
Wymagane metatagiBootstrap CSS
Bootstrap
Oddzielny Popper i Bootstrap JS
Klasa kontenera Bootstrap
Bootstrap pojemnik klocki klas, zawiera i wyrównuje elementy na Twojej stronie internetowej. Jeśli planujesz skorzystać z Bootstrapa domyślna siatka, będziesz musiał również użyć Bootstrapa pojemnik klasa. Istnieją trzy rodzaje pojemnik zajęcia; pojemnik, pojemnik-płyn, oraz kontener-{punkt przerwania}. Klasa kontenera jest kontenerem domyślnym; jest responsywny i ma stałą szerokość w każdym z sześciu punktów przerwania Bootstraps.
Sześć domyślnych punktów przerwania Bootstrapa obejmuje:
- Bardzo mały: Mniej niż 576 pikseli.
- Mały: Większe lub równe 576px.
- Średni: Większe lub równe 768px.
- Wielki: Większe lub równe 992 piks.
- Bardzo duże: Większy lub równy 1200px.
- XX-duży: Większy lub równy 1400px.
Aby skorzystać z Bootstrapa pojemnik w swoim projekcie możesz po prostu dodać żądaną klasę kontenera do zewnętrznego div na swojej stronie internetowej.
Korzystanie z kontenera Bootstrapa
umieść tutaj elementy strony internetowej Wstawienie powyższego kodu do treści istniejącego pliku HTML sprawi, że Twoja strona będzie responsywna, a także utworzy wypełnienie z każdej strony Twojej strony.
System siatki Bootstrap
Siatka Bootstrapa wykorzystuje system dwunastokolumnowy, który opiera się na wiersz oraz przełęcz klasy siatki, a także klasa kontenera. Każdy wiersz ma dwanaście kolumn, a każdy element może obejmować co najmniej jedną z tych kolumn. Klasa kolumny wskaże, ile kolumn powinien zajmować element. Na przykład element używający kol-2 klasa obejmie dwie kolumny, element używający kol-3 klasa obejmie trzy kolumny i tak dalej.
System siatki Bootstrap oparty jest na module flexbox. Jeśli tylko dwie kolumny zajmują rząd, podzielą przestrzeń równo między siebie. ten rynna klasa jest jednym z elementów konstrukcyjnych Bootstrap i kontroluje odstępy między każdą kolumną w system siatki. Każdy krata kolumna ma 12 pikseli po obu stronach.
Korzystanie z systemu gridowego Bootstrapa
główna treść na stronie internetowej
Artykuł
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, differio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Wstawienie powyższego kodu do div kontenera stworzy system siatki Bootstrap składający się z trzech wierszy i dwóch kolumn. Pierwszy wiersz na górze będzie zawierał pasek nawigacyjny, trzeci wiersz na dole będzie zawierał stopkę witryny, a drugi wiersz pośrodku będzie zawierał zawartość strony internetowej. Drugi rząd ma dwie kolumny — artykuł główny i bok.
Utworzenie lokalnego pliku CSS i dodanie obramowania do każdej sekcji siatki pozwoli Ci zobaczyć go wyraźniej.
Plik style.css
.wiersz{
obramowanie: 2px niebieskie stałe;
}
.col, .col-sm-4{
obramowanie: czerwone stałe 2px;
}
Link do powyższego pliku CSS spowoduje utworzenie w przeglądarce następujących danych wyjściowych:
Oczywistą różnicą na powyższym obrazku jest rozmiar kolumn. Zwykle dwie (lub więcej) kolumny z rzędu zajmują tę samą ilość miejsca, chyba że wyraźnie zaznaczysz inaczej. ten col-sm-4 Klasa w powyższym kodzie HTML zapewnia, że druga kolumna obejmuje tylko cztery z dwunastu kolumn w rzędzie. ten sm w col-sm-4 class reprezentuje mały punkt przerwania, więc sekcja boczna zajmie tylko cztery kolumny od małego punktu przerwania i powyżej.
Komponenty Bootstrapa
Po wybraniu układu strony następnym krokiem jest dodanie elementów budujących witrynę, które Bootstrap nazywa komponentami. Lista komponentów Bootstrapa obejmuje:
- Pasek nawigacyjny
- guziki
- Grupa przycisków
- Lista grup
- Karty
- Zawalić się
- Menu rozwijane
Klasa paska nawigacyjnego Bootstrap
Każdy pasek nawigacyjny Bootstrap wymaga pasek nawigacyjny klasa. Wymagają również użycia lub przypisanie słowa kluczowego „nawigacja” do Bootstrap rola atrybut w rodzicu paska nawigacyjnego div. Aby pasek nawigacyjny reagował, musisz użyć zwiń wtyczkę JavaScript.
Bootstrap pasek nawigacyjny klasa używa an aria-prąd atrybut, który przyjmuje wartość „page” wskazującą bieżącą stronę lub „true” wskazującą bieżącą sekcję strony internetowej. Wartość, którą przypiszesz, będzie zależeć od struktury Twojej witryny (pojedyncza strona lub wiele stron). Powinieneś również użyć aktywna klasa aby wskazać bieżącą stronę lub sekcję.
Korzystanie z paska nawigacyjnego Bootstrap
Wymiana nawigacji wiersz Bootstrapa krata z powyższym kodem utworzy w Twojej przeglądarce następujące dane wyjściowe:
W powyższym kodzie znajduje się kilka innych ważnych klas i atrybutów Bootstrap, takich jak marka-navbar klasa, która jest skierowana do sekcji logo twojego pasek nawigacyjny. ten pasek nawigacyjny jest również całkowicie responsywny dzięki zwiń wtyczkę JavaScript.
Responsywny pasek nawigacyjny
Być może pamiętasz, że Bootstrap ma sześć domyślnych punkty przerwania a jeden z tych punktów przerwania jest duży (lg). ten navbar-rozwiń-lg klasa w powyżej rozwija się do poziomej listy elementów nawigacji w dużym punkcie przerwania i powyżej, a lista ta powraca do przycisku w dowolnym punkcie przerwania poniżej dużego.
Jeśli chcesz dowiedzieć się więcej o tworzeniu responsywnych stron internetowych, przygotowaliśmy fragment opisujący jak to zrobić za pomocą zapytań o media w HTML i CSS.
Komponent przycisku Bootstrap
Bootstrap przycisk komponent używa i wymaga ustawienia rodzaj atrybut do „przycisku”.
Bootstrap posiada kilka rodzajów przycisków. Aby stworzyć bardziej konwencjonalny przycisk, użyjesz btn klasy, ale aby utworzyć przycisk hamburgera, jak w powyższym kodzie, użyjesz przełącznik paska nawigacyjnego klasa.
Kiedy powinieneś używać Bootstrapa?
Bootstrap jest znany jako jeden z bardziej popularnych frameworków CSS, ponieważ jest pionierem. Na długo zanim responsywne projektowanie było tak powszechne w tworzeniu oprogramowania, Bootstrap przekształcił się w całkowicie responsywny framework.
Przez lata Bootstrap stale się rozwijał i ulepszał, czyniąc go numerem jeden wśród najlepszych firm, takich jak Twitter i Spotify. Jednak nie zawsze będzie to najlepsza opcja dla Twoich potrzeb związanych z tworzeniem oprogramowania. Na przykład, jeśli tworzysz aplikację React, istnieje system projektowania o nazwie MUI, który jest dostosowany do aplikacji React.
Material-UI ma nową nazwę i ma na celu stworzenie nowego systemu projektowania alternatywy dla Material Design. Oto jak możesz używać MUI w projektach ReactJS.
Czytaj dalej
- Programowanie
- Świergot
- Wskazówki dotyczące kodowania
- Programowanie
- Narzędzia programistyczne
Kadeisha Kean jest programistą zajmującym się pełnymi stosami oprogramowania i pisarzem technicznym/technologicznym. Ma wyraźną umiejętność upraszczania niektórych z najbardziej złożonych koncepcji technologicznych; produkcja materiału, który może być łatwo zrozumiały dla każdego nowicjusza w dziedzinie technologii. Pasjonuje się pisaniem, tworzeniem ciekawego oprogramowania i podróżowaniem po świecie (poprzez filmy dokumentalne).
Zapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować