Обзор
Bootstrap проектиңизди жайгаштыруунун компоненттери жана параметрлери, анын ичинде оролгон контейнерлер, күчтүү тор системасы, ийкемдүү медиа объекти жана жооп берүүчү утилита класстары.
Контейнерлер Bootstrap'теги эң негизги макет элементи жана биздин демейки тор тутумубузду колдонууда талап кылынат . Жооптуу, туурасы белгиленген контейнерден (анын max-width
ар бир үзгүлтүккө учуроо чекитинде өзгөрүшүн билдирет) же суюктуктун кеңдигинен (ал 100%
ар дайым кенен дегенди билдирет) тандаңыз.
Контейнерлерди уя салууга болот , бирок көпчүлүк макеттер уя салынган контейнерди талап кылбайт.
.container-fluid
Көрүү терезесинин бүт кеңдигин камтыган толук кеңдиктеги контейнер үчүн колдонуңуз .
Bootstrap алгач мобилдик болуу үчүн иштелип чыккандыктан , биз макеттерибиз жана интерфейстерибиз үчүн акылга сыярлык үзгүлтүктөрдү түзүү үчүн бир нече медиа сурамдарды колдонобуз. Бул үзүлүү чекиттери көбүнчө көрүү портунун минималдуу кеңдигине негизделет жана көрүү порту өзгөргөн сайын элементтерди чоңойтууга мүмкүндүк берет.
Bootstrap негизинен биздин Sass булагы файлдарыбызда биздин макет, тор тутумубуз жана компоненттерибиз үчүн төмөнкү медиа суроо диапазондорун же үзгүлтүккө учуроо чектерин колдонот.
Биз CSS булагыбызды Sassда жазгандыктан, биздин бардык медиа сурамдарыбыз Sass аралашмалары аркылуу жеткиликтүү:
Биз кээде башка багытта (берилген экран өлчөмү же андан кичирээк ) медиа сурамдарды колдонобуз:
Браузердер учурда диапазондун контексттик сурамдарын колдобогондуктан , биз бул салыштыруулар үчүн жогорку тактыктагы маанилерди колдонуу менен, бөлчөк кеңдиктеги (мисалы, жогорку dpi түзмөктөрүндө белгилүү бир шарттарда пайда болушу мүмкүн ) чектөөлөр min-
менен max-
префикстердин жана көрүү портторунун тегерегинде иштейбиз. .
Дагы бир жолу, бул медиа сурамдары Sass аралашмасы аркылуу да жеткиликтүү:
Минималдуу жана максималдуу үзгүлтүккө учуратуу чекиттерин колдонуу менен экрандын бир сегментин максаттуу үчүн медиа сурамдары жана миксингдер да бар.
Бул медиа сурамдары Sass аралашмасы аркылуу да жеткиликтүү:
Ошо сыяктуу эле, медиа сурамдары бир нече үзүү чекитинин туурасын камтышы мүмкүн:
Ошол эле экран өлчөмү диапазонуна багытталган Sass аралашмасы:
Бир нече Bootstrap компоненттери z-index
мазмунду иретке келтирүү үчүн үчүнчү огу менен макетти башкарууга жардам берген CSS касиетин колдонушат. Биз Bootstrap'те демейки z-индекс шкаласын колдонобуз, ал навигацияны, инструменттерди жана поповерлерди, модальдарды жана башкаларды туура катмарлоо үчүн иштелип чыккан.
Бул жогорку баалуулуктар ыктыярдуу сандан башталат, жогорку жана конфликттерден качуу үчүн жетиштүү. Биз жүрүм-турумубузда акылга сыярлык ырааттуу болушубуз үчүн, биздин катмарлуу компоненттерибиз боюнча стандарттуу топтому керек - инструментарийлер, поповерлер, навигациялар, ачылуучу тизмелер, модалдар. 100
+ же + колдонбогонубузга эч кандай себеп жок 500
.
Биз бул жеке баалуулуктарды ыңгайлаштырууга үндөбөйбүз; бирөөсүн өзгөртсөңүз, алардын баарын өзгөртүүгө туура келет.
Компоненттердин ичиндеги кабатталган чек араларды иштетүү үчүн (мисалы, киргизүү топторундагы баскычтар жана киргизүүлөр) биз төмөнкү бир орундуу z-index
маанилерди колдонобуз 1
, 2
, ал 3
эми демейки, курсор жана активдүү абалдар үчүн. z-index
Hover/focus/active режиминде биз белгилүү бир элементти бир тууган элементтердин үстүнөн чектерин көрсөтүү үчүн жогорураак мааниге алып чыгабыз.