Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
in English

Selelekela

Qala ka Bootstrap, moralo o tsebahalang ka ho fetesisa oa ho aha libaka tsa marang-rang tse arabelang, tse tsamaeang pele, ka jsDelivr le leqephe la ho qala litempele.

Leqepheng lena

Ho qala ka potlako

U batla ho kenya Bootstrap kapele morerong oa hau? Sebelisa jsDelivr, CDN ea mahala e bulehileng. U sebelisa mookameli oa sephutheloana kapa u hloka ho khoasolla lifaele tsa mohloli? Eya leqepheng la downloads .

CSS

Kopitsa - beha leqephe la setaele <link>ho hau <head>pele ho maqephe a mang kaofela ho kenya CSS ea rona.

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

JS

Likarolo tse ngata tsa rona li hloka hore JavaScript e sebetse. Ka ho khetheha, li hloka li-plugins tsa rona tsa JavaScript le Popper . Beha e 'ngoe ea tse latelang<script> haufi le qetellong ea maqephe a hau, pele ho </body>tag e koalang, ho li nolofalletsa.

Sephutheloana

Kenyelletsa plugin e 'ngoe le e' ngoe ea Bootstrap JavaScript le ho itšetleha ka e 'ngoe ea liphutheloana tsa rona tse peli. Ka bobeli bootstrap.bundle.jsle ho bootstrap.bundle.min.jskenyelletsa Popper bakeng sa lisebelisoa tsa rona tsa lisebelisoa le popover. Bakeng sa tlhaiso-leseling e batsi mabapi le se kenyellelitsoeng ho Bootstrap, ka kopo bona karolo ea rona ea litaba .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Arohane

Haeba u nka qeto ea ho tsamaea le tharollo ea mangolo a arohaneng, Popper e tlameha ho tla pele (haeba u sebelisa lithulusi kapa li-popover), ebe joale li-plugins tsa rona tsa JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Limojule

Haeba u sebelisa <script type="module">, ka kopo sheba ho sebelisa ha rona Bootstrap joalo ka karolo ea mojule.

Likaroloana

U batla ho tseba hore na ke likarolo life tse hlokang ka ho hlaka JavaScript le Popper ea rona? Tobetsa sehokelo sa likarolo tse ka tlase. Haeba ho hang ha o na bonnete ka sebopeho sa leqephe le akaretsang, tsoela pele ho bala mohlala oa mohlala oa leqephe.

Hlahisa likarolo tse hlokang JavaScript
  • Litlhokomeliso tsa ho tlosa
  • Likonopo tsa ho toggling state le checkbox/ radio performance
  • Carousel bakeng sa boits'oaro bohle ba li-slide, litsamaiso le matšoao
  • Koaha bakeng sa ho fetola ponahalo ea litaba
  • Meroho bakeng sa ho bonts'a le ho beha maemo (e boetse e hloka Popper )
  • Mekhoa ea ho bonts'a, ho beha maemo, le boitšoaro ba ho tsamaisa
  • Navbar bakeng sa ho holisa plugin ea rona ea Collapse ho kenya tšebetsong boitšoaro bo arabelang
  • Li-toast bakeng sa ho bonts'a le ho tlosa
  • Lisebelisoa le li-popovers bakeng sa ho hlahisa le ho beha maemo (e boetse e hloka Popper )
  • Scrollspy bakeng sa boits'oaro ba moqolo le liapdeite tsa ho tsamaea

template ea ho qala

Etsa bonnete ba hore maqephe a hau a hlophisoa ka moralo oa morao-rao le maemo a ntlafatso. Seo se bolela ho sebelisa HTML5 doctype le ho kenyelletsa le meta tag ea pono bakeng sa boitšoaro bo nepahetseng ba karabelo. E kopanye kaofela 'me maqephe a hau a lokela ho shebahala tjena:

<!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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Bakeng sa mehato e latelang, etela litokomane tsa Layout kapa mehlala ea rona ea semmuso ho qala ho beha litaba le likarolo tsa sebaka sa hau sa marang-rang.

Lifate tsa bohlokoa

Bootstrap e sebelisa mekhoa le litlhophiso tse 'maloa tsa bohlokoa tsa lefats'e tseo u tla hloka ho li ela hloko ha u e sebelisa, tseo kaofela li batlang li lebisitsoe ka mokhoa o ikhethileng oa ho tloaeleha ha mekhoa ea sebatli. Ha re qoeleng ka hare.

HTML5 mofuta oa litokomane

Bootstrap e hloka tšebeliso ea mofuta oa HTML5. Ntle le eona, u tla bona setaele se sa phethahalang se monate, empa ho se kenyelletsa ha hoa lokela ho baka mathata a mangata.

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

Meta tag e arabelang

Bootstrap e ntlafatsoa mobile pele , leano leo ka lona re ntlafatsang khoutu ea lisebelisoa tsa mohala pele ebe re phahamisa likarolo ha ho hlokahala re sebelisa lipotso tsa media tsa CSS. Ho etsa bonnete ba hore o fana ka tokomane e nepahetseng bakeng sa lisebelisoa tsohle, kenya meta tag e arabelang ho <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

U ka bona mohlala oa sena ts'ebetsong ho template ea ho qala .

Boholo ba mabokose

Bakeng sa boholo bo otlolohileng ho CSS, re fetola box-sizingboleng ba lefats'e ho tloha content-boxho border-box. Sena se tiisa hore paddingha se ame bophara ba ho qetela ba computed ea element, empa se ka baka mathata ka software ea motho oa boraro joalo ka Google Maps le Google Custom Search Engine.

Maemong a sa tloaelehang, ha ho hlokahale hore u e tlose, sebelisa ntho e kang ena:

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

Ka snippet e kaholimo, likarolo tse behiloeng - ho kenyeletsoa le litaba tse hlahisoang ka ::before'me ::after-tsohle li tla rua tse boletsoeng box-sizingbakeng sa seo .selector-for-some-widget.

Ithute haholoanyane ka mohlala oa lebokose le boholo ho CSS Tricks .

Qala bocha

Bakeng sa ntlafatso e ntlafalitsoeng ea sebatli, re sebelisa Reboot ho lokisa ho se lumellane ho libatli le lisebelisoa ha re ntse re fana ka litlhophiso tse nang le maikutlo a manyane ho likarolo tse tloaelehileng tsa HTML.

Sechaba

Lula u le haufi le nts'etsopele ea Bootstrap 'me u ikopanye le sechaba ka lisebelisoa tsena tse thusang.

  • Bala 'me u ingolise ho The Official Bootstrap Blog .
  • Buisana le li-Bootstrappers tse ling ho IRC. Ho irc.libera.chatseva, ho #bootstrapkanale.
  • Thuso ea ts'ebetsong e ka fumanoa ho Stack Overflow (tagged bootstrap-5).
  • Bahlahisi ba lokela ho sebelisa lentsoe la sehlooho bootstrapho liphutheloana tse fetolang kapa tse eketsang ts'ebetso ea Bootstrap ha ba tsamaisa ka npm kapa mekhoa e ts'oanang ea thomello bakeng sa ho sibolloa haholo.

U ka latela @getbootstrap ho Twitter bakeng sa litšebo tsa morao-rao le livideo tse monate tsa mmino.