Използване на компонентите на Bootstrap

Bootstrap Той има две страхотни солидни бази, които ни дават стандартна отправна точка за различните решения за уеб дизайн, които се нуждаем или искаме да направим, това са Grid и базовият CSS, с тези два инструмента можем да изградим голяма централна база, където можем поставете го за почивка на всички различни елементи, които съставляват нашия интерфейс.
Подобно на всички бази, те сами по себе си не изпълняват останалата част от конструкцията, за да се постигне по -голяма степен на изтънченост и детайлност е необходимо да се използват допълнителни компоненти, които са разположени на нашата база и разбира се тяхната мощност ще бъде повлияна от солидността. на последния.
В случай че Bootstrap Имаме няколко компонента, които ни помагат да увеличим максимално детайлите на нашия дизайн, компоненти, които варират от икони, панели, дори заглавки. Елементи, които ни помагат да различаваме и подчертаваме нашето приложение от другите.
Компонентите в Bootstrap Те могат да се използват в нашите страници независимо от останалите, тоест можем да генерираме толкова компоненти, колкото са ни необходими в един документ, без те да са в конфликт с останалите.
Освен това основният стил по подразбиране вече е предварително дефиниран, така че можем да изградим нашето приложение бързо и без много усилия, където в крайна сметка можем да персонализираме цялото си приложение, като променим базовия стил за нашите собствени стилове.
Компонентите могат да бъдат от CSS, JavaScript или и двете, така че някои освен Базов CSS те ще изискват библиотеки на трети страни като напр jQuery, това може да изглежда донякъде неудобно, но реалността е, че внедряването е толкова просто, че дори няма да осъзнаем, че използваме повече неща от това, което се предлага по подразбиране Bootstrap.
Един от първите компоненти, които трябва да разберем, са иконите, тъй като с тези малки части от изображението можем да накараме потребителя да разбере функционалността на всяка част от нашия дизайн, като по този начин, когато видим голяма икона х знаем, че е свързано със затваряне на текущия раздел или в случай, че виждаме икона под формата на + ще знаем, че трябва да добавим нещо.
ГлификониВ Bootstrap има библиотека с икони Глификони, много популярен в уеб дизайна и който ни предлага практически икона за всяко действие, което можем да извършим на уеб страница, това ни придвижва много работа, тъй като не е нужно да мислим за това да търсим някой, който да проектира графични парчета, които служат тези цели.
На следващото изображение можем да видим иконите, които имаме директно на уебсайта на Bootstrap:

Увеличете

Това е само малка извадка от иконите, които имаме на разположение, но ако прегледаме официалната страница, ще видим всички опции, които имаме за използване.
Използването на тези икони е много просто, просто трябва да добавим класа глификон към стихията HTML и след това добавете класа на съответната икона от наличния списък. Иконите обикновено се добавят към елементи като или тъй като по този начин се уверяваме, че те са само визуални, като по този начин получаваме възможно най -добрия резултат. Нека да видим след това в следния код пример за това как да използваме този компонент в HTML.

 Използване на глификоните в Bootstrap
Платете
Поща
Потребители
Кошче
Отпиши ме

В този код просто сме поставили включванията от нашите библиотеки на Bootstrap съответно, добавяне jQuery като библиотека на трета страна и след това добавете библиотеката js на Bootstrap, важно е да се поддържа този ред, тъй като js библиотеката на Bootstrap нужда от jQuery и ако е включено, това ще ни даде грешка в изпълнението.
След това в рамките на нашия създадохме някои раздели, където добавихме ГлификониЗа нашите цели поставянето на иконите в етикета беше достатъчно. Ако изпълним в нашия браузър, ще получим следния резултат:

Както виждаме, иконите придружават съобщенията, придавайки им по -голяма тежест и разбиране, например в полето за търсене, ако някой не говори английски, няма да разбере съобщението ТърсенеНо ако сте използвали компютърни системи и веднага видите иконата на лупа, знаете, че тя се отнася до търсения, това е истинската сила на този компонент.
Друг важен компонент са разделите за навигация, които ни позволяват да организираме съдържанието си на една и съща страница, като по този начин се избягва консумацията на много място и по този начин се улеснява живота на потребителя, като не се налага да изучава голям брой раздели в нашето уеб приложение.
За да използваме тези раздели, се нуждаем от помощта на класа навигация, това, което прави, е да премахне стила по подразбиране на HTML на елементите и синовете му , като по този начин улеснява използването и последващото му адаптиране към нашия дизайн. За да използваме това, просто трябва да добавим класовете навигация Y навигационни раздели към елемент и с това ще получим подходящия резултат.
Нека да видим следния код, където прилагаме това решение, подобно на предишния пример трябва да включим файловете bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, нека видим нашия код:

 Използване на глификоните в Bootstrap

Сигурност
Записи
Съдържание

Както забелязваме използването на елемента с този клас ни позволява да направим структура HTML нормално, но резултатът, както ще видим по -долу, ни дава друг начин за организиране на информацията. Можем да подчертаем друг интересен аспект на нашия код и той е комбинацията от Глификони с това решение, демонстрирайки какво обясняваме за независимостта на елементите.

Увеличете

Друг компонент, който е много полезен, са падащите менюта, които ни позволяват да съберем много опции в малко пространство, особено за тези уеб страници, които имат много категории, които трябва да организират.
Падащо менюКомпонентът на Bootstrap който се занимава с това се нарича Падащо меню и подобно на предишния компонент, той се прилага в елемента конструкцията му обаче е малко по -сложна, въпреки че не надхвърля стила на работа в HTML.
Първо трябва да имаме елемент, който е заглавката на падащото меню, след това трябва да имаме който ще съдържа опциите за показване. За това ще преформулираме предишния пример, за да добавим падащо меню в раздела съдържание, с което можем да разберем по-добре нашия пример.
За да обобщим малко, ще покажем само съдържанието на, тъй като заглавката ще бъде същата. Нека да видим кода за функционалността на падащото меню:

Сигурност
Записи
Съдържание

Видеоклипове
Изображения
Аудио

След това виждаме как в един елемент започнахме падащото меню с класа падащо меню, тогава в рамките на това ние дефинираме елемент като опция задействане при добавяне на класа падащо превключване и накрая създадохме a какво има класа падащо меню за да установим, че има всички възможности, които ще видим. Ако изпълним нашия пример в браузъра, ще получим следния резултат:

Увеличете

Разбира се, това е само малка част от това, което можем да постигнем, тъй като е възможно да се включат повече ефекти и с различни стилове да се промени визуалното на тези. С това завършваме този урок, където видяхме три от най -полезните компоненти, в които можем да използваме Bootstrap, като по този начин се постига много по -голямо персонализиране на нашето приложение.