Korzystanie z komponentów Bootstrap

Bootstrap Ma dwie solidne podstawy, które dają nam standardowy punkt wyjścia dla różnych rozwiązań projektowania stron internetowych, które potrzebujemy lub chcemy zrobić, są to Grid i podstawowy CSS, za pomocą tych dwóch narzędzi możemy zbudować dużą centralną bazę, w której możemy umieść go na spoczynku wszystkich elementów składających się na nasz interfejs.
Jak wszystkie podstawy, te same z siebie nie wykonują reszty konstrukcji, aby osiągnąć większy stopień wyrafinowania i szczegółowości konieczne jest zastosowanie dodatkowych elementów, które znajdują się na naszej podstawie i oczywiście ich moc będzie miała wpływ na solidność. z tych ostatnich.
W przypadku Bootstrap Mamy kilka komponentów, które pomagają nam zmaksymalizować szczegółowość naszych projektów, komponenty, które wahają się od ikon, paneli, a nawet nagłówków. Elementy, które pomagają nam odróżnić i wyróżnić naszą aplikację od innych.
Składniki w Bootstrap Mogą być używane na naszych stronach niezależnie od pozostałych, to znaczy możemy wygenerować tyle komponentów, ile potrzebujemy w jednym dokumencie, bez konfliktów z innymi.
Dodatkowo domyślnie podstawowy styl jest już wstępnie zdefiniowany, dzięki czemu możemy szybko i bez większego wysiłku zbudować naszą aplikację, gdzie w końcu możemy dostosować całą naszą aplikację, zmieniając styl bazowy na własne style.
Składniki mogą być CSS, JavaScript lub jedno i drugie, więc niektóre oprócz Podstawowy CSS będą wymagały bibliotek innych firm, takich jak jQuery, może się to wydawać nieco niewygodne, ale w rzeczywistości implementacja jest tak prosta, że ​​nawet nie zdajemy sobie sprawy, że używamy więcej rzeczy niż jest to domyślnie Bootstrap.
Jednym z pierwszych elementów, które musimy zrozumieć, są ikony, ponieważ dzięki tym małym fragmentom obrazu możemy sprawić, że użytkownik zrozumie funkcjonalność dowolnej części naszego projektu, a więc gdy widzimy ikonę dużego x wiemy, że jest to związane z zamknięciem bieżącej sekcji lub w przypadku, gdy widzimy ikonę w postaci + będziemy wiedzieć, że ma coś dodać.
Glifyw Bootstrap jest biblioteka ikon Glify, bardzo popularna w projektowaniu stron internetowych i oferująca nam praktycznie ikonę do każdej czynności, którą możemy wykonać na stronie internetowej, przyśpiesza nas to dużo pracy, ponieważ nie musimy myśleć o szukaniu kogoś, kto zaprojektuje elementy graficzne, które służą tych celów.
Na poniższym obrazku widzimy ikony, które mamy bezpośrednio na stronie internetowej Bootstrap:

POWIĘKSZAĆ

To tylko niewielka próbka dostępnych ikon, ale jeśli przejrzymy oficjalną stronę, zobaczymy wszystkie opcje, które mamy do użytku.
Korzystanie z tych ikon jest bardzo proste, wystarczy dodać klasę glifikon do żywiołu HTML a następnie dodaj klasę odpowiedniej ikony z dostępnej listy. Ikony są zwykle dodawane do elementów takich jak lub ponieważ w ten sposób upewniamy się, że są tylko wizualne, uzyskując w ten sposób najlepszy możliwy efekt. Zobaczmy zatem w poniższym kodzie przykład użycia tego komponentu w HTML.

 Używanie glifów w Bootstrap
Zapłać w
Poczta
Użytkownicy
Kosz
Wycofać się

W tym kodzie umieściliśmy po prostu wtrącenia z naszych bibliotek Bootstrap odpowiadające, dodawanie jQuery jako bibliotekę innej firmy, a następnie dodaj bibliotekę js z Bootstrap, ważne jest, aby zachować tę kolejność, ponieważ biblioteka js z Bootstrap potrzeba jQuery a jeśli jest uwzględniony to da nam błąd w implementacji.
Następnie w naszym utworzyliśmy kilka sekcji, w których dodaliśmy GlifyDla naszych celów wystarczyło umieszczenie ikon w etykiecie. Jeśli wykonamy w naszej przeglądarce, otrzymamy następujący wynik:

Jak widzimy, ikony towarzyszą wiadomościom, nadając im większą wagę i zrozumienie, na przykład w polu wyszukiwania, jeśli ktoś nie mówi po angielsku, nie zrozumie wiadomości SzukajAle jeśli korzystałeś z systemów komputerowych i od razu widzisz ikonę lupy, wiesz, że odnosi się ona do wyszukiwania, to jest prawdziwa moc tego komponentu.
Kolejnym ważnym elementem są zakładki nawigacyjne, które pozwalają nam organizować nasze treści na tej samej stronie, dzięki czemu unikamy zajmowania dużej przestrzeni, a tym samym ułatwiają życie użytkownikowi, nie musząc uczyć się dużej liczby sekcji w naszej aplikacji internetowej.
Aby korzystać z tych zakładek potrzebujemy pomocy klasy nawigacja, usuwa domyślny styl HTML żywiołów i jego synowie , ułatwiając tym samym użytkowanie i późniejsze dostosowanie do naszego projektu. Aby z tego skorzystać, wystarczy dodać klasy nawigacja Tak karty nawigacyjne do elementu i dzięki temu uzyskamy odpowiedni wynik.
Zobaczmy poniższy kod, w którym implementujemy to rozwiązanie, podobnie jak w poprzednim przykładzie musimy dołączyć pliki bootstrap.css, bootstrap-theme.css, bootstrap.js Tak jquery.js, zobaczmy nasz kod:

 Używanie glifów w Bootstrap

Bezpieczeństwo
Dokumentacja
Zawartość

Jak zauważamy użycie elementu dzięki tej klasie możemy wykonać konstrukcję HTML normalne, ale wynik, jak zobaczymy poniżej, daje nam inny sposób uporządkowania informacji. Możemy podkreślić inny interesujący aspekt naszego kodu i jest to połączenie Glify z tym rozwiązaniem, pokazując, co wyjaśniamy o niezależności elementów.

POWIĘKSZAĆ

Innym bardzo pomocnym komponentem są rozwijane menu, które pozwalają nam skondensować wiele opcji na małej przestrzeni, szczególnie w przypadku stron internetowych, które mają wiele kategorii, które muszą uporządkować.
UpuścićSkładnik Bootstrap kto się tym zajmuje, nazywa się Upuścić i podobnie jak poprzedni składnik jest stosowany w elemencie jednak jego konstrukcja jest nieco bardziej złożona, chociaż nie wykracza poza styl pracy HTML.
Najpierw musimy mieć element będący nagłówkiem listy rozwijanej, potem musimy mieć który będzie zawierał opcje do wyświetlenia. W tym celu przeformułujemy poprzedni przykład, aby dodać listę rozwijaną w zakładce treści, dzięki czemu będziemy mogli lepiej zrozumieć nasz przykład.
Podsumowując, pokażemy tylko zawartość, ponieważ nagłówek będzie taki sam. Zobaczmy kod dla funkcji naszego menu rozwijanego:

Bezpieczeństwo
Dokumentacja
Zawartość

Filmy
Obrazy
Audio

Widzimy wtedy, jak w żywiole Rozpoczęliśmy listę rozwijaną z klasą upuścić, to w ramach tego definiujemy element jako wyzwalacz opcji podczas dodawania klasy rozwijane przełączanie i wreszcie stworzyliśmy co ma klasa menu rozwijane aby określić, że ma wszystkie opcje, które zobaczymy. Jeśli uruchomimy nasz przykład w przeglądarce, otrzymamy następujący wynik:

POWIĘKSZAĆ

Oczywiście to tylko niewielka część tego, co możemy osiągnąć, ponieważ można zawrzeć więcej efektów i przy różnych stylach zmienić ich wygląd. Na tym kończymy ten samouczek, w którym widzieliśmy trzy najbardziej przydatne komponenty, których możemy użyć w Bootstrap, dzięki czemu uzyskujemy znacznie większą personalizację naszej aplikacji.