Wprowadzenie do komponentów Bootstrap
Pierwotnie nazwany jako Twitter Blueprint, został opracowany przez Marka Otto i Jacoba Throntona na Twitterze. Bootstrap to darmowy framework CSS, który przyspiesza reagowanie na strony internetowe. Reaktywność oznacza, że różne elementy DOM zmieniają się odpowiednio do zmiany rozmiaru ekranu bez uszczerbku dla elegancji strony internetowej, jak to bywało tradycyjnie w przypadku metod CSS z pikselami lub procentami.
Jest to również nazywane frameworkiem CSS „najpierw mobilne”, ponieważ ma on układ siatki CSS poprzez zdefiniowanie wierszy i kolumn. Ten framework ma również komponenty JavaScript wraz z klasami CSS. Aby skorzystać z tego frameworka, musisz obowiązkowo połączyć jQuery i JavaScript Framework dla Bootstrap wraz z innymi plikami CSS Bootstrap. Te pliki CSS są dostępne do pobrania, a także w postaci CDN (Content Delivery Network).
Różne składniki Bootstrap:
Bootstrap jest wyposażony w dziesiątki komponentów, które można ponownie wykorzystać, aby zapewnić dobre wrażenia użytkownika i interakcje użytkownika na stronie internetowej, takie jak paski nawigacyjne, wyskakujące okienka, listy rozwijane, ikony, przyciski, wstępnie zaprojektowane formularze, a także opcje zmiany rozmiaru różnych elementów DOM.
1) Glyphicons - są to ikony w formacie czcionki dostępne w Bootstrap. Jest ich około 200. Te glifikony można znaleźć na stronie https://glyphicons.com.
Jak tego użyć?
Istnieją glify, które oznaczają prawie wszystkie działania, takie jak powiększenie, edycja, ostrzeżenie, plik, usunięcie itp. I są zdefiniowane w poszczególnych klasach. Musisz więc użyć klasy bazowej i klasy indywidualnej, najlepiej w elemencie span i użyć tych glifikonów.
Składnia:
2) Rozwijane menu - Są to menu oparte na przełącznikach, zawierające listę łączy. Są one bardziej dynamiczne dzięki wtyczce JS i można je znaleźć pod adresem http: // getbootstrap / javascript / # dropdowns
Jak tego użyć?
Musisz użyć klasy .dropdown, ponieważ klasa elementu ma pod nią elementy listy z klasą .dropdown-menu.
Składnia:
3) Grupy przycisków - Za pomocą tego komponentu Bootstrap możesz grupować zestaw przycisków razem w szeregu sąsiadujących ze sobą.
Jak tego użyć?
Zdefiniuj elementy podziału za pomocą klasy .btn-group i zagnieżdż je za pomocą przycisku z klasą .btn. Poprawny
Źle
4) Rozwijane przyciski - Ten element służy do zastosowania elementu przycisku do uruchamiania rozwijanego menu.
Składnia:
5) Grupy wejściowe - Rozszerza klasę form-control i dodaje tekst lub przyciski po obu stronach pola wejściowego elementu wejściowego. Aby użyć tych grup wejściowych, musisz użyć klasy .input-group z klasą .input-group-addon.
Składnia:
@
6) Pasek nawigacyjny - Te komponenty służą jako nagłówki nawigacji dla Twojej strony internetowej. Są one składane w celu rozszerzenia w pionie za pomocą przełączającego się menu hamburgera w urządzeniach o mniejszych rozmiarach ekranu i stają się poziome wraz ze wzrostem szerokości ekranu.
Składnia:
7) Jumbotron - jest to komponent bootstrap, który może rozciągać się na cały ekran (lub okienko ekranu) w celu wyświetlenia niektórych kluczowych treści.
Składnia:
8) Alerty - jest to składnik Bootstrap z wtyczką jQuery, która dostarcza kontekstowe komunikaty zwrotne w zależności od akcji użytkownika. Jest to zasadniczo używane do wyświetlania komunikatów ostrzegawczych.
Składnia: …
9) Paski postępu - ten komponent służy do wyświetlania informacji zwrotnych na temat postępów pracy lub akcji za pomocą paska postępu.
Synatx:
Przykład:
10) Odznaki - Jest to komponent do podkreślenia czegoś takiego jak nieprzeczytane elementy poprzez dodanie klasy .badge do elementu DOM, najlepiej rozpiętości.
Składnia:
Wiadomości 3
11) Podział na strony - ten element zapewnia wielostronicowe stronicowanie witryny, aby treść mogła
być podzielony na wiele stron i poruszać się swobodnie. Zwykle element DOM dla list nieuporządkowanych jest definiowany za pomocą tej klasy .pagination.
Składnia:
Jak to pomoże w twojej karierze?
Wszystkie firmy koncentrują się teraz na interakcji użytkownika i wrażeniach użytkownika (UI / UX). Ponieważ ogromna większość populacji korzysta z urządzeń przenośnych, takich jak tablety i smartfony, które różnią się znacznie pod względem rozdzielczości w pikselach i wielkości ekranu. Dlatego tak ważne jest, aby projekt frontonu był wystarczająco responsywny, aby dostosować się do każdego rodzaju ekranu bez uszczerbku dla elegancji strony internetowej.
Umiejętność Bootstrap zwiększyłaby więc twoją wartość w karierze technicznej, a firmy z niecierpliwością czekają na zatrudnienie cię z przystojną wypłatą. A ponieważ jest to darmowy i open-source, istnieje wiele zakresów, w których możesz wnieść swój wkład jako programista i uczynić go jeszcze lepszym niż jest obecnie.
Wniosek-
Struktura bootstrap jest bardzo przydatnym narzędziem do szybkiego reagowania na strony internetowe. Komponenty objaśnione na tym blogu to niektóre z bardzo często używanych, które pomagają pisać mniej kodu, co zapewnia większą funkcjonalność i dodaje elegancji budowanej stronie internetowej.
Polecane artykuły
Jest to przewodnik po składnikach Bootstrap. Tutaj omawiamy również wprowadzenie i różne składniki bootstrap wraz z jego składnią. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -
- Jak zainstalować Bootstrap
- Angular vs Bootstrap
- Szkolenie Bootstrap
- Pytania do wywiadu Bootstrap
- Jak korzystać z układu Bootstrap?
- Top 5 rodzajów Boostrap z przykładowym kodem