Wykorzystanie Bootstrap kontenera zapewni użytkownikowi potężną bazę. A to, co naprawdę robi wrażenie, to szeroka gama komponentów, które można dodać do witryny. Ponieważ Bootstrap ma już wbudowany kod CSS i javascript, rozwijane są komponenty i funkcje. Oczywiście użytkownik może je dalej edytować, aby dostosować witrynę do własnych upodobań.

Zasada sieciowa

Ten zestaw narzędzi do tworzenia stron internetowych i aplikacji internetowych opiera się na siatce w celu prawidłowego skalowania komponentów do wyświetlania na różnych ekranach. System siatki Bootstrap składa się z kontenerów, wierszy i kolumn, które są używane do określonego układu witryny. Kontenery Bootstrap służą do określania szerokości układu. Elementy są dodawane do kontenerów i wpływają na ich szerokość. Jest to element o klasie = "container" i wpływa na wszystkie elementy w nim zawarte.


Pojemniki mają 15 pikseli, które zmiękczają widok z końca strony. Linie i kolumny są dodawane wewnątrz kontenerów z domyślną domyślną szerokością kontenera Bootstrap, która jest różna w zależności od wielkości przeglądarki. Szerokość urządzenia jest pokazana w poniższej tabeli:

Zobacz szerokość urządzenia



Szerokość pojemnika



Mniej niż 768 pikseli 18)


Auto



768px - 991 px



750 px


)
992px - 119px



970 px



1200 pikseli i więcej



1170 px

Reguły siatki:

Kolumny powinny byćbezpośredni element potomny linii.

​​

Linie są używane tylko do przechowywania kolumn i nic poza tym.

Linie powinny być umieszczone wewnątrz kontenera.

Te zasady są bardzo ważne. Linie i kolumny zawsze działają razem, a użytkownik nie powinien używać jednego bez drugiego.


Na początku może się to wydawać skomplikowane, ale to naprawdę proste, wystarczy zrozumieć, jak działa Grid. Jeśli użytkownicy nie chcą, aby pojemniki zmieniały się na ustaloną szerokość, możesz użyć class = "container-fluid" zamiast class = "container". Spowoduje to, że pojemniki zawsze będą pasować do kontenera Bootstrap do pełnej szerokości ekranu i zmienią rozmiar stałej szerokości. System siatki pozwala na maksymalnie 12 kolumn na stronę. Mogą być używane osobno lub zgrupowane razem. Aby zgrupować kolumny razem, musisz utworzyć wiersz, do którego dodaj div z class = "row", który zawiera kod kolumny.

Ustawianie interwału

Aby uzyskać schludny kształt, najpierw trzeba zrozumieć, w jaki sposób Bootstrap ustawia interwał. Dla wszystkich formularzy należy umieścić etykietę i element kontrolny w klasie = "grupa formularzy". Kontrolki i etykiety mają styl interwałów. Muszą koniecznie być w swojej własnej klasie. Klasa kontroli form ustawia szerokość kontenera Bootstrap na 100%, wymuszając objęcie szerokości formularza i zmianę rozmiaru za pomocą okna. Ta właściwość służy do wprowadzania i wybierania elementów sterujących. W ten sposób wybrana formant zostanie sformatowany za pomocą polecenia onkontrola formularza i będzie wyglądać jak opcja z klasą kontroli formularza lub bez niej, a zarządzanie wejściami zostanie sformatowane z dodatkiem formularza kontrolnego.

Elementy sterujące

Elementy sterujące, takie jak pola tekstowe, pola wyboru, to części, które można łatwo dodać do formularza. Zaloguj się to pola, w których użytkownik może wprowadzić tekst. Jest to podstawowa zasada do wejścia do Bootstrapu kontenera, używając atrybutu HTML5 tekstu. Typ ogłasza pojawienie się wejścia. Wypełniacz definiuje tekst, który będzie wyświetlany w polu wejściowym. Te typy można zadeklarować, dodając do danych wejściowych. Jeśli chcesz dodać wiadomość e-mail, zmień ją na type = "email". Należy pamiętać, że należy włączyć typ wejścia, aby formant był poprawnie sformatowany. Kontrola obszaru tekstowego to obszar, który pozwala na użycie dużej ilości tekstu, na przykład w sekcji komentarzy. Po dodaniu obszaru tekstowego możesz dostosować rozmiar, deklarując liczbę wierszy, które chcesz przechwycić. Ponieważ Bootstrap kontenerów jest zbudowany na wierszach i kolumnach, możesz zmniejszyć lub zmniejszyć obszar tekstu, zwiększając lub zmniejszając liczbę wierszy. Pola wyboru pozwalają użytkownikom wybrać kilka opcji. Domyślnie pola wyboru są wyświetlane w pionie. Możesz jednak zmienić pola wyboru, aby wyświetlały się w poziomie, zmieniając typ type = "checkbox-inline". Czcionki wbudowane są skonfigurowane inaczej niż czcionki podstawowe. We wbudowanym elemencie flag klasa ma przypisany = "checkbox-inline". Jeśli jednak spojrzysz na podstawowy kod kontrolny, zobaczyszże class = "checkbox" jest zadeklarowane w elemencie, a nie w elemencie.
Przełącznik jest podobny do znacznika wyboru. W tym samym czasie można wybrać tylko jeden przełącznik, podczas gdy same flagi mogą mieć kilka wyborów. Podobnie jak w przypadku flag, przełączniki pionowe są wyświetlane domyślnie, chociaż można również zmienić kod wyświetlany i poziomo.

Rodzaje formularzy załadunkowych

Istnieje kilka rodzajów formularzy: podstawowe, wbudowane i poziome. Każdy z nich różni się na swój sposób. Osadzone mają elementy zwane elementami kontrolnymi, wyrównane w pionie. W przypadku kształtów poziomych elementy sterujące są skonfigurowane poziomo. Główna forma pochodzi z globalnego stylu układu. Aby utworzyć podstawowy formularz, wystarczy utworzyć formularz w formacie HTML za pomocą elementu

, a następnie dodać elementy sterujące Bootstrap do znaczników

. Pozostałe dwa typy formularzy używają klas do ich rozróżnienia. Jeśli klasa nie jest określona, ​​domyślny formularz odpowiada podstawowemu. Aby utworzyć wbudowany formularz, musisz dodać element class = "form-inline"

. Automatycznie dostosuje kształt w pionie. Podobnie jak w formularzu śródliniowym, formę poziomą uzyskuje się poprzez dodanie klasy class = "form-horizontal" do elementu. Automatycznie wyreguluje regulatory w poziomie.

Ustawianie wierszy i kolumn

Wiersze obejmują szerokość Bootstrap kontenera. Mają na końcu ujemny zapas o wielkości 15 pikseli, zainstalowany przez jego pojemnik. Wynika to z faktu, że każdy z nich ma swój własny 15-pikselowyzapas, który zastępuje znacznik pojemnika. Kolumny wyrównane obok siebie będą miały 15-krotne krawędzie, prowadzące do 30-pikselowego brzegu między dwiema kolumnami.

Linie mają rejestrację -15 px, co anuluje dodanie 15 px kontenera. Zawartość kolumny będzie zależeć od pola 15 pikseli kolumny. Kolumny mają rejestrację 15 pikseli. Kolumny obok siebie będą miały wcięcie o wartości 15 pikseli, co spowoduje bufor o wielkości 30 pikseli. Zastąp prefiks i numer kolumny dominującym rozmiarem i liczbą kolumn. Prefiksy określają, które urządzenie ma przypisaną kolumnę 4 do Bootstrap i wysokość pojemnika. Na przykład xs jest przeznaczony dla małych ekranów, takich jak telefony.

Prefiks



Za



xs



= 1200 px (notebooki )

Gdy kolumna jest określona z prefiksem dla mniejszego urządzenia, będzie ona wyświetlana w podobny sposób na większych urządzeniach. Innymi słowy, kolumna, która jest zdefiniowana jako sm, będzie działać dla urządzeń o rozmiarze tabletu lub więcej. Zalety używania kolumn:

Utwórz przekroje poziome z rzutni.

Mogą mieć różne szerokości.

Może różnić się szerokością przy różnych szerokościach ekranu.

Możliwość ustawiania w stosy poziomo od lewej do prawej, a następnie pionowo w górę iw dół.

Może zmienić pozycję (układ) braci i sióstr w tej samej linii.

Mają taką samą wysokość jak inni bracia i siostry w jednej linii.

Może "rosnąć" lub "ściskać" na szerokość.

Może automatycznie "zawijać" lub"Drain" w razie potrzeby w pionie lub przy różnych szerokościach ekranu.

Może zawierać więcej wierszy i & amp; Kolumny__ zagnieżdżanie.

Aktualizacja struktury css

Po wielu latach oczekiwania Bootstrap 4 został wydany w styczniu 2018 roku. Bootstrap był pierwszą rozpowszechnioną strukturą css. Nowa wersja programu opiera się na tej udanej fundacji i ma wiele ulepszeń, które ułatwiają korzystanie z sieci. Bootstrap 4 to OG odpowiednich układów. Nowy plik konfiguracyjny angular.json ma zupełnie inną strukturę niż oryginalny kątowy-cli.json.
Jeśli użytkownik zamierza skupić się na używaniu siatki do tworzenia elastycznych układów w aplikacjach Angular, musi jedynie użyć pakietów bootstrap-grid i bootstrap-reboot. Możesz dodać pliki Bootstrap kontenera CSS bezpośrednio do właściwości "styles" pliku angular.json. Importowanie siatki w głównym pliku styli.scss ma jedną ważną zaletę przed zaimportowaniem do pliku angular.json. Pozwala modyfikować dowolną zmienną używaną przez definicje stylu Bootstrap. W praktyce pomocne może być utworzenie pliku styles-variables.scss obok pliku styles.scss w folderze src z wrażliwymi punktami przerwania zdefiniowanymi domyślnie w Bootstrap. Użycie styles-variables.scss pozwala zastąpić domyślną siatkę i zaimplementować własne style niestandardowe. Dlatego możesz go zaimportować w pierwszym wierszu - styles.scss, który będzie używany z Bootstrapem, ale także w dowolnym innym pliku stylu komponentu do spójnej implementacji odpowiedzi selektywnej.

Instrukcje Bootstrap dla początkujących

Bootstrap to bardzo przydatna platforma interfejsu dlaszybszy i łatwiejszy rozwój sieci. Użytkownik nie musi martwić się o to, że ma praktyczne doświadczenie, mając potężny interfejs podczas korzystania z niego. Przewodnik dla początkujących Bootstrap obejmuje następujące procedury, które będą wymagały:

Pobierz lub włącz Bootstrap.

Napisz podstawowy kod HTML.

Włącz Bootstrap CSS.

Włącz jQuery Library Enable Bootstrap javascript.

Dodaj obsługę IE8 do zapytań HTML5 i multimedialnych.

Dodaj pasek nawigacyjny.

Dodaj treść do strony kontenera.

Dodaj tytuł.

Dodaj stół.

Dodaj formularz do tabeli.

Dodaj przycisk Bootstrap z Glyphicon.

Dodaj okno z dobrym wyszukiwaniem.

Final Code Live Demo.

Zasoby internetowe.

Poniższe sekcje staną się przewodnikiem krok po kroku dla pierwszego tworzenia stron internetowych przy użyciu Bootstrap.

Pobierz CDN i HTML5

Istnieje kilka sposobów wykorzystania Bootstrap na stronie internetowej. Jedną z nich jest użycie CDN lub sieci dostarczania treści. Używanie bootstrap CDN oznacza, że ​​użytkownik nie pobierze ani nie zapisze początkowych plików rozruchowych na serwerze lub komputerze lokalnym. Aby to zrobić, utwórz nowy plik index.html. Otwórz plik, wprowadź następujący kod i zapisz go. Jeśli użytkownik chce użyć swojej kopii, napisz:



Musisz upewnić się, że plik został pobrany. Następnie umieść go w tym samym katalogu, co index.html, na przykład w folderze "bootstrap-4". jQuery jest wymagany dla funkcji javascript Bootstrap. Jeśli chcesz użyć swojej kopii jQuery:



Przed upewnieniem się, że jQuery jest załadowany i umieszczony w tym samym katalogu, co index.html, na przykład nazwa pliku jQuery to "jquery-300.min.js". Pojemnik-płyn jest głównym elementem o 100% szerokości własnego układu, wykonuje boczne wcięcia do projektowania kolumn. Płyn Bootstrap Container tworzy pełną szerokość, na przykład płynny pojemnik, na mniejszych urządzeniach.

Obsługa javascript i IE8

Funkcje Bootstrap, takie jak pasek nawigacji, wymagają pliku bootstrap javascript. Aby to zrobić, należy umieścić następujący kod po kodzie z poprzedniej sekcji:



Należy również dodać obsługę IE8 dla HTML5 i zapytań o media. Bootstrap to baza połączona z technologią mobilną, która reaguje na różne urządzenia i rozmiary ekranów. Panele nawigacyjne są bardzo fajne. Użytkownicy nie będą szukać danych w witrynie, jeśli kontener Bootstrap jest używany centralnie poprawnie. Aby to zrobić, umieść następujący kod w tagu.

Strona główna

Wszystkie

Demo

Kontakt

Znacznik div będzie zawierał treść strony internetowej. Jest to ważne, ponieważ określa szerokość strony treści. Nie rozrzuci się, jeśli użytkownik użyje dużego rozmiaru ekranu. Aby dodać kontener zawartości, umieść następujący kod w kodzie z poprzedniej sekcji.

Tworzenie nagłówka tabeli

Tytuł jest ważny, ponieważ informuje użytkownika o stronie, na której się znajduje. Umieść następujący kod między tagami "div kontenera" z poprzedniej sekcji.



Strona próby próbki z formularzem



W tym przykładzie jest tabela, w którejzapisz elementy formularza, takie jak pole tekstowe. Pulpit wygląda dobrze, nie ma efektu powieszenia i reaguje na działania użytkowników. Aby to zrobić, umieść następujący kod w poprzedniej sekcji.



Nazwisko







stykają się z liczby


(175 )



adresu







Lista


(191 )











Przykład tej postaci będą zawierać więcej pól tekstowych, pole tekstowe, a Rozwijane lista. Aby to zrobić, zamień kod z poprzedniej sekcji na:










)



adresu







Lista


(235 )

Dodaj przycisk GLYPHICON

Glyphicon to biblioteka monochromatycznych ikon i symboli stworzonych z naciskiem na prostotę i wygodną orientację. Ikony przycisków wyglądają ładnie, a biblioteka sygnalizuje użytkownikowi, do czego przycisk jest przeznaczony. Ikony i kolorowe przyciski mogą łatwo wskazywać, co powoduje przycisk w aplikacji internetowej. Aby to zrobić, umieść następujący kod między "ostatnimi tagami" z poprzedniej sekcji.



Można również dodawać notatki za pomocą ładowania początkowego, umieszczając następujący kod przed otwarciem znacznika dev z poprzedniej sekcji.

Głowa w górę!codeofaninja.com!

Jeżeli użytkownik pobierze kod, ale wyjście otrzyma następujący komunikat:

Artykuł



Wyszczególnienie



Index-cdn.html



ZastosowaniaStruktura Bootstrap w CDN. Działa, jeśli komputer jest podłączony do Internetu.



Index-local.html



Używa pobranej struktury bez CDN. Działa na lokalnym hoście. W Bootstrap 4 obraz tła rozmiaru kontenera będzie działał nawet wtedy, gdy komputer jest wyłączony.


Oczywiście Bootstrap oferuje użytkownikowi mnóstwo doskonałych narzędzi, które przyspieszają rozwój aplikacji. Oszczędza wiele godzin, a nawet dni w projektowaniu i kodowaniu dziwnego interfejsu użytkownika. Składniki oprogramowania i wtyczki są najdokładniej udokumentowane, wypełnione żywymi przykładami i blokami kodu dla wygody użytkownika. Bootstrap to bardzo przyzwoite narzędzie do projektowania i projektowania witryn mobilnych, które pozwala najpierw zaprojektować swoją strukturę, a później - czcionki, kolor i styl. Trzeba po prostu poświęcić trochę czasu na poznanie funkcji metody i jej najlepszego wykorzystania.