Блокова система Bootstrap на български
Опции за структуриране на страници с Bootstrap, включително глобални стилове, необходими инструменти, блокова система и др.
Bootstrap включва мощна мобилна система за оформление на блокове за сгради с всякакви форми и размери. Базира се на маркиране на колона 12 и има множество нива, по едно за всеки медиен диапазон на заявка. Можете да го използвате с Sass mixins или нашите предварително дефинирани класове.
Съдържание
Как работи
На високо ниво блоковата система работи по следния начин:
Звучи добре? Страхотно, нека преминем към разглеждане на всичко това в пример.
Пример за бърз старт
Ако използвате CSS, компилиран от Bootstrap, в този пример ще искате да започнете.
Горният пример създава три равни ширини на колони на малки, средни, големи и изключително големи устройства, използвайки нашите предварително дефинирани класове на мрежата. Тези колони са центрирани на страницата с родителския .container.
Функционалност за маркиране
Вижте как аспектите на кутията на Bootstrap работят на множество устройства с таблица.
| .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 12 | |||
| 1,875 rem / 30px (15px от всяка страна на колона) | |||
| да | |||
| да | |||
| да |
Sass mixin
Когато използвате изходни Sass файлове на Bootstrap, имате възможност да използвате Sass променливи и миксини, за да създадете персонализирани семантични, отзивчиви страници за маркиране. Нашата предварително дефинирана мрежа от класове използва същите променливи и миксини, за да представи цял набор от предварително дефинирани класове за бързо адаптиранемаркиране.
Променливи
Променливите и картите определят броя на колоните, ширината на празнината и медийните заявки, където започват плаващите колони. Използваме ги, за да създадем предварително дефинираната мрежа от класове, описани по-горе, както и за персонализираните миксини, изброени по-долу.
смесване
Смесите се използват заедно с променливи за маркиране за формиране на семантичен CSS за отделни колони за маркиране.
Примери за използване
Можете да промените променливите на ваши собствени стойности или просто да използвате миксини с техните стойности по подразбиране. Ето пример, използващ опциите по подразбиране за създаване на две колони с маркиране с празнина между тях.
Виждайки го в действие в това доведе до пример.
Предварително дефинирани класове
В допълнение към семантичния миксин, Bootstrap включва широк набор от вградени класове за бързо създаване на колони от мрежа. Той включва опции за хардуерно калибриране на полето, пренареждане на колони и др.
Пример: подредени хоризонтално
С помощта на единичен набор от .col-md-* мрежови класове можете да създадете основна блокова система, която започва да се подрежда на мобилни устройства и таблетни устройства (много малки в малкия диапазон), преди да стане хоризонтална на настолно (средно) устройство. Поставете колони от мрежа във всеки .ред.