Коришћење Боотстрап компоненти

Боотстрап Има две одличне чврсте базе које нам дају стандардну полазну тачку за различита решења веб дизајна која требамо или желимо да урадимо, то су Мрежа и основни ЦСС, помоћу ова два алата можемо изградити велику централну базу на којој можемо поставите га да одмори све различите елементе који чине наш интерфејс.
Као и све базе, ни оне саме по себи не раде остатак конструкције, да би се постигао већи степен софистицираности и детаља потребно је користити додатне компоненте које се налазе на нашој бази и наравно на њихову моћ ће утицати чврстина. овог последњег.
У случају Боотстрап Имамо неколико компоненти које нам помажу да максимизирамо детаље нашег дизајна, компоненте које се крећу од икона, панела, па чак и заглавља. Елементи који нам помажу да разликујемо и истакнемо своју апликацију од других.
Компоненте у Боотстрап Могу се користити на нашим страницама независно од осталих, то јест, можемо генерисати онолико компоненти колико нам је потребно у једном документу, а да оне нису у сукобу са осталим.
Осим тога, основни стил према заданим поставкама већ је унапријед дефиниран, тако да можемо брзо и без много напора изградити нашу апликацију, гдје на крају можемо прилагодити цијелу апликацију промјеном основног стила за властите стилове.
Компоненте могу бити од ЦСС, ЈаваСцрипт или обоје, па неки осим Основни ЦСС захтеваће библиотеке независних произвођача као што су јКуери, ово може изгледати помало неугодно, али реалност је да је имплементација толико једноставна да нећемо ни схватити да користимо више ствари од онога што је задано Боотстрап.
Једна од првих компоненти коју морамо разумјети су иконе, јер помоћу ових малих дијелова слике можемо натјерати корисника да разумије функционалност било којег дијела нашег дизајна, дакле када видимо икону велике Икс знамо да је то повезано са затварањем тренутног одељка или у случају да видимо икону у облику + знаћемо да треба нешто додати.
ГлификониИн Боотстрап постоји библиотека икона Глификони, врло популаран у веб дизајну и који нам нуди практично икону за сваку радњу коју можемо извршити на веб страници, то нас улаже у много посла јер не морамо размишљати о томе да тражимо некога за дизајн графичких комада који служе ове сврхе.
На следећој слици можемо видети иконе које имамо директно на веб страници Боотстрап:

ЕНЛАРГЕ

Ово је само мали узорак икона које имамо на располагању, али ако прегледамо службену страницу видјет ћемо све опције које имамо за нашу употребу.
Употреба ових икона је врло једноставна, само морамо додати класу глификон до елемента ХТМЛ а затим додајте класу одговарајуће иконе са доступне листе. Иконе се обично додају ставкама попут или будући да на овај начин водимо рачуна да су само визуелни, чиме добијамо најбољи могући резултат. Погледајмо онда у следећем коду пример како се користи ова компонента у ХТМЛ.

 Коришћење Глификона у Боотстрапу
Платити
Пошта
Корисници
Рециклажна канта
Одјавити се

У овај код смо једноставно ставили инклузије из наших библиотека Боотстрап одговарајући, додајући јКуери као библиотека треће стране, а затим додајте библиотеку јс оф Боотстрап, важно је одржавати овај редослед пошто је јс библиотека Боотстрап потреба за јКуери и ако је укључено, то ће нам дати грешку у имплементацији.
Затим смо унутар нашег створили неке одељке у које смо додали ГлификониЗа наше потребе, постављање икона унутар етикете било је довољно. Ако извршимо у нашем прегледачу, добићемо следећи резултат:

Као што видимо, иконе прате поруке дајући им већу тежину и разумевање, на пример у пољу за претрагу ако неко не говори енглески неће разумети поруку ПретрагаАли ако сте користили рачунарске системе и одмах видите икону лупе, знате да се то односи на претраге, то је права моћ ове компоненте.
Друга важна компонента су картице за навигацију, које нам омогућавају да организујемо наш садржај на истој страници, избегавајући тако заузимање пуно простора и олакшавајући живот кориснику тако што не морају да уче велики број одељака у нашој веб апликацији.
За коришћење ових картица потребна нам је помоћ разреда нав, ово што ради је уклањање подразумеваног стила ХТМЛ елемената и његових синова , чиме се олакшава употреба и њено накнадно прилагођавање нашем дизајну. Да бисмо ово користили, једноставно морамо додати класе нав И нав-табс до елемента и овим ћемо добити одговарајући резултат.
Погледајмо следећи код где имплементирамо ово решење, као и претходни пример морамо укључити датотеке боотстрап.цсс, боотстрап-тхеме.цсс, боотстрап.јс И јкуери.јс, да видимо наш код:

 Коришћење Глификона у Боотстрапу

Сигурност
Рецордс
Садржај

Како примећујемо употребу елемента са овом класом нам омогућава да направимо структуру ХТМЛ нормално, али резултат који ћемо видети у наставку даје нам још један начин за организовање информација. Можемо истаћи још један занимљив аспект нашег кода, а то је комбинација Глификони овим решењем, демонстрирајући оно што објашњавамо о независности елемената.

ЕНЛАРГЕ

Још једна компонента која је од велике помоћи су падајући менији, који нам омогућавају да сведемо многе опције на мали простор, посебно за оне веб странице које имају много категорија које треба да организују.
ИспуститиКомпонента Боотстрап ко се бави овим се зове Испустити и као претходна компонента примењује се у елементу међутим, његова конструкција је мало сложенија, иако не иде даље од ХТМЛ стила рада.
Морамо прво имати елемент који је заглавље падајућег менија, затим морамо имати који ће садржати опције за приказ. За ово ћемо преформулисати претходни пример како бисмо додали падајући мени на картици са садржајем, чиме можемо боље разумети наш пример.
Да резимирамо само ћемо само приказати садржај, јер ће заглавље бити исто. Погледајмо онда код за функционалност падајућег менија:

Сигурност
Рецордс
Садржај

Видео
Слике
Аудио

Затим видимо како у елементу започели смо падајући мени са класом испустити, онда унутар овога дефинишемо елемент као покретач опције при додавању класе падајући прекидач и коначно смо створили а шта има класа падајући мени да бисмо идентификовали да има све могућности које ћемо видети. Ако покренемо наш пример у прегледачу, добићемо следећи резултат:

ЕНЛАРГЕ

Наравно, ово је само мали део онога што можемо постићи, јер је могуће укључити више ефеката и различитим стиловима променити визуелни ефекат ових ефеката. Овим смо завршили овај водич, где смо видели три најкорисније компоненте у којима можемо да користимо Боотстрап, чиме се постиже много веће прилагођавање наше апликације.