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.

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

JS

Likarolo tse ngata tsa rona li hloka hore JavaScript e sebetse. Ka ho khetheha, li hloka jQuery , Popper , le li-plugins tsa rona tsa JavaScript. Re sebelisa jQuery's slim build , empa mofuta o felletseng le ona oa tšehetsoa.

Beha e 'ngoe ea tse latelang<script> haufi le qetellong ea maqephe a hau, pele ho </body>tag e koalang, ho li nolofalletsa. jQuery e tlameha ho tla pele, ebe Popper, ebe joale li-plugins tsa rona tsa JavaScript.

Sephutheloana

Kenyelletsa plugin e 'ngoe le e' ngoe ea Bootstrap JavaScript 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, empa eseng jQuery . Kenyelletsa jQuery pele, ebe ke Bootstrap JavaScript bundle. 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/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>

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

Likaroloana

U batla ho tseba hore na ke likarolo life tse hlokang ka ho hlaka jQuery, JavaScript ea rona le Popper? Tobetsa sehokelo sa likarolo tse ka tlase. Haeba o sa tiisehe ka sebopeho sa leqephe, tsoela pele ho bala mohlala oa template ea 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
Scrollspy bakeng sa boits'oaro ba moqolo le liapdeite tsa ho tsamaea
Lisebelisoa le li-popover bakeng sa ho hlahisa le ho beha maemo (e boetse e hloka Popper )

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 tag ea "viewport" 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, 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>

Ke phetho seo u se hlokang bakeng sa litlhoko tsa leqephe ka kakaretso. Etela Layout docs 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, shrink-to-fit=no">

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 batho ba bang 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-4).
Bahlahisi ba lokela ho sebelisa lentsoe bootstrapla bohlokoa ho lipakete tse fetolang kapa li ekelletsang tšebetsong ea Bootstrap ha e tsamaisoa ka npm kapa mekhoa e ts'oanang ea ho fana ka lits'oants'o tse ngata bakeng sa ho sibolloa haholo.

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

CSPs le li-SVG tse kentsoeng

Likarolo tse 'maloa tsa Bootstrap li kenyelletsa li-SVG tse kentsoeng ho CSS ea rona ho etsa likarolo tsa setaele ka mokhoa o tsitsitseng le ha bonolo ho libatli le lisebelisoa. Bakeng sa mekhatlo e nang le litlhophiso tse thata haholoanyane tsa CSP , re ngotse mehlala eohle ea li-SVG tsa rona tse kentsoeng (kaofela li sebelisoa ka background-image) hore o tle o hlahlobe likhetho tsa hau ka botlalo.

Konopo ea ho koala (e sebelisitsoeng ho litemoso le mekhoa)
Mabokose a ikhethileng le likonopo tsa radio
Li-switches tsa foromo
Etsa litšoantšo tsa ho netefatsa
Li-menu tsa ho khetha tse ikhethileng
Litaolo tsa carousel
Navbar toggle dikonopo

Ho ipapisitsoe le puisano ea sechaba , likhetho tse ling tsa ho rarolla sena ka har'a codebase ea hau li kenyelletsa ho tlosa li-URL ka thepa e amoheloang sebakeng sa heno, ho tlosa litšoantšo le ho sebelisa litšoantšo tse ka har'a marang-rang (ha ho khonehe likarolong tsohle), le ho fetola CSP ea hau. Khothaletso ea rona ke ho lekola maano a hau a ts'ireletso ka hloko le ho etsa qeto ka tsela e nepahetseng ea ho ea pele, ha ho hlokahala.