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

Sho

Start wit Bootstrap, di wɔl in mɔs pɔpul fremwɔk fɔ bil rispɔnsiv, mobayl-fɔs sayt dɛn, wit jsDelivr ɛn wan tɛmplat stata pej.

Na dis pej

Kwik wan fɔ stat

Yu de luk fɔ ad Bootstrap kwik kwik wan to yu prɔjek? Yuz jsDelivr, wan fri opin sɔs CDN. Yuz wan pakej manija ɔ nid fɔ dawnlod di sɔs fayl dɛn? Go na di pej we de sho aw fɔ dawnlod dɛn .

CSS we dɛn kɔl CSS

Kɔpi-pas di staylshit <link>insay yu <head>bifo ɔl di ɔda staylshit dɛn fɔ lod wi CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Bɔku pan wi kɔmpɔnɛnt dɛn nid fɔ yuz JavaSkript fɔ mek dɛn wok. Speshali, dɛn nid wi yon JavaSkript plɔgin dɛn ɛn Popper . Put wan pan dɛn <script>s ya nia di ɛnd pan yu pej dɛn, rayt bifo di klosing </body>tag, fɔ mek dɛn ebul fɔ wok.

Pakɛj

Inklud ɛvri Bootstrap JavaScript plɔgin ɛn dipɛnshɔn wit wan pan wi tu bɔndɛl dɛn. Tu bootstrap.bundle.jsɛn bootstrap.bundle.min.jsinklud Popper fɔ wi tultips ɛn popovers. Fɔ no mɔ bɔt wetin de insay Bootstrap, duya luk wi say we de insay .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Pat

If yu disayd fɔ go wit di sɛpret skript sɔlvishɔn, Popper fɔ kam fɔs (if yu de yuz tultip ɔ popovers), ɛn afta dat wi JavaSkript plɔgin dɛn.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modul dɛn

If yu yuz <script type="module">, duya rid wi yuz Bootstrap as modul sɛkshɔn.

Di tin dɛn we de insay di bɔdi

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 plɔgin fɔ impruv rispɔnsiv bihayvya
  • Ɔfkanvas fɔ sho, pozishɔn, ɛn skrol bihayvya
  • Tost fɔ display ɛn dismis
  • Tultip ɛn popovers fɔ display ɛn posishun (i nid bak Popper )
  • Scrollspy fɔ skrol bihayvya ɛn nevigishɔn ɔpdet dɛn

Di tɛmplat fɔ stat

Mek shɔ se yu mek yu pej dɛn wit di layt dizayn ɛn divɛlɔpmɛnt standad dɛn. Dat min se yu de yuz HTML5 dokttayp ɛn inklud wan viupɔt mɛta tag fɔ di rayt rispɔnsiv bihayvya. Put am ɔl togɛda ɛn yu pej dɛn fɔ tan lɛk dis:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Fɔ di nɛks tin dɛn we yu fɔ du, go na di Layout docs ɔ wi ɔfishal ɛgzampul dɛn fɔ bigin fɔ layt di tin dɛn we de insay yu sayt ɛn di tin dɛn we de insay de.

Impɔtant global dɛn

Bootstrap de yuz wan anful impɔtant glob ɔl stayl ɛn sɛtin dɛn we yu go nid fɔ no bɔt we yu de yuz am, ɔ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 inkomplit stayl, bot inklud am no shud mek eni konsidabul hiccups.

<!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 fɔ dis insay akshɔn na di stata tɛmplat .

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.

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 nest ɛlimɛnt dɛn—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 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 det 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 .
  • 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.