Боотстрап Фрамеворк напредни развој веб интерфејса

У другом водичу је објашњен увод у Боотстрап корисничка интерфејса и такође водич о томе како дизајнирати веб пројекат са Боотстрап 2.0, у овом ћемо прећи на интерфејсе и елементе који се најчешће користе у веб развоју.
Можемо преузети Боотстрап и ставити га у директоријум на нашој веб страници или га користити повезивањем са вашом библиотеком на мрежи.
Боотстрап је оквир отвореног кода и отворен за бржи и лакши развој веба.
Претражујући можемо пронаћи многе доприносе цсс заједнице и прилагођене компоненте и предлошке дизајна које су други корисници учинили и учинити доступним, постоји много компоненти за креирање навигационих трака, модалних прозора и скочних прозора, ротирајућих слика, менија и многих других, као и као додатке за ЈаваСцрипт и Јкуери за проверу образаца и других функционалности

Табеле и редови са ефектима

Боотстрап има већ програмиране ЦСС стилове и ефекте које можемо користити, на пример, за промену боје редова у табели и када миш пређе преко ње.

Код ће бити следећи:

Табела и редови са ефектом
 

 
 
Возило
 
Извор
 
Стање
 
Цена
 

 

 

 
 
Фиат 500
 
Мадрид
 
Користи се
 
9690€
 

 
 
Хонда аццорд
 
Барцелона
 
Користи се
 
14500€
 

 
 
Ренаулт лагуна
 
Толедо
 
Користи се
 
2800€
 

 

 

Затим ћемо креирати мени са подменијем користећи само Боотстрап ЦСС:

ЕНЛАРГЕ

Код ће бити следећи:

Вишеразински мени помоћу Цсс Боотстрап -а
Администратор продаје купаца 

Систем
Корисници
Подешавања

Дозволе
Сервери

Впс сервер А.
Впс сервер Б.


Потрошња ресурса
Бацкуп

Објашњавамо структуру и њене предефинисане класе. Класа дефинише величину веба која се подразумевано налази у Боотстрапу.

 .контејнер {ширина: 1170пк; } 

Следеће класе редова пружају леву и десну маргину на целој страници:

 .ров {; маргин -ригхт: -15пк; } 

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

 .дропдовн-мену {лево: 150пк; } 

Цсс и јкуери искачући прозор са хтмл садржајем
Користићемо поповер функцију која приказује скочни прозор када се веза задржи мишем, а променљива садржаја има хтмл за приказ.
Узећемо претходну табелу и додати колону за технички лист.
У свакој вези имаћемо следећу реченицу, а затим ћемо са ид -ом позвати скрипту.

 
 

 
 
Возило
 
Извор
 
Стање
 
Цена
 
Фотографије
 

 

 

 
 
Фиат 500
 
Мадрид
 
Користи се
 
9690€
 
Технички лист
 

 
 
Хонда аццорд
 
Барцелона
 
Користи се
 
14500€
 
Технички лист
 

 

 

 

Ако имамо широку листу, можемо креирати ЈКуери функцију где можемо послати динамички садржај, на пример издвојен из базе података.

Колоне и блокови на страници

Боотстрап се заснива на ширини од 1200 пиксела, подељеној у 12 блокова који покривају 99% структуре веба, сваки блок покрива 8,3333%, што је еквивалентно 100 пиксела и такође има простор од 1 пиксела.
Увек комбинација блокова у истом реду за додавање 12, на пример:
Два блока од 3 и један од 6

Боотстрап блокови
Цол-мд-3 блок од 300 пиксела.
Цол-мд-6 блок од 600 пиксела.
Цол-мд-3 блок од 300 пиксела.
800пк цол-мд-8 блок.

Испод стављамо блок величине 8 који има 800 пиксела:

Ови блокови су осетљиви јер су конфигурисани у Боотстрап цсс -у. Овде можемо видети пример како се блокови прилагођавају промени екрана мобилног уређаја.

Како прилагодити Боотстрап да промени стилове и функционалност

Да бисмо створили стилове и функционалности који ће бити компатибилни са Боотстрапом, морамо га користити као било коју другу библиотеку цсс или јс, као још један оквир пројекта, у овом случају ће се користити за дизајн и функционалност у прегледачу корисника. Требало би да избегавамо реформу изворних библиотека, али да пристанемо на своје, тако да када програмери Боотстрапа објаве ажурирање, нећемо имати проблема са укључивањем новог ако своје измене држимо одвојено.
Да бисмо дефинисали наше сопствене стилске листове, морамо креирати нову датотеку ЦСС стилова, како бисмо дефинисали наше промене без утицаја на оригинални цсс. Сетимо се хијерархије, на пример.
Ако је у Боотстрап -у цсс боотстрап.мин.цсс

 .цол-мд-3 {ширина: 25%; } 

И желимо да има ивицу, а затим у посебној датотеци ми стилес.цсс, можемо прогласити:

 .бордеројо {бордер: 1пк солид ред} 

Затим на страници позивамо обе датотеке

У блоку га примењујемо на следећи начин:

Цол-мд-3 блок од 300 пиксела.

Ово би било једнако декларисању овако:

 цол-мд-3 {ширина: 25%; ивица: 1пк пуна црвена; } 

Претпоставимо да је из неког разлога имала двије сличне изјаве

 .бордеројо {бордер: 1пк солид ред; } .цлиентблоцк {бордер: 1пк солид блуе; }
Цол-мд-3 блок од 300 пиксела.

Преовладава последња реченица. Због тога ће блок имати плаву ивицу.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен