Oersicht
Komponinten en opsjes foar it útlizzen fan jo Bootstrap-projekt, ynklusyf ynpakken fan konteners, in krêftich rastersysteem, in fleksibel mediaobjekt, en responsive nutklassen.
Containers binne it meast basale layout-elemint yn Bootstrap en binne ferplicht by it brûken fan ús standert rastersysteem . Kies út in responsive kontener mei fêste breedte (dat betsjut dat de max-width
feroaringen by elk brekpunt betsjutte) of floeibere breedte (dat betsjut dat it de 100%
hiele tiid breed is).
Wylst konteners kinne wurde nested, hawwe de measte yndielingen gjin nestede kontener nedich.
Brûk .container-fluid
foar in folsleine breedte container, oerspant de hiele breedte fan de viewport.
Sûnt Bootstrap is ûntwikkele om earst mobyl te wêzen, brûke wy in hantsjefol mediafragen om ferstannige brekpunten te meitsjen foar ús yndielingen en ynterfaces. Dizze brekpunten binne meastentiids basearre op minimale viewport-breedtes en lit ús eleminten opskaalje as de viewport feroaret.
Bootstrap brûkt yn it foarste plak de folgjende media-fraachbereiken - of brekpunten - yn ús boarne Sass-bestannen foar ús yndieling, rastersysteem en komponinten.
Sûnt wy ús boarne CSS yn Sass skriuwe, binne al ús mediafragen beskikber fia Sass-mixins:
Wy brûke sa no en dan mediafragen dy't yn 'e oare rjochting gean (de opjûne skermgrutte of lytser ):
Tink derom dat, om't browsers op it stuit gjin berikkontekstfragen stypje , wurkje wy om de beheiningen fan min-
en max-
foarheaksels en viewports mei fraksjonele breedtes (wat kinne foarkomme ûnder bepaalde betingsten op apparaten mei hege dpi, bygelyks) troch wearden mei hegere presyzje te brûken foar dizze fergelikingen .
Nochris binne dizze mediafragen ek beskikber fia Sass mixins:
D'r binne ek mediafragen en mixins foar it rjochtsjen fan in inkeld segmint fan skermgrutte mei de minimale en maksimale brekpuntbreedte.
Dizze mediafragen binne ek te krijen fia Sass mixins:
Op deselde manier kinne mediafragen meardere brekpuntbreedtes spanne:
De Sass-mixin foar it rjochtsjen fan itselde berik fan skermgrutte soe wêze:
Ferskate Bootstrap-komponinten brûke z-index
, it CSS-eigenskip dat helpt yndieling te kontrolearjen troch in tredde as te leverjen om ynhâld te regeljen. Wy brûke in standert z-yndeksskaal yn Bootstrap dy't is ûntworpen om goed navigaasje, tooltips en popovers, modalen, en mear te lagen.
Dizze hegere wearden begjinne by in willekeurige nûmer, heech en spesifyk genôch om ideaal konflikten te foarkommen. Wy hawwe in standert set fan dizze nedich oer ús lagen komponinten - tooltips, popovers, navbars, dropdowns, modals - sadat wy ridlik konsekwint kinne wêze yn it gedrach. 100
D'r is gjin reden dat wy + of + net koenen hawwe brûkt 500
.
Wy moedigje oanpassing fan dizze yndividuele wearden net oan; as jo ien feroarje, moatte jo se wierskynlik allegear feroarje.
Om oerlappende grinzen binnen komponinten te behanneljen (bgl. knoppen en ynputs yn ynfiergroepen), brûke wy lege iensiferwearden z-index
fan 1
, 2
, en 3
foar standert, hover en aktive steaten. Op hover/focus/active bringe wy in bepaald elemint nei foaren mei in hegere z-index
wearde om har grins oer de sibling-eleminten sjen te litten.