✅ Научете се да използвате Bootstrap Grid

Съдържание

Колона а
Колона Б
Колона С
Колона а
Колона Б
Колона С

Bootstrap управлява мрежова структура или известна още като Решетка, което не е нищо повече от оформление на екрана, което ни помага да организираме елементите си, сякаш разделихме екрана на редове и колони и го обработвахме като голяма таблица.
Този тип манипулация ни кара да мислим за дизайна по „уникален“ начин и момента, в който имаме малко повече опит в използването Bootstrap Ще започнем да виждаме всичко по този начин и по този начин ще спечелим последователност и бързина в начина си на работа.
Първото нещо, което трябва да знаете, е, че този дизайн на Решетка ни позволява да работим по начин, по който можем да реализираме изгледи за мобилни устройства изначално, това разбира се от версия 3 на Bootstrap, благодарение на факта, че тази версия е създадена с мисъл за мобилен дизайн.
В предишните версии на рамката класовете трябваше да бъдат посочени директно, така че нашият дизайн да може да се адаптира към резолюциите на мобилните устройства, сега различните класове на Решетка те го правят автоматично.
За да се възползваме от тази функция, трябва да мислим от малки до големи, тоест класовете, които прилагаме, винаги трябва да се смятат за най -малки и след това ще се мащабира до други резолюции, тоест ако дефинираме sm клас (малък или малък), автоматично Bootstrap той приема, че това е минималният израз и че след това може да бъде мащабиран md (медиана) или до lg (голям).
Преди да преминем към по -практични примери, трябва да разберем кои са класовете, които можем да използваме в колоните на a Решетка Освен това трябва да знаем за кой случай се отнася всеки един от тях, като по този начин, когато проектираме нашия сайт, можем да вземем предвид най -малкото устройство, което искаме да достигнем.
С този подход можем да изграждаме сайтове Подходящ за мобилни устройства, колко важни стават те днес за търсачките и техните резултати, като по този начин ни помагат в допълнение към създаването на добри сайтове, за да спечелим някои точки в нашата репутация SEO, със същата работа разбира се.
Екрани на телефонаТова е най-малкото устройство, което на теория може да се ориентира в нашия дизайн, въпреки че резолюциите на телефоните постепенно се преобразуват в Full HD, това обикновено е за най-високия клас, докато средният и ниският диапазон, който на теория е повечето поддържат много по -ниски резолюции. Видът на Решетка което се отнася за този случай е: col-xs- и се прилага за решения, по -малки от ширината 768 пиксела.
Екрани за таблетиТеоретично те са второто най -малко устройство, благодарение на по -големия си дял от размера, таблетът предлага по -голяма навигационна повърхност, така че можем да използваме малко повече съдържание, отколкото с екрана на телефона, в допълнение към това обикновено навигацията на таблети се извършва хоризонтално. Класът, който се прилага за това устройство е col-sm- и се прилага за резолюции с ширина по -голяма от 768 пиксела и под 992 пиксела.
Оборудване за малки екраниТе обикновено са тези, които принадлежат към ниските гами настолни компютри и лаптопи, те могат да бъдат оборудване с екрани по -малки от 15 инча, или които имат повече от 10 години живот, те също са лаптопите, които са предназначени за студенти и сектора с ниски покупателна способност, това е мажоритарният сектор. Класът, който се прилага за този случай, е col-md- и граничните резолюции за ширината са по-големи от 992 пиксела и по -малко от 1200 пиксела.
Оборудване с голям екранТук можем да изкопаем най-модерното оборудване, а също и екраните с повече от 15 инча, в тази категория влизат новото оборудване като ултрапреносимо, 4K резолюция или QHD също и там, където виждаме повърхности по -големи от 1080p. Като изключваме ширините, които ще обработваме тук, са тези, по -големи от 1200 пиксела, това докато следващата версия на Bootstrap вероятно.
Тъй като познаваме теорията зад системата Решетка на Bootstrap, Добре е да започнем да го прилагаме на практика, но преди да видим кода, трябва да разберем още няколко концепции, винаги трябва по конвенция и най -добри практики да използваме елемент с класа контейнер, тъй като това ще създаде контейнера, тъй като името му го показва, за да запази различните ни колони. Другата концепция, която трябва да знаем, е, че винаги ще има 12 колони, така че различните комбинации, които правим, трябва да вземат предвид това число.
В следния пример ще създадем код за оформление на 3 големи колони, ще използваме класа col-md- и тъй като искаме 3 равни колони, когато разделяме 12 на 3, получаваме числото 4, така че това ще бъде размерът на всяка от получените колони.
Нека да разгледаме кода без да се замисляме:

Bootstrap Grid

Пример за това как да използвате колони в bootstrap

Колона а

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam улеснява моя in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Колона Б

Колона С

Структурата е много проста, създадохме div с класа контейнер, и вътре в div с класа ред накрая в рамките на последния създадохме 3 диви с класа col-md-4 Това е класът за малки екрани за преносими компютри и виждаме как печелим числото 4, което показва, че всеки div от тях е еквивалентен на 4 колони от Решетка. Нека да видим как изглежда, когато стартираме в браузъра си:

Увеличете

Ако забележим, тогава имаме 3 големи колони, но какво се случва, когато намалим размера до резолюция, по -ниска от минимума на прилагания клас, тъй като колоните просто ще бъдат подредени една върху друга, както виждаме в следното изображение:

Увеличете

Въпреки че това не е лошо, понякога не поведението, което искаме да приеме нашият дизайн, за това можем да включим поведението директно с класове за различните резолюции, нека видим в следващия код как променяме класовете на различни колони за постигане на различен резултат:

Bootstrap Grid

Пример за това как да използвате колони в bootstrap

Колона а

Колона Б

Колона С

Сега, ако забележим в нашия код, всичко остава същото, с изключение на нашите класове, където за колони A и B сме добавили класа col-sm-6 и за колона C класът col-sm-12, това означава, че когато резолюцията е намалена, sm класовете ще управляват, както виждаме на следното изображение:

Увеличете

Виждаме, че в същия размер на първия пример, вместо да бъдат подредени, колоните A и B стават в един и същ регион, а колона C взема един ред за себе си. Тук виждаме голямата полезност на Решетка особено с дизайни, които са фокусирани върху това да бъдат отзивчиви и мобилни.
С това завършваме този урок, където научихме как системата на Решетка на BootstrapРазбира се, това е само върхът на айсберга, има много повече съдържание, което можем да изследваме в други уроци, но с тези основни познания можем да започнем да виждаме как да свържем нашите проекти по по -логичен начин и с по -малко усилия, благодарение на рамката.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка