Въведение в компонентите на Bootstrap
Първоначално наричан като план за Twitter, това е разработено от Марк Ото и Джейкъб Thronton в Twitter. Bootstrap е безплатна CSS рамка, която дава отзивчивост на уеб страниците. Чрез отзивчивост това означава, че различните DOM елементи съответно оразмеряват себе си с промяната на размера на екрана, без да се компрометира елегантността на уеб страницата, както иначе би станало традиционно с пиксел или процентно оразмеряване на CSS методите.
Това също се нарича като "мобилна първа" CSS рамка, тъй като е проектирана да има CSS Grid оформление чрез определяне на редовете и колоните. Тази рамка също има компоненти на JavaScript, заедно с CSS класове. За да използвате тази рамка, задължително трябва да свържете jQuery и JavaScript Framework за Bootstrap заедно с останалите CSS файлове Bootstrap. Тези CSS файлове са достъпни за изтегляне, както и под формата на CDN (Network Delivery Network).
Различни компоненти на Bootstrap:
Bootstrap е снабден с десетки компоненти, които могат да бъдат използвани повторно, за да осигурят добро потребителско изживяване и потребителски взаимодействия в уеб страница като навигационни ленти, изскачащи прозорци, падащи менюта, икони, бутони, предварително проектирани форми, както и опции за оразмеряване на различни елементи на DOM.
1) Glyphicons - Това са иконите с форматиран шрифт, които се предлагат в Bootstrap. Те са около 200 на брой. Тези глификони могат да бъдат намерени на https://glyphicons.com.
Как се използва?
Има глификони, които означават почти всички действия като увеличение, редактиране, предупреждение, файл, изтриване и т.н., и те са дефинирани в отделен клас. Така че, трябва да използвате базовия клас и индивидуалния клас, в идеалния случай в педя елемент и да използвате тези глификони.
Синтаксис:
2) Dropdownns - Това са менютата, базирани на превключване, списък с връзки. Те са направени по-динамични от приставката JS и могат да бъдат намерени на http: // getbootstrap / javascript / # dropdownns
Как се използва?
Трябва да използвате .dropdown класа, тъй като класът на елемента има елементите от списъка под него с класа .dropdown-меню.
Синтаксис:
3) Групови бутони - С този компонент Bootstrap можете да групирате набор от бутони заедно в серия, съседна една на друга.
Как се използва?
Определете елементи за разделяне с .btn-class клас и ги вмъкнете с бутон с .btn клас. правилен
погрешно
4) падащи бутони - Този компонент се използва за използване на бутонен елемент за задействане на падащо меню.
Синтаксис:
5) Групи за въвеждане - Това разширява класа за контрол на формата и добавя текст или бутони от двете страни на полето за въвеждане на входен елемент. Трябва да използвате .input-group class с клас .input-group-addon, за да използвате тези входни групи.
Синтаксис:
@
6) Navbar - Тези компоненти служат като навигационни заглавки на вашия уеб сайт. Те се свиват, за да се разширяват вертикално с превключващо меню за хамбургер в устройствата с по-малки размери на екрана и стават хоризонтални с увеличаване на ширината на екрана.
Синтаксис:
7) Jumbotron - Това е компонент за зареждане, който може да се разпростира през целия екран (или прозорец за показване), за да покаже някакво ключово съдържание.
Синтаксис:
8) Сигнали - Това е компонент Bootstrap с плъгин jQuery, който предоставя контекстуални съобщения за обратна връзка в зависимост от действието на потребителя. Основно се използва за показване на предупредителни съобщения.
Синтаксис: …
9) Лента за прогрес - Този компонент се използва за предоставяне на визуализации на обратната връзка за напредъка на работата или действието с лента за напредък.
Synatx:
Пример:
10) Значки - Това е компонент за подчертаване на нещо като непрочетени елементи чрез добавяне на клас .badge към DOM елемента, за предпочитане педя.
Синтаксис:
Съобщения 3
11) Страниране - Този компонент дава на вашия сайт многостранично странициране, така че съдържанието да може
да бъде разделен на няколко страници и да се движи лесно. Обикновено елементът DOM за непоредни списъци се дефинира с този клас .pagination.
Синтаксис:
Как това ще помогне в кариерата ви?
Всички бизнеси сега се фокусират върху взаимодействието на потребителя и потребителския опит (UI / UX). Тъй като по-голямата част от населението използва ръчни устройства като таблети и смартфони, които се различават значително по отношение на своята резолюция на пиксела и размера на екрана. Ето защо е наистина важно да имате предния дизайн, който е достатъчно отзивчив, за да се приспособи към всякакъв вид екрани, без да компрометира елегантността на уеб страницата.
Така че, ако сте квалифицирани в Bootstrap, ще ви добави стойност в техническата кариера и компаниите с нетърпение ще ви наемат с красива заплата. И тъй като е безплатен и с отворен код, има много области, за които да допринесете като разработчик и да го направите все по-добър от това, което е днес.
Conclusion-
Рамката за зареждане е много удобен инструмент за привличане на отзивчивост към уеб страниците. Компонентите, обяснени в този блог, са някои от широко използваните, които ви помагат да напишете по-малко код за повече функционалност и да добавите повече елегантност към уеб страницата, която изграждате.
Препоръчителни статии
Това е ръководство за компонентите на Bootstrap. Тук също обсъждаме въведение и различни компоненти на bootstrap, заедно с неговия синтаксис. Можете да разгледате и другите ни предложени статии, за да научите повече -
- Как да инсталирате Bootstrap
- Angular vs Bootstrap
- Bootstrap Training Course
- Въпроси за интервю на Bootstrap
- Как да използвате оформление на Bootstrap?
- Топ 5 вида Boostrap с примерен код