Source

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, e fanoeng mahala ke batho ba jsDelivr. 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Likarolo tse ngata tsa rona li hloka hore JavaScript e sebetse. Ka ho khetheha, li hloka jQuery , Popper.js , le li-plugins tsa rona tsa JavaScript. Beha 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.js, ebe joale li-plugins tsa rona tsa JavaScript.

Re sebelisa jQuery's slim build , empa mofuta o felletseng le ona oa tšehetsoa.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

U batla ho tseba hore na ke likarolo life tse hlokang ka ho hlaka jQuery, JS ea rona, le Popper.js? 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 hlahisa le ho beha maemo (e boetse e hloka Popper.js )
  • 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
  • Lisebelisoa le li-popover bakeng sa ho hlahisa le ho beha maemo (e boetse e hloka Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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 li sebelisa, tseo kaofela li batlang li lebisitsoe ka mokhoa o ikhethileng molemong 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 netefatsa tlhahiso e nepahetseng le katametso e nepahetseng bakeng sa lisebelisoa tsohle, eketsa 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 e latelang:

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

Ka snippet e ka holimo, 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 liphapang ho li-browser le lisebelisoa ha re ntse re fana ka litlhophiso tsa maikutlo 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.

  • Latela @getbootstrap ho Twitter .
  • Bala 'me u ingolise ho The Official Bootstrap Blog .
  • Buisana le li-Bootstrappers tse ling ho IRC. Ho irc.freenode.netseva, ho ##bootstrapkanale.
  • Thuso ea ts'ebetsong e ka fumanoa ho Stack Overflow (tagged bootstrap-4).
  • Bahlahisi ba lokela ho sebelisa lentsoe la sehlooho bootstrapho lipakete tse fetolang kapa li ekelletsang tšebetsong ea Bootstrap ha e tsamaisoa 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.