Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

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.

Ntawm nplooj ntawv no

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

JS

Ntau ntawm peb cov khoom yuav tsum tau siv JavaScript los ua haujlwm. Tshwj xeeb, lawv xav tau peb tus kheej JavaScript plugins thiab Popper . 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.

Pob

suav nrog txhua qhov Bootstrap JavaScript plugin thiab kev vam khom nrog ib qho ntawm peb ob pawg. Ob leeg bootstrap.bundle.jsthiab bootstrap.bundle.min.jssuav nrog Popper rau peb cov lus qhia thiab popovers. 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/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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/@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>

Cov qauv

Yog tias koj siv <script type="module">, thov xa mus rau peb siv Bootstrap ua ntu ntu.

Cheebtsam

Xav paub seb cov khoom twg qhia meej yuav tsum tau peb JavaScript thiab Popper? Nyem qhov qhia cov khoom txuas hauv qab no. Yog tias koj tsis paub meej txog cov qauv nplooj ntawv dav dav, nyeem ntawv 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
  • Offcanvases rau kev nthuav qhia, qhov chaw, thiab scroll tus cwj pwm
  • Toasts rau displaying thiab tso tseg
  • Tooltips thiab popovers rau displaying thiab positioning (tseem yuav tsum tau Popper )
  • Scrollspy rau scroll cwj pwm thiab navigation hloov tshiab

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

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

Rau cov kauj ruam tom ntej, mus saib hauv Layout docs lossis peb cov qauv ua haujlwm kom pib tso koj lub 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">

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 xam qhov dav ntawm ib lub caij, tab sis nws tuaj yeem ua teeb meem nrog qee qhov software thib peb 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-5).
  • 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.