Преглед
Компоненти и опции за поставување на вашиот проект Bootstrap, вклучувајќи контејнери за завиткување, моќен систем на мрежа, флексибилен медиумски објект и респонзивни класи на алатки.
Контејнери
Контејнерите се најосновниот елемент за распоред во Bootstrap и се потребни кога се користи нашиот стандарден мрежен систем . Контејнерите се користат за да ја содржат, подлогата и (понекогаш) центрирањето на содржината во нив. Додека контејнерите може да се вгнездени, за повеќето распореди не е потребен вгнезден контејнер.
Bootstrap доаѓа со три различни контејнери:
.container
, кој поставува amax-width
на секоја одзивна точка на прекин.container-fluid
, што еwidth: 100%
на сите точки на прекин.container-{breakpoint}
, што еwidth: 100%
до наведената точка на прекин
Табелата подолу илустрира како секој контејнер се max-width
споредува со оригиналот .container
и .container-fluid
низ секоја точка на прекин.
Погледнете ги во акција и споредете ги во нашиот пример на Grid .
Екстра мала <576 пиксели |
Мала ≥576 px |
Средно ≥768 px |
Големи ≥992 пиксели |
Екстра голема ≥1200 пиксели |
|
---|---|---|---|---|---|
.container |
100% | 540 пиксели | 720 пиксели | 960 пиксели | 1140 пиксели |
.container-sm |
100% | 540 пиксели | 720 пиксели | 960 пиксели | 1140 пиксели |
.container-md |
100% | 100% | 720 пиксели | 960 пиксели | 1140 пиксели |
.container-lg |
100% | 100% | 100% | 960 пиксели | 1140 пиксели |
.container-xl |
100% | 100% | 100% | 100% | 1140 пиксели |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Се во едно
Нашата стандардна .container
класа е одговорен контејнер со фиксна ширина, што значи дека max-width
се менува на секоја точка на прекин.
Течност
Користете .container-fluid
го за контејнер со целосна ширина, опфаќајќи ја целата ширина на приказот.
Одговорен
Респонзивните контејнери се нови во Bootstrap v4.4. Тие ви дозволуваат да наведете класа која е широка 100% додека не се достигне одредената точка на прекин, по што применуваме max-width
s за секоја од повисоките точки на прекин. На пример, .container-sm
е 100% широк за да започне додека sm
не се достигне точката на прекин, каде што ќе се зголемува со md
, lg
, и xl
.
Одговорни точки на прекин
Бидејќи Bootstrap е развиен прво да биде мобилен, користиме неколку медиумски барања за да создадеме разумни точки на прекин за нашите распореди и интерфејси. Овие точки на прекин се главно засновани на минималните ширини на приказите и ни овозможуваат да ги зголемиме елементите како што се менува приказот.
Bootstrap првенствено ги користи следните опсези на барања за медиуми - или точки на прекин - во нашите изворни датотеки Sass за нашиот распоред, мрежен систем и компоненти.
Бидејќи го пишуваме нашиот изворен CSS во Sass, сите наши барања за медиуми се достапни преку Sass миксови:
Повремено користиме медиумски барања што одат во друга насока (дадената големина на екранот или помала ):
Имајте предвид дека со оглед на тоа што прелистувачите во моментов не поддржуваат прашања за контекст на опсегот , работиме околу ограничувањата min-
и max-
префиксите и портите за поглед со фракциони ширини (што може да се појават под одредени услови на уреди со висока dpi, на пример) со користење на вредности со поголема прецизност за овие споредби .
Уште еднаш, овие медиумски прашања се достапни и преку Sass mixins:
Исто така, постојат барања за медиуми и мешавини за таргетирање на еден сегмент од големини на екранот користејќи ја минималната и максималната ширина на точката на прекин.
Овие барања за медиуми се исто така достапни преку Sass mixins:
Слично на тоа, медиумските барања може да опфаќаат повеќе ширини на точки на прекин:
Sass mixin за таргетирање на истиот опсег на големина на екранот би бил:
З-индекс
Неколку компоненти на Bootstrap користат z-index
, својството CSS што помага да се контролира распоредот преку обезбедување на трета оска за уредување на содржината. Користиме стандардна скала на z-индекс во Bootstrap која е дизајнирана за правилно слоевитост на навигација, совети за алатки и поповер, модали и многу повеќе.
Овие повисоки вредности започнуваат со произволен број, доволно висок и специфични за идеално да се избегнат конфликти. Ни треба стандарден сет од нив низ нашите слоевити компоненти - совети за алатки, поповери, ленти за навигација, паѓачки мени, модали - за да можеме да бидеме разумно доследни во однесувањето. Нема причина да не можевме да користиме 100
+ или 500
+.
Ние не поттикнуваме прилагодување на овие индивидуални вредности; ако промените еден, најверојатно ќе треба да ги промените сите.
За да се справиме со преклопувачките граници во компонентите (на пр., копчиња и влезови во влезните групи), користиме ниски едноцифрени z-index
вредности на 1
, 2
, и 3
за стандардни, лебди и активни состојби. При лебди/фокус/активно, ставаме одреден елемент во прв план со поголема z-index
вредност за да ја прикаже нивната граница над елементите од браќата или сестрите.