Ова врста манипулације наводи нас на размишљање о дизајну на „јединствен“ начин и тренутак када имамо мало више искуства у коришћењу Боотстрап На све ћемо почети да гледамо на овај начин и тако ћемо добити доследност и брзину у свом начину рада.
Прво што треба знати је да је овај дизајн Мрежа омогућава нам да радимо на начин на који можемо изворно имплементирати мобилне приказе, ово наравно од верзије 3 оф Боотстрап, захваљујући чињеници да је ова верзија направљена имајући у виду мобилни дизајн.
У претходним верзијама оквира класе су морале бити директно наведене тако да је наш дизајн имао могућност прилагођавања резолуцијама мобилних уређаја, сада различитим класама Мрежа они то раде аутоматски.
Да бисмо искористили ову могућност, морамо размишљати од малих до великих, то јест, класе које примењујемо морају се увек сматрати најмањима, а затим ће се скалирати на друге резолуције, то јест, ако дефинишемо см цласс (мали или мали), аутоматски Боотстрап претпоставља да је ово минимални израз и да се тада може скалирати доктор медицине (средња вредност) или до лг (велики).
Пре него што пређемо на практичније примере морамо разумети које класе можемо користити у колонама а Мрежа Такође морамо знати у ком случају се сваки примењује, па на овај начин приликом дизајнирања наше веб странице можемо узети у обзир и најмањи уређај до ког желимо да дођемо.
Овим приступом можемо градити веб локације Мобиле Фриендли, колико данас постају важни за претраживаче и њихове резултате, чиме нам помажу, осим што стварамо добре веб странице како бисмо зарадили неке бодове у нашој репутацији СЕО, са истим послом, наравно.
Екрани телефонаТо је најмањи уређај који теоретски може да се користи у нашем дизајну, иако су резолуције телефона постепено претваране у Фулл ХД, ово је генерално за највиши ниво, док су средњи опсег и низак домет што је у теорији већина одржава много ниже резолуције. Врста Мрежа то се односи на тај случај: цол-кс- и односи се на решења мања од ширине 768 пиксела.
Екрани за таблетеОни су у теорији други најмањи уређај, захваљујући већој пропорцији величине таблет нуди већу навигацијску површину, тако да можемо користити мало више садржаја него на екрану телефона, осим тога опћенито се навигација на таблетима врши водоравно. Класа која се односи на овај уређај је цол-см- и односи се на резолуције са ширинама већим од 768 пиксела и испод 992 пиксела.
Опрема за мале екранеТо су углавном они који припадају ниским опсезима стоних и преносних рачунара, могу бити опрема са екранима мањим од 15 инча или који имају више од 10 година живота, такође су лаптопови намењени студентима и сектору са ниским куповне моћи, ово је већински сектор. Класа која се примењује у овом случају је цол-мд- и граничне резолуције за ширину су веће од 992 пиксела и мање од 1200 пиксела.
Опрема за велики екранОвде можемо избушити најсавременију опрему, као и екране веће од 15 инча, у овој категорији улази нова опрема као што је ултра-преносива, 4К резолуција или КХД такође тамо где видимо површине веће од 1080п. Искључивањем ширина које ћемо овде обрадити оне су веће од 1200 пиксела, ово док је следећа верзија Боотстрап вероватно.
Пошто знамо теорију која стоји иза система Мрежа оф Боотстрап, Добро је почети с његовом практичном примјеном, али прије него што видимо код морамо разумјети још пар концепата, увијек морамо према конвенцији и најбољој пракси користити елемент са класом контејнер, јер ће ово створити контејнер како му име указује на задржавање различитих колона. Други концепт који морамо знати је да ће увек бити 12 колона, па различите комбинације које правимо морају узети у обзир овај број.
У следећем примеру ћемо креирати код за распоред од 3 велике колоне, користићемо класу цол-мд- и пошто желимо 3 једнаке колоне при дељењу 12 са 3 добијамо број 4 па ће то бити величина сваке од наших резултирајућих колона.
Погледајмо код без даљег одлагања:
Боотстрап ГридСтруктура је врло једноставна, креирали смо див са класом контејнер, а унутар див са класом ред коначно смо у оквиру потоњег створили 3 дива са класом цол-мд-4 Ово је класа за мале екране за непреносиве рачунаре и видимо како ковамо број 4, што указује да је сваки њихов див еквивалентан 4 колоне Мрежа. Хајде да видимо како то изгледа када покренемо наш прегледач:Пример како се користе колоне у боотстрапу
Колона а
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Морби хендрерит аугуе ет лаореет аликуам. Аликуам олакшава мој ин лорем пхаретра, ут волутпат магна лаореет. Фушће сед ми ут турпис бибендум дицтум.Колона Б.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Морби хендрерит аугуе ет лаореет аликуам. Аликуам олакшава мој ин лорем пхаретра, ут волутпат магна лаореет. Фушће сед ми ут турпис бибендум дицтум.Колона Ц.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Морби хендрерит аугуе ет лаореет аликуам. Аликуам олакшава мој ин лорем пхаретра, ут волутпат магна лаореет. Фушће сед ми ут турпис бибендум дицтум.
ЕНЛАРГЕ
ЕНЛАРГЕ
Боотстрап ГридСада, ако приметимо у нашем коду, све остаје исто осим наших класа, где смо за колоне А и Б додали класу цол-см-6 а за колону Ц класа цол-см-12, то значи да ће, када се резолуција смањи, см класе управљати, као што видимо на следећој слици:Пример како се користе колоне у боотстрапу
Колона а
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Морби хендрерит аугуе ет лаореет аликуам. Аликуам олакшава мој ин лорем пхаретра, ут волутпат магна лаореет. Фушће сед ми ут турпис бибендум дицтум.Колона Б.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Морби хендрерит аугуе ет лаореет аликуам. Аликуам олакшава мој ин лорем пхаретра, ут волутпат магна лаореет. Фушће сед ми ут турпис бибендум дицтум.Колона Ц.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Морби хендрерит аугуе ет лаореет аликуам. Аликуам олакшава мој ин лорем пхаретра, ут волутпат магна лаореет. Фушће сед ми ут турпис бибендум дицтум.
ЕНЛАРГЕ
Овим смо завршили овај водич, где смо научили како функционише систем Мрежа оф БоотстрапНаравно, ово је само врх леденог бријега, постоји много више садржаја које можемо истражити у другим водичима, али са овим основним знањем можемо почети увиђати како да своје дизајне повежемо на логичнији начин и уз мање напора захваљујући оквир.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
