Pib nrog Bootstrap

Bootstrap yog ib qho muaj zog, muaj peev xwm ntim cov cuab yeej pem hauv ntej. Tsim txhua yam - los ntawm tus qauv mus rau kev tsim khoom - hauv feeb.

Ntawm nplooj ntawv no

Pib nrawm

Pib los ntawm kev suav nrog Bootstrap qhov kev npaj tsim khoom CSS thiab JavaScript ntawm CDN yam tsis tas yuav muaj cov kauj ruam tsim. Pom nws hauv kev xyaum nrog no Bootstrap CodePen demo .

Tsim cov index.htmlntaub ntawv tshiab hauv koj qhov project hauv paus. suav nrog cov <meta name="viewport">cim npe thiab rau kev coj tus cwj pwm zoo hauv cov khoom siv txawb.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

suav nrog Bootstrap's CSS thiab JS. Muab lub <link>cim tso rau hauv <head>peb lub CSS, thiab lub <script>cim rau peb cov khoom siv JavaScript (xws li Popper rau kev tso npe poob, poppers, thiab cov lus qhia) ua ntej kaw </body>. Xav paub ntau ntxiv txog peb cov CDN txuas .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Koj tuaj yeem suav nrog Popper thiab peb JS cais. Yog tias koj tsis npaj yuav siv dropdowns, popovers, lossis cov lus qhia, txuag qee cov kilobytes tsis suav nrog Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Nyob zoo, ntiaj teb! Qhib nplooj ntawv hauv koj qhov browser xaiv kom pom koj nplooj ntawv Bootstrapped. Tam sim no koj tuaj yeem pib tsim nrog Bootstrap los ntawm kev tsim koj tus kheej layout , ntxiv kaum ob ntawm cov khoom , thiab siv peb cov qauv ua haujlwm .

CDN links

Raws li kev siv, ntawm no yog peb thawj CDN txuas.

Kev piav qhia	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Koj tseem tuaj yeem siv CDN los nqa ib qho ntawm peb cov kev tsim kho ntxiv uas tau teev tseg hauv nplooj ntawv Cov Ntsiab Lus .

Cov kauj ruam tom ntej

Nyeem me ntsis ntxiv txog qee qhov chaw thoob ntiaj teb tseem ceeb uas Bootstrap siv.
Nyeem txog dab tsi suav nrog hauv Bootstrap hauv peb ntu cov ntsiab lus thiab cov npe ntawm cov khoom uas xav tau JavaScript hauv qab no.
Xav tau lub zog me ntsis ntxiv? Xav txog lub tsev nrog Bootstrap los ntawm kev suav nrog cov ntaub ntawv los ntawm pob tus thawj tswj .
Nrhiav siv Bootstrap ua ib qho module nrog <script type="module">? Thov xa mus rau peb siv Bootstrap ua ntu ntu.

JS 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 thiab Offcanvas plugins los siv cov cwj pwm teb
Navs nrog Tab plugin rau toggling cov ntsiab lus panes
Offcanvases rau kev nthuav qhia, qhov chaw, thiab scroll tus cwj pwm
Scrollspy rau scroll cwj pwm thiab navigation hloov tshiab
Toasts rau displaying thiab tso tseg
Tooltips thiab popovers rau displaying thiab positioning (tseem yuav tsum tau Popper )

Lub ntiaj teb tseem ceeb

Bootstrap ntiav ib tug puv tes ntawm lub ntiaj teb no tseem ceeb qauv thiab chaw, tag nrho cov uas yuav luag tsuas yog npaj rau normalization ntawm cross browser style. Cia peb dhia dej.

HTML5 doctype

Bootstrap xav kom siv HTML5 doctype. Yog tsis muaj nws, koj yuav pom ib co funky thiab tsis tiav styling.

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

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 tshiab ntawm kev txhim kho Bootstrap thiab ncav cuag cov zej zog nrog cov peev txheej no.

Nyeem thiab sau npe mus rau Lub Tsev Haujlwm Bootstrap Blog .
Nug thiab tshawb xyuas peb GitHub Kev Sib Tham .
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.