Научите Боотстрап 4 Грид Систем за 10 минута

Мрежни систем Боотстрап 4 користи се за прилагодљиве распореде.

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

Хајде да почнемо!

Преглед садржаја

  • Боотстрап 4 контејнери
  • Боотстрап 4 реда
  • Боотстрап 4 колоне
  • Додатна литература

Решетка Боотстрап 4 састоји се од контејнера, редова и колона. Узећемо их једног по једног и објаснити им.

Боотстрап 4 контејнери

Контејнер Боотстрап 4 је елемент класе .container. Контејнер је корен мрежног система Боотстрап 4 и користи се за контролу ширине изгледа.

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

 ... 

Једноставна .containerкласа поставља ширину изгледа у зависности од ширине екрана. Садржај поставља на средину странице поравнавајући га водоравно. Између контејнера Боотстрап 4 и леве и десне ивице странице постоји једнак размак.

У .containerумањује у ширини као и екран ширина сужава постаје фулл-видтх на мобилни. Ширина контејнера је дефинисана унутар библиотеке Боотстрап 4 за сваку величину екрана. Тачне величине можете видети овде.

Контејнер пуне ширине заузима 100% величине екрана без обзира на ширину екрана. Да бисте га користили, морате додати разред. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

ЦодеПен можете погледати овде.

Да бисте видели разлике између две врсте контејнера, можете да отворите оловку на конзоли и да се пребацујете између величина екрана.

Боотстрап 4 реда

Почетни ремен 4 реда су хоризонтални делови екрана. Користе се само као омотачи за колоне. Да бисте их користили, потребан вам је .rowчас.

 ... 

Ево најважнијих ствари које морате имати на уму о Боотстрап 4 редовима:

  • Користе се само за садржавање колона. Ако унутар реда сместите друге елементе заједно са колонама, нећете добити очекивани резултат.
  • Морају се сместити у контејнере. Ако то не учините, на вашој страници ће се појавити водоравни клизач. То се догађа зато што редови имају негативне леве и десне маргине од 15. Контејнер има подлоге од 15 пиксела, тако да се супротставља маргинама.
  • Колоне морају бити деца реда. У супротном се неће поравнати. Редови и колоне су створени за заједнички рад у овој строгој хијерархији.

Боотстрап 4 колоне

Сада можемо доћи до лепог дела овог водича, колона Боотстрап 4. Колоне су сјајне! Они вам помажу да поделите екран водоравно.

Ако у свој ред поставите једну колону, она ће заузети сву ширину. Ако додате две колоне, свака ће узети 1/2 од ширине. Тако то важи за било који број колона.

 ... ... ... ... ... ... ... ... 

Код можете видети уживо на ЦодеПен-у.

Напомена: Колоне нису обојене. Управо сам додао боје за визуелно убедљивији опис / тако да изгледају прилично.

Постављање величина за колоне

Коришћење .colкласе динамички подешава ширину колоне. То значи да ће, у зависности од броја колона у реду, ширина колоне бити ширина контејнера подељена бројем колона.

Али постоји још један начин за дефинисање колона. Можете користити класе за колоне и дефинисати њихову величину.

Решетка Боотстрап 4 се подразумевано састоји од 12 колона. За колону можете одабрати било коју величину од 1 до 12. Ако желите 3 једнаке колоне, можете да користите .col-4за сваку (јер су 3 * 4 колоне свака = 12). Или им можете поставити различите величине. Ево неколико примера:

 ... ... ... ... ... ... ... ... 

Код можете видети уживо на ЦодеПен-у.

Ако зброј колона у вашем реду не дође до 12, они не попуњавају цео ред. Ако збир колона пређе 12, прећи ће на следећи ред. У првом реду ће бити приказани само први елементи који додају до 12 или мање.

Постављање тачака прекида за колоне

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

Овде наступа једна од најмоћнијих компонената Боотстрап 4. Да бисте имали различите распореде на различитим екранима, нећете требати писати медијске упите, већ можете користити тачке прекида у колони.

Тачка прекида је променљива Боотстрап 4 која означава резолуцију екрана. Када специфицирате тачку прекида за класу, поручујете класи да буде активна само у резолуцијама које су најмање толико велике колико има тачка прекида.

Најједноставнији час о којем ћемо научити је .col-[breakpoint]час. Када користите ову класу, понашање колона дефинишете само када су приказане на уређајима који имају резолуцију од најмање дефинисане тачке прекида. До задате тачке прекида, колоне ће се подразумевано поравнати вертикално. А након ваше тачке прекида, поравнаће се водоравно због класе.

Боотстрап има 4 тачке прекида које можете користити:

  • .col-sm за веће мобилне телефоне (уређаји резолуције ≥ 576пк);
  • .col-md за таблете (≥768пк);
  • .col-lg за преносне рачунаре (≥992пк);
  • .col-xl за радне површине (≥1200пк)

Рецимо да желите да прикажете две колоне једну за другом вертикално на малим екранима и у истој линији на већим екранима. Мораћете да наведете тачку прекида где колоне иду у истој линији.

У нашем примеру ћемо користити .col-lgтачку прекида и видети како колоне изгледају на различитим екранима. За резолуције које су ниже од задате тачке прекида (<992пк), колоне ће бити приказане вертикално. То значи да ће на мобилним уређајима и таблетима колоне изгледати овако:

А за уређаје који имају резолуцију већу или једнаку тачки прекида (≥992пк), колоне ће ићи у исти ред. То значи да ћете на преносним и стоним рачунарима добити овај резултат:

 ... ... 

Код можете видети уживо на ЦодеПен-у.Ако отворите Цодепен у другом прозору и видите страницу у различитим резолуцијама, видећете да колоне мењају своје позиционирање.

Ако желите да две колоне иду на исту линију, почевши од већих мобилних телефона које бисте користили .col-sm, за таблете .col-mdи за изузетно велике екране .col-xl.

Постављање величина и тачака прекида за колоне

Можете комбинирати величине и тачке прекида и користити једну класу са форматом .col-[breakpoint]-[size].

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

 ... ... ... 

Резултат ћете добити на резолуцијама <992пк:

А за екране величине ≥992пк:

Поново можете да видите код уживо на ЦодеПен-у.

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

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

 ... ... ... ... 

Резултат ће се овако приказати на таблетима:

И овако на преносним рачунарима и већим резолуцијама:

Овај пример је такође доступан на ЦодеПен-у.

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

Пребијање колона

Ако не желите да ваше колоне буду једна поред друге, можете да користите класу .offset-[breakpoint]-[size]заједно са .col-[breakpoint]-[size].

Коришћење ове класе је исто као додавање празне колоне пре колоне. Ево једноставног примера:

 ... ... 

Код можете видети уживо на ЦодеПен-у.

Класу можете користити у било којој колони у реду. Ево још неколико примера:

 ... ... ... ... ... 

Гнежђење колона

Ово може изненадити, али можете додати ред унутар колоне!

Дотични ред (који ће имати ширину матичног ступца) тада ће бити подељен на 12 (мањих) ступаца које можете упутити кроз .col-* класе.

Погледајмо шта се дешава када уметнемо нови ред у колону:

 ... ... ... ... 

Код можете видети уживо на ЦодеПен-у.

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

Ово завршава основно знање у вези са мрежним системом који реагује на Боотстрап 4. Ако имате питања, јавите ми у коментарима, радо ћу вам одговорити.

Додатна литература

Ако имате више времена, ево неколико корисних ресурса:

  • Званична мрежна документација са ГетБоотстрап-а
  • Видео лекција из Сцримбе

Овај чланак је првобитно објављен на блогу БоотстрапБаи. Део је веће серије туторијала за Боотстрап 4 под називом 14 Даис оф Боотстрап 4. Ако желите да наставите да учите о компонентама Боотстрап 4, ови чланци су добро место за почетак.

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

Али пре него што се дубље позабавите, одвојите тренутак да прославите своје новостечене вештине !?