Source

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, we di pipul dɛn na jsDelivr dɔn gi fɔ fri. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.js , ɛn wi yon JavaSkript plɔgin dɛn. Put di <script>s dɛn we de dɔŋ 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.js, ɛn afta dat wi JavaSkript plɔgin dɛn.

Wi de yuz jQuery in slim bild , bɔt di ful vɛshɔn de sɔpɔt bak.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Yu want fɔ no us kɔmpɔnɛnt dɛn klia wan nid jQuery, wi JS, ɛn Popper.js? 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.

Wi bootstrap.bundle.jsɛn bootstrap.bundle.min.jsinklud Popper , bɔt nɔto jQuery . Fɔ no mɔ bɔt wetin de insay Bootstrap, duya luk wi say we de insay .

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.js )
  • Modal fɔ sho, pozishɔn, ɛn skrol bihayvya
  • Navbar fɔ ɛkstɛnd wi Kɔlaps plɔgin fɔ impruv rispɔnsiv bihayvya
  • Tultip ɛn popover fɔ sho ɛn pozishɔn (i nid bak Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Fɔ fala @getbootstrap na twita .
  • Rid ɛn sabskripshɔn to Di Ɔfishal Bootstrap Blɔg .
  • Chat wit yu kɔmpin Bootstrappers na IRC. Na di irc.freenode.netsava, 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.