Научете Bootstrap 4 Grid System за 10 минути

Системата Bootstrap 4 Grid се използва за отзивчиви оформления.

Отзивчивото оформление представлява начина, по който елементите се подравняват в страницата с различни резолюции. Важно е да разберете как да използвате мрежата, преди да научите за всеки друг компонент на Bootstrap 4, защото какъвто и елемент да използвате, ще трябва да го поставите някъде на екрана.

Да започваме!

Съдържание

  • Bootstrap 4 контейнери
  • Bootstrap 4 реда
  • Bootstrap 4 колони
  • Допълнителна информация

Решетката Bootstrap 4 се състои от контейнери, редове и колони. Ще ги вземем един по един и ще им обясним.

Bootstrap 4 контейнери

Контейнерът Bootstrap 4 е елемент с класа .container. Контейнерът е коренът на мрежата Bootstrap 4 и се използва за контрол на ширината на оформлението.

Контейнерът Bootstrap 4 съдържа всички елементи на страница. Това означава, че вашата страница трябва да има следната структура: първо тялото на HTML страницата, вътре в нея трябва да добавите контейнера и всички останали елементи вътре в контейнера.

 ... 

Простият .containerклас задава ширината на оформлението в зависимост от ширината на екрана. Той поставя съдържанието в средата на страницата, подравнявайки го хоризонтално. Между контейнера Bootstrap 4 и левия и десния край на страницата има равно пространство.

Увеличава .containerсе по ширина, когато ширината на екрана се стеснява и става пълна ширина на мобилни устройства. Широчината на контейнера се определя в библиотеката Bootstrap 4 за всеки размер на екрана. Точните размери можете да видите тук.

Контейнерът с пълна ширина отнема 100% от размера на екрана, независимо от ширината на екрана. За да го използвате, трябва да добавите класа. container-fluid.

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

Можете да видите CodePen тук.

За да видите разликите между двата типа контейнери, можете да отворите писалката в конзолата си и да превключвате между размерите на екрана.

Bootstrap 4 реда

Bootstrap 4 реда са хоризонтални срезове на екрана. Те се използват само като обвивки за колони. За да ги използвате, ви е необходим .rowкласът.

 ... 

Ето най-важните неща, които трябва да запомните за Bootstrap 4 реда:

  • Те се използват само за съдържащи колони. Ако поставите други елементи вътре в реда заедно с колони, няма да получите очаквания резултат.
  • Те трябва да бъдат поставени в контейнери. Ако не направите това, ще получите хоризонтално превъртане на страницата си. Това се случва, защото редовете имат отрицателно ляво и дясно поле 15. Контейнерът има подложки 15px, така че противодейства на полетата.
  • Колоните трябва да бъдат дъщери на реда. В противен случай те няма да се подравнят. Редовете и колоните са създадени да работят заедно в тази строга йерархия.

Bootstrap 4 колони

Вече можем да стигнем до хубавата част на този урок, Bootstrap 4 колони. Колоните са страхотни! Те ви помагат да разделите екрана хоризонтално.

Ако поставите една колона в реда си, тя ще заеме цялата ширина. Ако добавите две колони, всяка от тях ще вземе 1/2 от ширината. И това важи за произволен брой колони.

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

Можете да видите кода на живо в CodePen.

Странична бележка: Колоните не са оцветени. Току-що добавих цветове за по-привлекателно визуално описание / така те изглеждат красиви.

Задаване на размери за колони

Използването на .colкласа задава динамично ширината на колоната. Това означава, че в зависимост от броя на колоните в ред, ширината на колона ще бъде ширината на контейнера, разделена на броя на колоните.

Но има и друг начин за дефиниране на колони. Можете да използвате класове за колони и да дефинирате техния размер.

По подразбиране решетката Bootstrap 4 се състои от 12 колони. Можете да изберете произволен размер от 1 до 12 за вашата колона. Ако искате 3 равни колони, можете да използвате .col-4за всяка една (защото 3 * 4 cols всяка = 12). Или можете да зададете различни размери за тях. Ето няколко примера:

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

Можете да видите кода на живо в CodePen.

Ако сумата от колите във вашия ред не достигне до 12, тогава те не запълват целия ред. Ако сумата от колоните надхвърли 12, тя ще премине към следващия ред. Първият ред ще покаже само първите елементи, които добавят до 12 или по-малко.

Задаване на точки на прекъсване за колони

Ако вземете горния пример и искате да го покажете на мобилно устройство, може да срещнете някои проблеми. Показването на пет колони на мобилно устройство ще направи съдържанието нечетливо.

Тук влиза в игра един от най-мощните компоненти на Bootstrap 4. За да имате различни оформления на различни екрани, няма да е необходимо да пишете медийни заявки, вместо това можете да използвате точките на прекъсване на колоната.

Точката на прекъсване е променлива Bootstrap 4, която означава разделителна способност на екрана. Когато посочвате точка на прекъсване за клас, казвате на класа да бъде активен само за резолюции, които са поне толкова големи, колкото броят, който точката на прекъсване съдържа.

Най-простият клас, за който ще научим, е .col-[breakpoint]класът. Когато използвате този клас, вие определяте поведението на колоните само когато те се показват на устройства, които имат разделителна способност поне определената точка на прекъсване. До зададената точка на прекъсване вашите колони ще се подравнят вертикално по подразбиране. И след вашата точка на прекъсване, те ще се подравнят хоризонтално заради класа.

Bootstrap има 4 точки на прекъсване, които можете да използвате:

  • .col-sm за по-големи мобилни телефони (устройства с резолюция ≥ 576px);
  • .col-md за таблетки (≥768px);
  • .col-lg за лаптопи (≥992px);
  • .col-xl за настолни компютри (≥1200px)

Да приемем, че искате да покажете две колони една след друга вертикално на малки екрани и на една и съща линия на по-големи екрани. Ще трябва да посочите точката на прекъсване, където колоните отиват на същия ред.

В нашия пример ще използваме .col-lgточката на прекъсване и ще видим как колоните изглеждат на различни екрани. За резолюции, които са по-ниски от дадената точка на прекъсване (<992px), колоните ще се показват вертикално. Това означава, че на мобилните устройства и таблетите колоните ще изглеждат така:

А за устройства, които имат разделителна способност, която е по-висока или равна на точката на прекъсване (≥992px), колоните ще отидат на същия ред. Това означава, че на лаптопи и настолни компютри ще получите този резултат:

 ... ... 

Можете да видите кода на живо в CodePen.Ако отворите Codepen в друг прозорец и видите страницата с различни резолюции, ще видите колоните да променят позиционирането си.

Ако искате 2-те колони да отидат на една линия, започвайки с по-големи мобилни телефони, които бихте използвали .col-sm, за таблети .col-mdи за изключително големи екрани .col-xl.

Задаване на размери и точки на прекъсване за колони

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

Например, ако искате три колони с различни размери да се подравнят по ред, започвайки с разделителната способност на лаптопа, трябва да направите това:

 ... ... ... 

Ще получите този резултат при резолюции <992px:

А за екрани с ≥992px:

Отново можете да видите кода на живо в CodePen.

Но какво, ако искате да покажете по една колона на ред на малки мобилни резолюции, две колони на ред на таблети и четири на лаптопи или устройства с по-висока резолюция?

След това добавяте няколко класа за една колона, за да опишете поведението за всяка резолюция. Използвайки множество класове, посочвате, че съдържанието ще заема шест слота за таблети и три за лаптопи.

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

Резултатът ще се покаже така на таблетите:

И така на лаптопите и по-високите разделителни способности:

Този пример също е на живо в CodePen.

Като упражнение можете да опитате да създадете редове с различен брой колони в зависимост от размера на екрана и да проверите поведението в конзолата на браузъра си.

Прихващане на колони

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

Използването на този клас е същото като добавянето на празна колона преди вашата колона. Ето един прост пример:

 ... ... 

Можете да видите кода на живо в CodePen.

Можете да използвате класа на всяка колона в реда. Ето още няколко примера:

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

Влагане на колони

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

След това въпросният ред (който ще има ширината на родителската си колона) ще бъде разделен на 12 (по-малки) колони, които можете да препращате през .col-* класовете.

Нека да разгледаме какво се случва, когато вмъкнем нов ред в колона:

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

Можете да видите кода на живо в CodePen.

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

Това завършва основните знания по отношение на Bootstrap 4 отзивчивата мрежа мрежа. Ако имате въпроси, моля, уведомете ме в коментарите, ще се радвам да отговоря.

Допълнителна информация

Ако имате повече време, ето някои полезни ресурси:

  • Официална мрежова документация от GetBootstrap
  • Видео урок от Скримба

Тази статия първоначално е публикувана в блога на BootstrapBay. Той е част от по-голяма серия уроци за Bootstrap 4, наречени 14 дни на Bootstrap 4. Ако искате да продължите да научавате за компонентите на Bootstrap 4, тези статии са добро място за начало.

И ако искате да започнете своето развитие с шаблон Bootstrap, можете да разгледате нашия пазар.

Но преди да се задълбочите, отделете малко време, за да отпразнувате новопридобитите си умения !?