Taw qhia

Pib nrog Bootstrap, lub ntiaj teb nrov tshaj plaws lub moj khaum rau lub tsev teb, mobile-thawj qhov chaw, nrog jsDelivr thiab ib tug template pib nplooj ntawv.

Pib nrawm

Nrhiav kom nrawm ntxiv Bootstrap rau koj qhov project? Siv jsDelivr, qhov qhib pub dawb CDN. Siv tus thawj tswj pob lossis xav tau rub tawm cov ntaub ntawv los? Mus rau nplooj ntawv downloads .

CSS

Luam-muab cov stylesheet <link>rau hauv koj <head>ua ntej tag nrho lwm cov stylesheets thauj peb CSS.

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

JS

Ntau ntawm peb cov khoom yuav tsum tau siv JavaScript los ua haujlwm. Tshwj xeeb, lawv xav tau jQuery , Popper , thiab peb tus kheej JavaScript plugins. Peb siv jQuery's slim tsim , tab sis tag nrho version kuj tau txais kev txhawb nqa.

Muab ib qho ntawm cov nram qab no<script> nyob ze rau qhov kawg ntawm koj nplooj ntawv, txoj cai ua ntej kaw </body>tag, kom pab tau lawv. jQuery yuav tsum tuaj ua ntej, tom qab ntawd Popper, thiab tom qab ntawd peb JavaScript plugins.

Pob

suav nrog txhua qhov Bootstrap JavaScript plugin nrog ib qho ntawm peb ob pawg. Ob qho tib si bootstrap.bundle.jsthiab bootstrap.bundle.min.jssuav nrog Popper rau peb cov lus qhia thiab popovers, tab sis tsis yog jQuery . suav nrog jQuery ua ntej, tom qab ntawd Bootstrap JavaScript pob. Yog xav paub ntxiv txog dab tsi muaj nyob rau hauv Bootstrap, thov mus saib peb cov ntsiab lus seem.

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

cais

Yog tias koj txiav txim siab mus nrog cov ntawv sau cais, Popper yuav tsum tuaj ua ntej (yog tias koj siv cov lus qhia lossis popovers), thiab tom qab ntawd peb cov JavaScript plugins.

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

Cheebtsam

Xav paub tias cov ntsiab lus twg xav tau jQuery, peb JavaScript, thiab Popper? Nyem qhov qhia cov khoom txuas hauv qab no. Yog tias koj tsis paub meej txog nplooj ntawv qauv, nyeem ntxiv rau ib qho piv txwv nplooj ntawv template.

Qhia cov khoom uas xav tau JavaScript

Kev ceeb toom rau kev tso tseg
Nyees khawm rau toggling xeev thiab checkbox / xov tooj cua functionality
Carousel rau txhua tus cwj pwm swb, tswj, thiab ntsuas
Kaw rau toggling pom cov ntsiab lus
Dropdowns rau displaying thiab positioning (tseem yuav tsum tau Popper )
Modals rau displaying, positioning, thiab scroll cwj pwm
Navbar rau txuas ntxiv peb Collapse plugin los siv tus cwj pwm teb
Scrollspy rau scroll cwj pwm thiab navigation hloov tshiab
Tooltips thiab popovers rau displaying thiab positioning (tseem yuav tsum tau Popper )

Pib template

Nco ntsoov kom koj cov nplooj ntawv teeb tsa nrog cov qauv tsim tshiab thiab kev tsim kho tshiab. Qhov ntawd txhais tau hais tias siv HTML5 doctype thiab suav nrog qhov pom qhov pom meta tag rau kev coj tus cwj pwm zoo. Muab tag nrho ua ke thiab koj cov nplooj ntawv yuav tsum zoo li no:

<!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>

Qhov ntawd yog txhua yam koj xav tau rau tag nrho cov nplooj ntawv xav tau. Mus saib cov Layout docs lossis peb cov piv txwv tseem ceeb los pib tso tawm koj lub vev xaib cov ntsiab lus thiab cov khoom siv.

Lub ntiaj teb tseem ceeb

Bootstrap ntiav ib tug puv tes ntawm lub ntiaj teb no yeej tseem ceeb thiab cov chaw uas koj yuav tsum tau paub txog thaum siv nws, tag nrho cov uas yuav luag tshwj xeeb rau cov normalization ntawm cross browser style. Cia peb dhia dej.

HTML5 doctype

Bootstrap xav kom siv HTML5 doctype. Yog tsis muaj nws, koj yuav pom qee qhov kev lom zem tsis tiav, tab sis suav nrog nws yuav tsum tsis txhob ua rau muaj kev ntxhov siab ntau.

<!doctype html>
<html lang="en">
  ...
</html>

Responsive meta tag

Bootstrap yog tsim mobile ua ntej , lub tswv yim nyob rau hauv uas peb optimize code rau mobile pab kiag li lawm ua ntej thiab ces scale up Cheebtsam raws li tsim nyog siv CSS media queries. Txhawm rau kom ua tiav qhov tsim nyog thiab kov zooming rau txhua yam khoom siv, ntxiv cov lus teb pom pom meta tag rau koj <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Koj tuaj yeem pom ib qho piv txwv ntawm qhov no hauv kev nqis tes ua hauv qhov pib template .

Box-sizing

Rau qhov yooj yim dua qhov loj me hauv CSS, peb hloov tus box-sizingnqi thoob ntiaj teb los ntawm content-boxmus rau border-box. Qhov no ua kom paddingtsis muaj kev cuam tshuam rau qhov kawg suav dav ntawm ib lub caij, tab sis nws tuaj yeem ua teeb meem nrog qee tus neeg sab nrauv software xws li Google Maps thiab Google Custom Search Engine.

Nyob rau lub sijhawm tsis tshua muaj koj yuav tsum tau hla nws, siv qee yam zoo li hauv qab no:

.selector-for-some-widget {
  box-sizing: content-box;
}

Nrog cov snippet saum toj no, nested ntsiab-nrog rau generated cov ntsiab lus ntawm ::beforethiab ::after-yuav tag nrho cov qub txeeg qub teg box-sizingrau qhov ntawd .selector-for-some-widget.

Kawm ntxiv txog lub thawv qauv thiab qhov loj me ntawm CSS Tricks .

Rov pib dua

Rau kev txhim kho tus ntoo khaub lig-browser rendering, peb siv Reboot los kho qhov tsis sib xws ntawm cov browsers thiab cov khoom siv thaum muab cov kev xav me ntsis rov pib dua rau cov ntsiab lus HTML.

Zej Zog

Nyob twj ywm rau hnub tim ntawm kev txhim kho Bootstrap thiab ncav cuag lub zej zog nrog cov peev txheej pab tau.

Nyeem thiab sau npe mus rau Lub Tsev Haujlwm Bootstrap Blog .
Tham nrog cov phooj ywg Bootstrappers hauv IRC. Nyob rau hauv lub irc.libera.chatserver, nyob rau hauv lub #bootstrapchannel.
Kev pab cuam tuaj yeem pom ntawm Stack Overflow (tagged bootstrap-4).
Cov neeg tsim khoom yuav tsum siv lo lus tseem ceeb bootstrapntawm cov pob khoom uas hloov kho lossis ntxiv rau kev ua haujlwm ntawm Bootstrap thaum faib los ntawm npm lossis cov txheej txheem xa khoom zoo sib xws rau kev tshawb pom ntau tshaj plaws.

Koj tuaj yeem ua raws @getbootstrap ntawm Twitter rau cov lus xaiv tshiab thiab cov yeeb yaj kiab txaus ntshai.

CSPs thiab embedded SVGs

Ob peb Bootstrap Cheebtsam suav nrog kos SVGs hauv peb CSS kom style cov khoom sib xws thiab yooj yim hla browsers thiab khoom siv. Rau cov koom haum nrog CSP kev teeb tsa nruj dua , peb tau sau tag nrho cov xwm txheej ntawm peb cov SVGs (tag nrho cov uas tau thov los ntawm background-image) yog li koj tuaj yeem saib xyuas koj cov kev xaiv ntau dua.

Kaw khawm (siv hauv kev ceeb toom thiab modals)
Kev cai checkboxes thiab xov tooj cua nyees khawm
Daim ntawv hloov
Tsim validation icons
Kev cai xaiv cov zaub mov
Carousel tswj
Navbar toggle nyees khawm

Raws li kev sib tham hauv zej zog , qee qhov kev xaiv los hais txog qhov no hauv koj tus kheej codebase suav nrog hloov cov URLs nrog cov cuab yeej cuab tam hauv zos, tshem tawm cov duab thiab siv cov duab inline (tsis tuaj yeem ua tau hauv txhua yam), thiab hloov kho koj CSP. Peb qhov kev pom zoo yog ua tib zoo tshuaj xyuas koj tus kheej txoj cai kev nyab xeeb thiab txiav txim siab rau txoj hauv kev zoo tshaj plaws rau pem hauv ntej, yog tias tsim nyog.