Get stat wit Bootstrap
Bootstrap na wan pawaful, ficha-pak frɔntɛnd tulkit. Bil ɛnitin—frɔm protɔtayp to prodakshɔn—insay minit.
Kwik wan fɔ stat
Get stat bay inklud Bootstrap in prodakshɔn-rɛdi CSS ɛn JavaSkript via CDN we nɔ nid fɔ ɛni bil stɛp. Si am in prɔsis wit dis Bootstrap CodePen demo .
-
Krio wan nyu
index.html
fayl na yu projɛkt rut. Inklud di<meta name="viewport">
tag bak fɔ di rayt rispɔnsiv bihayvya na mobayl divays dɛn.<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> </head> <body> <h1>Hello, world!</h1> </body> </html>
-
Inklud Bootstrap in CSS ɛn JS. Put di
<link>
tag insay di<head>
fɔ wi CSS, ɛn di<script>
tag fɔ wi JavaSkript bɔndɛl (inklud Popper fɔ posishun drɔpdɔwn dɛn, pɔpa dɛn, ɛn tultip dɛn) bifo di klosing</body>
. Lan mɔ bɔt wi CDN link dɛn .<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> </body> </html>
Yu kin inklud Popper ɛn wi JS bak sɛpret wan. If yu nɔ plan fɔ yuz drɔpdɔwn, popovers, ɔ tultips, sev sɔm kilobayt dɛn bay we yu nɔ put Popper.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
-
Halo, wɔl! Opin di pej na yu brawza we yu pik fɔ si yu Bootstrapped pej. Naw yu kin bigin fɔ bil wit Bootstrap bay we yu mek yu yon layout , ad dɔzin kɔmpɔnɛnt dɛn , ɛn yuz wi ɔfishal ɛgzampul dɛn .
CDN link dɛn
As rifrɛns, na wi praymari CDN link dɛn ya.
Tɔk bɔt | URL we de na di URL |
---|---|
CSS we dɛn kɔl CSS | https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css |
JS | https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js |
Yu kin yuz di CDN bak fɔ tek ɛni wan pan wi ɔda bil dɛn we de na di say we se Kɔntinɛnt pej .
Di nɛks tin dɛn we yu fɔ du
-
Rid smɔl mɔ bɔt sɔm impɔtant glob ɔl ɛnvayrɔmɛnt sɛtin dɛn we Bootstrap de yuz.
-
Rid bɔt wetin de insay Bootstrap na wi kɔntinyu sɛkshɔn ɛn di list fɔ di kɔmpɔnɛnt dɛn we nid JavaSkript dɔŋ ya.
-
Nid smɔl mɔ pawa? Tink bɔt fɔ bil wit Bootstrap bay we yu put di sɔs fayl dɛn tru pakej manija .
-
Yu de luk fɔ yuz Bootstrap as modul wit
<script type="module">
? Duya rid wi yuz Bootstrap as modul sɛkshɔn.
JS komponent dɛn
Yu want fɔ no us kɔmpɔnɛnt dɛn klia wan nid wi JavaSkript ɛn Popa? Klik di sho kɔmpɔnɛnt dɛn link we de dɔŋ ya. If yu nɔ shɔ atɔl bɔt di jenɛral pej strɔkchɔ, kɔntinyu fɔ rid fɔ ɛgzampul pej tɛmplat.
Sho di komponent dɛn we nid JavaSkript
- Alerts fɔ dismis
- Bɔtin fɔ toggling stet ɛn chɛkbɔks/redio funkshɔnaliti
- Karusel fɔ ɔl di slayd bihayvya, kɔntrol, ɛn indikɛtɔ dɛn
- Kolaps fɔ toggling visibiliti fɔ kɔntinyu
- Drɔpdɔwn fɔ sho ɛn pozishɔn (i nid bak Popper ) .
- Modal fɔ sho, pozishɔn, ɛn skrol bihayvya
- Navbar fɔ ɛkstɛnd wi Kɔlaps ɛn Ɔfkanvas plɔgin dɛn fɔ impruv rispɔnsiv bihayvya dɛn
- Navs wit di Tab plɔgin fɔ toggling kɔntinyu pan dɛn
- Ɔfkanvas fɔ sho, pozishɔn, ɛn skrol bihayvya
- Scrollspy fɔ skrol bihayvya ɛn nevigishɔn ɔpdet dɛn
- Tost fɔ display ɛn dismis
- Tultip ɛn popovers fɔ display ɛn posishun (i nid bak Popper )
Impɔtant global dɛn
Bootstrap de yuz wan anful impɔtant glob ɔl stayl ɛn sɛtin dɛn, ɔl dɛn wan ya na ɔlmost ɛksklusivli geared to di nɔmalizeshɔn fɔ krɔs brawza stayl dɛn. Mek wi daiv in.
HTML5 dɔktayp
Bootstrap nid fɔ yuz di HTML5 dokttayp. Witout am, yu go si som funky en inkomplit stail.
<!doctype html>
<html lang="en">
...
</html>
Meta tag we de ansa
Bootstrap is developed mobile first , wan strateji we wi de ɔptimayz kɔd fɔ mobayl divays dɛn fɔs ɛn afta dat wi de skel ɔp kɔmpɔnɛnt dɛn as nid de yuz CSS midia kwɛstyɔn dɛn. Fɔ mek shɔ se yu rɛnd fayn ɛn tɔch zum fɔ ɔl di divays dɛn, ad di rispɔnsiv viupɔt mɛta tag to yu <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Yu kin si wan ɛgzampul bɔt dis insay akshɔn na di kwik stat .
Bɔks-sayz
Fɔ mek yu ebul fɔ saiz mɔ stret na CSS, wi kin chenj di glob ɔl box-sizing
valyu frɔm content-box
to border-box
. Dis de mek shɔ se padding
i nɔ afɛkt di las kɔmpyut wit fɔ wan ɛlimɛnt, bɔt i kin mek prɔblɛm wit sɔm tɔd-pati softwe dɛn lɛk Google Maps ɛn Google Custom Search Engine.
Na di rare occasion we yu nid fɔ ɔvalayz am, yuz sɔntin lɛk dis:
.selector-for-some-widget {
box-sizing: content-box;
}
Wit di snip we de ɔp, di ɛlimɛnt dɛn we dɛn dɔn nɛst—inklud di kɔntinyu we dɛn dɔn jenarayz via ::before
ɛn ::after
—ɔl go gɛt di wan dɛn we dɛn dɔn spɛsifa box-sizing
fɔ dat .selector-for-some-widget
.
Lan mɔ bɔt bɔks mɔdel ɛn sayzin na CSS Tricks .
Ribɔt bak
Fɔ mek di krɔs-brawza rɛnd bɛtɛ, wi de yuz Ribɔt fɔ kɔrɛkt di tin dɛn we nɔ kɔrɛkt akɔdin to di brawza ɛn divays dɛn we wi de gi smɔl mɔ riset dɛn we gɛt opinion to kɔmɔn HTML ɛlimɛnt dɛn.
Pipul na di eria
Stay ɔp-to-dɛt bɔt di divɛlɔpmɛnt fɔ Bootstrap ɛn rich to di kɔmyuniti wit dɛn ɛp risɔs ya.
- Rid ɛn sabskripshɔn to Di Ɔfishal Bootstrap Blɔg .
- Aks ɛn ɛksplɔrɔ wi GitHub Diskushɔn dɛn .
- Chat wit yu kɔmpin Bootstrappers na IRC. Na di
irc.libera.chat
sava, na di#bootstrap
chanɛl. - Yu kin fɛn ɛp fɔ impruv na Stak Ɔvaflɔ (we dɛn tag
bootstrap-5
). - Divɛlɔpa dɛn fɔ yuz di ki wɔd
bootstrap
pan pakej dɛn we de chenj ɔ ad to di wok we Bootstrap de du we dɛn de sheb tru npm ɔ di sem kayn delivri mɛkanism dɛn fɔ mek dɛn ebul fɔ diskɔba am pasmak.
Yu kin fala @getbootstrap bak na twita fɔ di laytst gɔsip ɛn fayn fayn myuzik vidio dɛn.