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

Qala ka Bootstrap

Bootstrap ke sesebelisoa se matla, se nang le likarolo tse ka pele. Haha eng kapa eng - ho tloha ho prototype ho isa tlhahiso-ka metsotso e seng mekae.

Leqepheng lena

Ho qala ka potlako

Qala ka ho kenyelletsa CSS e lokiselitsoeng tlhahiso ea Bootstrap le JavaScript ka CDN ntle le tlhoko ea mehato ea ho aha. E bone ka ts'ebetso ka demo ena ea Bootstrap CodePen .


  1. Theha index.htmlfaele e ncha molemong oa projeke ea hau. Kenyelletsa le <meta name="viewport">tag bakeng sa boitšoaro bo nepahetseng ho lisebelisoa tsa mohala.

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

  2. Kenyelletsa CSS ea Bootstrap le JS. Beha <link>tag ho <head>CSS ea rona, le <script>tag bakeng sa sephutheloana sa rona sa JavaScript (ho kenyeletsoa le Popper bakeng sa ho beha li-dropdown, li-popper le lithulusi) pele ho koaloa </body>. Ithute haholoanyane ka lihokelo tsa rona tsa CDN .

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

    U ka kenyelletsa Popper le JS ea rona ka thoko. Haeba u sa rera ho sebelisa li-dropdown, popover, kapa tooltips, boloka li-kilobyte tse ling ka ho se kenyelle 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>

  3. Lefatše Lumela! Bula leqephe ho sebatli sa hau seo u se khethang ho bona leqephe la Bootstrapped. Joale o ka qala ho aha ka Bootstrap ka ho iketsetsa sebopeho , ho eketsa likarolo tse ngata le ho sebelisa mehlala ea rona ea semmuso .

Joalo ka litšupiso, mona ke lihokelo tsa rona tsa mantlha tsa CDN.

Tlhaloso 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

U ka sebelisa CDN ho lata meaho efe kapa efe ea rona e thathamisitsoeng leqepheng la Litaba .

Mehato e latelang

Likarolo tsa JS

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 li-plugins tsa rona tsa Collapse le Offcanvas ho kenya tšebetsong mekhoa e arabelang
  • Navs ka plugin ea Tab bakeng sa ho fetola liphasejene tsa litaba
  • Li-offcanvases tsa ho bonts'a, ho beha maemo, le boits'oaro ba ho tsamaisa
  • Scrollspy bakeng sa boits'oaro ba moqolo le liapdeite tsa ho tsamaea
  • 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 )

Lifate tsa bohlokoa

Bootstrap e sebelisa mekhoa le litlhophiso tse 'maloa tsa bohlokoa tsa lefats'e, 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 monate le se sa fellang.

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

U ka bona mohlala oa sena ts'ebetsong qalong e potlakileng .

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 morao-rao mabapi le nts'etsopele ea Bootstrap 'me u ikopanye le sechaba ka lisebelisoa tsena tse thusang.

  • Bala 'me u ingolise ho The Official Bootstrap Blog .
  • Botsa 'me u hlahlobe Lipuisano tsa rona tsa GitHub .
  • 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.