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.

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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 jQuery , Popper , ɛn wi yon JavaSkript plɔgin dɛn. Wi de yuz jQuery in slim bild , bɔt di ful vɛshɔn de sɔpɔt bak.

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. jQuery fɔ kam fɔs, dɔn Popper, ɛn afta dat wi JavaSkript plɔgin dɛn.

Pakɛj

Inklud ɛvri Bootstrap JavaScript plɔgin 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, bɔt nɔto jQuery . Inklud jQuery fɔs, dɔn wan Bootstrap JavaSkript bɔndɛl. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

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

Yu want fɔ no us kɔmpɔnɛnt dɛn klia wan nid jQuery, wi JavaSkript, ɛn Popper? Klik di sho kɔmpɔnɛnt dɛn link we de dɔŋ ya. If yu nɔ shɔ bɔt di 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
Scrollspy fɔ skrol bihayvya ɛn nevigishɔn ɔpdet dɛn
Tultip ɛn popovers fɔ display ɛn posishun (i nid bak Popper )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Dat na ɔl wetin yu nid fɔ di ɔl pej rikwaymɛnt dɛn. Visit di Layout docs ɔ wi ɔfishal ɛgzampul dɛn fɔ bigin lay out yu sayt in kɔntinyu ɛn komponent dɛn.

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, shrink-to-fit=no">

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 fayn 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-4).
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ɔ fɛn maksimal.

Yu kin fala @getbootstrap bak na twita fɔ di laytst gɔsip ɛn fayn fayn myuzik vidio dɛn.

CSP dɛn ɛn SVG dɛn we dɛn dɔn ɛmbas

Bɔku Bootstrap kɔmpɔnɛnt dɛn gɛt ɛmbaded SVG dɛn na wi CSS fɔ stayl kɔmpɔnɛnt dɛn kɔnsistɛntli ɛn izi wan akɔdin to brawza ɛn divays dɛn. Fɔ ɔganayzeshɔn dɛn we gɛt mɔ strikt CSP kɔnfigyushɔn dɛn , wi dɔn dɔkyumɛnt ɔl di instans dɛn fɔ wi ɛmbaded SVG dɛn (ɔl dɛn wan ya na fɔ aplay via background-image) so dat yu go ebul fɔ rivyu yu opshɔn dɛn mɔ gud gud wan.

Klos bɔtin (dɛn kin yuz am fɔ alɛt ɛn modal dɛn)
Kɔstɔm chɛkbɔks dɛn ɛn redio bɔtin dɛn
Fɔm swit dɛn
Fɔm validɛshɔn aykɔn dɛn
Kɔstɔm sɛlɛkshɔn mɛnyu dɛn
Karusel kɔntrol dɛn
Navbar de chenj di bɔtin dɛn

Bays pan kɔmyuniti tɔk , sɔm opshɔn dɛn fɔ adrɛs dis na yu yon kɔdbɛs inklud fɔ riples di URL dɛn wit lokal ɔs ɛset dɛn, fɔ pul di pikchɔ dɛn ɛn yuz inlayn pikchɔ dɛn (nɔ pɔsibul insay ɔl di kɔmpɔnɛnt dɛn), ɛn fɔ chenj yu CSP. Wi advays na fɔ tek tɛm luk yu yon sikyɔriti polisi dɛn ɛn disayd fɔ du di bɛst we fɔ go bifo, if nid de.