Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
Check
in English

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.

Na dis pej

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 .


  1. Krio wan nyu index.htmlfayl 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>

  2. 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>

  3. 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 .

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

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-sizingvalyu frɔm content-boxto border-box. Dis de mek shɔ se paddingi 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-sizingfɔ 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.chatsava, na di #bootstrapchanɛ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 bootstrappan 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.