Тор жүйесі
Он екі баған жүйесі, бес әдепкі жауап беру деңгейі, Sass айнымалылары мен араластырулары және ондаған алдын ала анықталған сыныптардың арқасында барлық пішіндер мен өлшемдердің макеттерін құру үшін қуатты мобильді бірінші флексбокс торын пайдаланыңыз.
Bootstrap тор жүйесі мазмұнды орналастыру және туралау үшін контейнерлер, жолдар және бағандар сериясын пайдаланады. Ол flexbox көмегімен жасалған және толық жауап береді. Төменде мысал және тордың қалай біріктірілетіні туралы терең көзқарас берілген.
Флексбокспен жаңадан таныссыз ба? Фон, терминология, нұсқаулар және код үзінділері үшін осы CSS Tricks flexbox нұсқаулығын оқыңыз .
Жоғарыда келтірілген мысал біздің алдын ала анықталған тор сыныптарын пайдаланып шағын, орташа, үлкен және аса үлкен құрылғыларда үш бірдей ені бар бағандарды жасайды. Бұл бағандар ата-анасы бар беттің ортасында орналасқан .container
.
Оны бөлшектесек, ол қалай жұмыс істейді:
- Контейнерлер сіздің сайтыңыздың мазмұнын ортасына және көлденеңінен толтыруға мүмкіндік береді. Жауапты пиксел ені үшін
.container
немесе барлық көру алаңы мен құрылғы өлшемдері.container-fluid
үшін пайдаланыңыз.width: 100%
- Жолдар - бағандарға арналған орауыштар. Әрбір бағанада
padding
олардың арасындағы кеңістікті басқаруға арналған көлденең (арық деп аталады) бар. Оданpadding
кейін теріс шеттері бар жолдарда бұған қарсы әрекет жасалады. Осылайша, бағандарыңыздағы барлық мазмұн сол жаққа визуалды түрде тураланады. - Тор орналасуында мазмұн бағандар ішінде орналасуы керек және тек бағандар жолдардың тікелей еншілестері болуы мүмкін.
- Flexbox арқасында, көрсетілмеген тор бағандары
width
автоматты түрде бірдей ен бағандары ретінде орналасады. Мысалы,.col-sm
әрқайсысының төрт данасы кіші үзілу нүктесінен және одан жоғарыдан автоматты түрде 25% ені болады. Қосымша мысалдар үшін автоматты орналасу бағандары бөлімін қараңыз. - Баған сыныптары әр жолға мүмкін болатын 12 бағанның ішінде пайдаланғыңыз келетін бағандар санын көрсетеді. Сонымен, ені бірдей үш баған қажет болса, пайдалана аласыз
.col-4
. - s бағандары
width
пайызбен белгіленеді, сондықтан олар әрқашан негізгі элементіне қатысты сұйық және өлшемді болады. - Жеке бағандар арасында саңылаулар жасау үшін бағандарда көлденең
padding
болады, дегенменmargin
жолдардан жәнеpadding
бағандардан жолдарды жоюға.no-gutters
болады.row
. - Торды жауапты ету үшін әрбір жауап беретін тоқтау нүктесі үшін бір-бірден бес тордың тоқтау нүктесі бар : барлық тоқтау нүктелері (өте кішкентай), кіші, орташа, үлкен және өте үлкен.
- Тордың тоқтау нүктелері ең аз медиа сұрауларына негізделген, яғни олар бір тоқтау нүктесіне және одан жоғары тұрғандардың барлығына қолданылады (мысалы,
.col-sm-4
шағын, орташа, үлкен және аса үлкен құрылғыларға қолданылады, бірақ біріншіxs
тоқтау нүктесі емес). - Семантикалық белгілеу үшін алдын ала анықталған тор сыныптарын (мысалы
.col-4
) немесе Sass араластырғыштарын пайдалануға болады.
Кейбір HTML элементтерін икемді контейнерлер ретінде пайдалану мүмкін еместігі сияқты flexbox айналасындағы шектеулер мен қателерден хабардар болыңыз .
Bootstrap көптеген өлшемдерді анықтау үшін em
s немесе s қолданса, s тордың тоқтау нүктелері мен контейнер ені үшін пайдаланылады. Себебі қарау терезесінің ені пиксельде және қаріп өлшемімен өзгермейді .rem
px
Bootstrap тор жүйесінің аспектілері ыңғайлы кесте арқылы бірнеше құрылғыларда қалай жұмыс істейтінін қараңыз.
Өте кішкентай <576px |
Шағын ≥576px |
Орташа ≥768px |
Үлкен ≥992px |
Өте үлкен ≥1200px |
|
---|---|---|---|---|---|
Максималды контейнер ені | Ешбір (автоматты) | 540px | 720px | 960px | 1140px |
Сынып префиксі | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
бағандар саны | 12 | ||||
Арық ені | 30px (бағанның әр жағында 15px) | ||||
Ұялы | Иә | ||||
Бағанға тапсырыс беру | Иә |
сияқты нақты нөмірленген сыныпсыз оңай баған өлшемін алу үшін тоқтау нүктесіне тән баған сыныптарын пайдаланыңыз .col-sm-6
.
Мысалы, мұнда әрбір құрылғыға және көру терезесіне қолданылатын екі тор орналасуы xs
бар xl
. Қажетті әрбір тоқтау нүктесі үшін бірліксіз сыныптардың кез келген санын қосыңыз және әрбір баған бірдей ені болады.
Ені бірдей бағандарды бірнеше жолға бөлуге болады, бірақ Safari flexbox қатесіflex-basis
оның анық немесе таңбасыз жұмыс істеуіне кедергі болды border
. Браузердің ескі нұсқалары үшін уақытша шешімдер бар, бірақ олар жаңартылған болса, қажет болмауы керек.
Flexbox тор бағандарының автоматты орналасуы бір бағанның енін орнатуға және оның айналасындағы бағандардың өлшемін автоматты түрде өзгертуге болатынын білдіреді. Алдын ала анықталған тор сыныптарын (төменде көрсетілгендей), тор қоспаларын немесе кірістірілген ендерді пайдалануға болады. Басқа бағандар ортаңғы бағанның еніне қарамастан өлшемін өзгертетінін ескеріңіз.
col-{breakpoint}-auto
Мазмұнының табиғи еніне негізделген бағандарды өлшемдеу үшін сыныптарды пайдаланыңыз .
.w-100
Бағандарды жаңа жолға үзгіңіз келетін жерді кірістіру арқылы бірнеше жолдарды қамтитын бірдей ені бар бағандарды жасаңыз . .w-100
Кейбір жауап беретін дисплей утилиталарымен араластыру арқылы үзілістерді жауапты етіңіз .
Bootstrap торы күрделі жауап беретін орналасуларды құруға арналған алдын ала анықталған сыныптардың бес деңгейін қамтиды. Бағандар өлшемін өзіңіз қалағаныңызға қарамастан өте кішкентай, шағын, орташа, үлкен немесе аса үлкен құрылғыларда реттеңіз.
Құрылғылардың ең кішкентайынан ең үлкеніне дейін бірдей торлар үшін .col
және .col-*
сыныптарын пайдаланыңыз. Арнайы өлшемді баған қажет болғанда нөмірленген сыныпты көрсетіңіз; әйтпесе, еркін ұстаныңыз .col
.
Класстардың жалғыз жинағын пайдалана отырып, жинақталып басталатын және шағын тоқтау нүктесінде ( ) .col-sm-*
көлденең болатын негізгі тор жүйесін жасауға болады .sm
Бағандарыңыздың жай ғана кейбір тор деңгейлерінде жинақталғанын қаламайсыз ба? Қажет болса, әр деңгей үшін әртүрлі сыныптардың комбинациясын пайдаланыңыз. Мұның бәрі қалай жұмыс істейтіні туралы жақсы түсінік алу үшін төмендегі мысалды қараңыз.
Бағандарды тігінен және көлденеңінен туралау үшін flexbox туралау утилиталарын пайдаланыңыз.
Біздің алдын ала анықталған тор сыныптарындағы бағандар арасындағы саңылауларды көмегімен жоюға болады .no-gutters
. Бұл барлық тікелей еншілес бағандардан теріс margin
s .row
және көлденең бағандарды жояды.padding
Міне, осы стильдерді жасауға арналған бастапқы код. Бағанды қайта анықтау тек бірінші еншілес бағандарға арналғанын және төлсипат селекторы арқылы бағытталғанын ескеріңіз . Бұл неғұрлым нақты селекторды жасағанымен, баған толтыру әлі де аралық утилиталармен қосымша теңшеуге болады .
Шеттен шетке дизайн керек пе? Ата-ананы тастаңыз .container
немесе .container-fluid
.
Іс жүзінде бұл қалай көрінеді. Мұны барлық басқа алдын ала анықталған тор сыныптарымен (баған ендерін, жауап беретін деңгейлерді, қайта реттерді және т.б. қоса) пайдалануды жалғастыра алатыныңызды ескеріңіз.
Бір жолға 12-ден астам бағандар орналастырылса, қосымша бағандардың әрбір тобы бір бірлік ретінде жаңа жолға оралады.
9 + 4 = 13 > 12 болғандықтан, бұл 4-бағандық кең div бір іргелес бірлік ретінде жаңа жолға оралады.
Келесі бағандар жаңа жол бойымен жалғасады.
Flexbox-та бағандарды жаңа жолға бөлу шағын бұзуды қажет етеді: бағандарыңызды жаңа жолға орағыңыз width: 100%
келетін жері бар элементті қосыңыз. Әдетте бұл бірнеше .row
s көмегімен орындалады, бірақ әрбір іске асыру әдісі мұны есептей алмайды.
Сондай-ақ, бұл үзілісті біздің жауап беретін дисплей утилиталары арқылы белгілі бір тоқтау нүктелерінде қолдануға болады .
Мазмұныңыздың көрнекі ретін.order-
басқару үшін сыныптарды пайдаланыңыз . Бұл сыныптар жауап береді, сондықтан үзіліс нүктесін орнатуға болады (мысалы, ). Барлық бес тор деңгейлері бойынша қолдауды қамтиды .order
.order-1.order-md-2
1
12
Сәйкесінше және ( ) қолдану арқылы элементті өзгертетін жауап беретін .order-first
және .order-last
сыныптар да бар. Бұл сыныптарды қажетінше нөмірленген сыныптармен араластыруға болады .order
order: -1
order: 13
order: $columns + 1
.order-*
Тор бағандарын екі жолмен ауыстыруға болады: жауап беретін .offset-
тор сыныптары және маржа утилиталары . Тор сыныптары бағандарға сәйкес өлшемде болады, ал шеттер ығысу ені айнымалы болатын жылдам орналасулар үшін пайдалырақ.
Класстарды пайдаланып бағандарды оңға жылжытыңыз .offset-md-*
. Бұл сыныптар бағанның сол жақ жиегін *
бағандар бойынша көбейтеді. Мысалы, төрт бағанның үстінен .offset-md-4
жылжытады ..col-md-4
Жауап беретін тоқтау нүктелерінде бағандарды тазалауға қоса, ығысуларды қалпына келтіру қажет болуы мүмкін. Мұны тор мысалында әрекетте қараңыз .
v4 жүйесінде flexbox-қа көшу арқылы .mr-auto
бауырлас бағандарды бір-бірінен алшақтататын маржа утилиталарын пайдалануға болады.
Мазмұнды әдепкі тормен кірістіру үшін бұрыннан бар бағанға жаңа .row
және .col-sm-*
бағандар жинағын қосыңыз .col-sm-*
. Кірістірілген жолдар 12 немесе одан аз қосылатын бағандар жинағын қамтуы керек (барлық 12 қолжетімді бағанды пайдалану қажет емес).
Bootstrap бастапқы Sass файлдарын пайдаланған кезде теңшелетін, семантикалық және жауап беретін бет орналасуларын жасау үшін Sass айнымалылары мен араластырғыштарын пайдалану мүмкіндігі бар. Біздің алдын ала анықталған тор сыныптары жылдам жауап беретін орналасулар үшін пайдалануға дайын сыныптардың толық жиынтығын қамтамасыз ету үшін дәл осы айнымалылар мен араластырғыштарды пайдаланады.
Айнымалылар мен карталар өзгермелі бағандарды бастайтын бағандар санын, ойық енін және медиа сұрау нүктесін анықтайды. Біз оларды жоғарыда құжатталған алдын ала анықталған тор сыныптарын жасау үшін, сондай-ақ төменде тізімделген теңшелетін араластырғыштар үшін пайдаланамыз.
Араластар жеке тор бағандары үшін семантикалық CSS құру үшін тор айнымалыларымен бірге пайдаланылады.
Айнымалы мәндерді өзіңіздің теңшелетін мәндеріңізге өзгерте аласыз немесе олардың әдепкі мәндерімен араластырғыштарды ғана пайдалана аласыз. Міне, арасында бос орын бар екі бағандық орналасуды жасау үшін әдепкі параметрлерді пайдаланудың мысалы.
Кірістірілген тор Sass айнымалылары мен карталарын пайдалану арқылы алдын ала анықталған тор сыныптарын толығымен теңшеуге болады. Деңгейлердің санын, медиа сұрау өлшемдерін және контейнер ендерін өзгертіңіз, содан кейін қайта құрастырыңыз.
Тор бағандарының санын Sass айнымалылары арқылы өзгертуге болады. $grid-columns
әр жеке бағанның енін (пайызбен) жасау үшін пайдаланылады, ал $grid-gutter-width
баған ағындарының енін орнатады.
Бағандардың өзінен тыс жылжыту арқылы сіз тор деңгейлерінің санын да теңшей аласыз. Егер сіз тек төрт тор деңгейін қаласаңыз, $grid-breakpoints
және келесідей $container-max-widths
нәрсеге жаңартасыз:
Sass айнымалыларына немесе карталарына кез келген өзгертулер енгізген кезде өзгертулерді сақтап, қайта құрастыру қажет болады. Бұл баған ені, ығысуы және реті үшін алдын ала анықталған тор сыныптарының жаңа жинағын шығарады. Жауапты көріну утилиталары да теңшелетін тоқтау нүктелерін пайдалану үшін жаңартылады. px
Тор мәндерін ( rem
, em
, немесе емес) орнатқаныңызға көз жеткізіңіз %
.