Ако радите било шта везано за веб, велика је вероватноћа да сте чули за Боотстрап. Ако до сада још увек не знате шта је Боотстрап или само желите да пронађете туториал за почетнике за почетнике како бисте добили бољи преглед онога што је и шта најбоље ради, дошли сте на право место.

Боотстрап је моћан комплет алата - колекција ХТМЛ, ЦСС и ЈаваСцрипт алата за стварање и изградњу веб страница и веб апликација. То је бесплатан пројекат отвореног кода, чији је домаћин ГитХуб , а изворно га је креирао (и за) Твиттер .

Па, зашто учити Боострап?

Након издања отвореног кода 2011. године, Боотстрап је постао популаран врло брзо, и то не без разлога. Веб дизајнери и веб програмери попут Боотстрапа јер је флексибилан и лак за рад. Његове главне предности су у томе што реагује дизајном, одржава широку компатибилност прегледача, нуди конзистентан дизајн коришћењем компонената које се могу поново употребити и врло је једноставан за употребу и брз за учење. Нуди богату проширивост користећи ЈаваСцрипт, уз уграђену подршку за јКуери додатке и програмски ЈаваСцрипт АПИ. Боотстрап се може користити са било којим ИДЕ-ом или уређивачем, као и са било којом технологијом и језиком на страни сервера, од АСП.НЕТ преко ПХП до Руби он Раилс.

зелена боја године

Уз Боотстрап, веб програмери могу да се концентришу на развојни посао, без бриге о дизајну, и да брзо успоставе и покрену веб страницу са лепим изгледом. Супротно томе, даје веб дизајнерима солидну основу за стварање занимљивих Боотстрап тема.

Први кораци са основама Боотстрапа

Боотстрап је доступан у два облика; као унапред компајлирану верзију и као верзију изворног кода. Верзија изворног кода користи Мање ЦСС претпроцесор, али ако више волите Сасс, постоји званична Сасс лука Боотстрап такође доступно. Да би олакшао употребу ЦСС префикса добављача, Боотстрап користи Аутопрефикер .

Верзија изворног кода долази са изворним кодом стилова написаним на Лесс (или Сасс) језику, свим ЈаваСцрипт-има и пратећом документацијом. Ово омогућава амбициознијим дизајнерима и програмерима да по својој вољи промене и прилагоде све понуђене стилове и да направе своју верзију Боотстрапа. Али ако вам није познат Лесс (или Сасс) или вас једноставно не занима промена изворног кода, не брините. Можете само да користите претходно састављени ЦСС од ваниле. Сви стилови се могу касније надјачати помоћу прилагођених стилова.

Структура датотеке

Усредсредићемо се на унапред састављену верзију, која се може преузети овде . Када преузмете зип архиву и распакујете је, основна структура датотека изгледа овако:

Структура Боотстрапа је прилично једноставна и саморазумљива. Садржи унапред компајлиране датотеке које омогућавају брзу употребу у било ком веб пројекту. Поред компајлираних и умањених ЦСС и ЈС датотека, укључује и фонтове из Глификони и необавезна почетна Боотстрап тема.

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

Основни Боотстрап ХТМЛ предложак

Основни Боотстрап ХТМЛ шаблон би требао изгледати отприлике овако:

шта је гешталт принцип

Важно је започети било који ХТМЛ са ХТМЛ 5 Доцтипе декларацијом, како би прегледачи знали какав документ могу да очекују. Глава садржи три важне ознаке које се прво морају декларисати, а све додатне ознаке главе морају се додати након њих. Ако желите да подржите старије прегледаче попут ИЕ8, можете и да их укључите ХТМЛ 5 подметач у глави, што ће омогућити употребу ХТМЛ5 елемената у старијим прегледачима, и Одговорите.јс , који ће полификовати ЦСС3 медијске упите у старим верзијама Интернет Екплорера.

Иако ово није превише важно ако циљате само савремене прегледаче.

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

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

Боотстрап предлошци и компоненте корисничког интерфејса

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

Многи од њих користе ЈаваСцрипт екстензије и јКуери додатке.

Ови Боотстрап предлошци су доступни као добро урађене ЦСС класе које можете применити на свој ХТМЛ да бисте постигли различите ефекте. Ово чини коришћење Боотстрапа веома погодним. Коришћењем семантичких имена класа попут .success, .warning и .info, ове компоненте су лако за поновну употребу и прошириве. Али док Боотстрап користи описна имена класа која имају значење, то није специфично у вези са детаљима примене. Све класе могу бити замењене прилагођеним ЦСС стилом и бојом, а значење класе ће и даље остати исто.

Мрежни систем Боотстрап

Пре него што се више позабавимо компонентама Боотстрапа и предлошцима дизајна, важно је споменути једну од главних карактеристика које је Боотстрап увео у верзији 3: а дизајн први за мобилне уређаје филозофије, што је резултирало Боотстрапом који дизајнирано реагује. Крајњи резултат је да се Боотстрап лако и ефикасно скалира са једном јединственом базом кода, од телефона, таблета до радне површине.

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

Да бисте користили мрежни систем Боотстрап, потребно је поштовати неколико правила . Елементи мрежасте колоне смештени су унутар елемената редова, који стварају хоризонталне групе колона. На страници можете имати онолико редова колико желите, али колоне морају бити непосредни подређени редови. У пуном реду ширине колона биће било која комбинација која сабере до 12, али није обавезно користити свих 12 доступних колона.

Редови треба да се поставе или у омот за распоред фиксне ширине, који има .container класе и ширине 1170пк, или у омоту распореда пуне ширине, који има .container-fluid класе, а која омогућава одговорно понашање у том реду.

Мрежни систем Боотстрап има четири нивоа класа: кс за телефоне (<768px), см за таблете (≥768пк), доктор медицине за радне површине (≥992пк) и лг за веће радне површине (≥1200пк). Они у основи дефинишу величине при којима ће се колоне срушити или ширити хоризонтално. Разреди разреда могу се користити у било којој комбинацији да би се добили динамични и флексибилни распореди.

На пример, ако желимо да добијемо два реда, један са два ступца и један са четири, могли бисмо написати:

Можемо користити и мешовите ширине колона:

Чак можемо и да померамо колоне помоћу офсета, на пример за стварање уског и центрираног садржаја:

Колоне се могу угнездити. Може бити мање од 12 колона, а као што је горе поменуто, можемо одабрати колоне фиксне ширине или пуне ширине помоћу .container или .container-fluid омотачи, респективно.

Ако комбинујемо различите разреде класе, добићемо различит изглед на погледима на мобилним уређајима и на радној површини. У примеру испод, на радној површини ће бити 4 колоне у реду, а на мобилним уређајима ће имати пуну ширину и сложене једна на другу.

принципи дизајна варијетети примери

Могуће је онемогућите одзив странице у потпуности. Ово ће у основи онемогућити аспекте Боотстрапа „мобилне странице“. Само имајте на уму да ако онемогућите одзив, било која компонента фиксне ширине, попут фиксне траке за навигацију, неће бити видљива када се оквир за приказ уже од садржаја странице. За контејнер који не реагује, то значи ширину од 970пк. Такође у овом случају, навбарс се неће срушити у приказима за мобилне уређаје, као што је касније описано.

Ово су само основни примери. Да бисте видели пуни потенцијал мрежа, погледајте Боотстрап’с Гридс документација .

Боотстрап типографија

Почетни програмери често претпостављају да ће њихов чисти и не-стилизовани ХТМЛ изгледати исто у свим прегледачима. Нажалост, сваки прегледач има свој подразумевани стил „корисничког агента“ који се примењује на ХТМЛ, а ниједна два прегледача немају исте подразумеване вредности. На пример, величине фонтова заглавља нису доследне у свим прегледачима, неке неуређене и поредане листе оставиле су маргине, а друге су додале облоге, прегледачи примењују прилагођене ивице и облоге на тело ХТМЛ-а, па чак се и тастери различито приказују у прегледачима. Да би се решиле све ове недоследности, рођена су различита правила ресетовања ЦСС-а која дефинишу доследне подразумеване поставке стила.

Боотстрап доноси још неколико добрих ствари осим чистог ЦСС ресетовања. Долази са нормализовати.цсс , ХТМЛ5 спремна алтернатива ЦСС ресетовању, а такође има и неке добро дизајниране подразумеване вредности. На пример, Боотстрап поставља глобално подразумевано font-size до 14 пиксела, са висином линије од 1.428. Подразумевани фонт се мења у Хелветица / Ариал, са резервним санс серифом. Сви ови стилови се примењују на све пасусе, уз додатак да

(пасуси) добијају доњу маргину од половине њихове израчунате висине линије (подразумевано 10 пиксела). Поред ових задатих вредности, постоје и прилагодљиви стилови за стандардне ХТМЛ ознаке који доносе већу доследност тексту, као што су истакнути текст (), избрисани текст (и), подвучени текст (), мали текст () и подебљани текст ( ). Класе поравнања помажу у лакшем распореду садржаја на страници коришћењем .text-left, .text-center, .text-right, .text-justify и .text-nowrap класе. Постоје и унапред дефинисани стилови за наводнике блокова, као и неуређена и поређана листа, са уграђеним опцијама, да наведемо само неке. Да бисте добили потпуну листу, идите на Боотстрап страница типографије .