in English

Matseno

Thoma ka Bootstrap, tlhako ye e tumilego kudu lefaseng ya go aga mafelo ao a arabelago, a go thoma ka sellathekeng, ka jsDelivr le letlakala la go thoma la thempleite.

Letlakaleng le

Thoma ka pela

O nyaka go oketša Bootstrap ka pela go projeke ya gago? Diriša jsDelivr, CDN ya mahala ya mohlodi o bulegilego. Go diriša molaodi wa sephuthelwana goba o nyaka go taonelouta difaele tša mohlodi? Hlogo go letlakala la di-download .

CSS

Kopiša-kgomaretša letlakala la setaele <link>ka gare ga la gago <head>pele ga matlakala a mangwe ka moka a setaele go laetša CSS ya rena.

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

JS.

Bontši bja dikarolo tša rena di nyaka go dirišwa ga JavaScript gore di šome. Ka go lebanya, di nyaka di-plugin tša rena tša JavaScript le Popper . Bea ye nngwe ya di s tše di latelago<script> kgauswi le mafelelo a matlakala a gago, thwi pele ga </body>thepo ya go tswalela, go di kgontšha.

Mokgobo

Akaretša e nngwe le e nngwe Bootstrap JavaScript plugin le go ithekga ka e nngwe ya diphuthelwana tša rena tše pedi. Bobedi bootstrap.bundle.jsle go bootstrap.bundle.min.jsakaretša Popper bakeng sa didirišwa tša rena le di-popovers. Bakeng sa tshedimošo ye ntši ka ga seo se akaretšwago go Bootstrap, hle bona karolo ya rena ya dikagare .

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

Kgaogane

Ge o tšea sephetho sa go sepela le tharollo ya dingwalwa tše di aroganego, Popper e swanetše go tla pele (ge e le gore o šomiša ditšhišinyo tša didirišwa goba di-popover), gomme ka morago ga moo di-plugin tša rena tša 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>

Dimojule

Ge o šomiša <script type="module">, hle lebelela karolo ya rena ya go šomiša Bootstrap bjalo ka karolo ya modula.

Dikarolo

O rata go tseba gore ke dikarolo dife tšeo di nyakago JavaScript le Popper ya rena ka go lebanya? Tobetsa bontša dikarolo kgokagano ka tlase. Ge e le gore ga o na bonnete le gatee ka ga sebopego sa letlakala sa kakaretšo, tšwela pele o bala bakeng sa thempleite ya letlakala ya mohlala.

Bontšha dikarolo tšeo di nyakago JavaScript

Ditemošo tša go rakwa mošomong
Dikonope tša go fetoša maemo le lepokisi la go hlahloba/mošomo wa radio
Carousel bakeng sa maitshwaro ka moka a dia, ditaolo, le ditšhupetšo
Phuhlama bakeng sa go fetola go bonagala ga diteng
Di-dropdown tša go bontšha le go beakanya (gape di nyaka Popper ) .
Di-modal tša go bontšha, go beakanya, le boitshwaro bja go phutholla
Navbar bakeng sa go katološa plugin ya rena ya Collapse go phethagatša boitshwaro bja go arabela
Toasts bakeng sa ho bontša le ho lahla
Tooltips le popovers bakeng sa bontša le positioning (hape hloka Popper ) .
Scrollspy bakeng sa boitshwaro bja go phurolla le diapdeite tša go sepelasepela

Thempleite ya go thoma

Kgonthiša gore o na le matlakala a gago a hlomilwego ka maemo a moragorago a tlhamo le tlhabollo. Seo se ra gore go šomiša doctype ya HTML5 le go akaretša leswao la meta la viewport bakeng sa maitshwaro a maleba a go arabela. E kopanye ka moka gomme matlakala a gago a swanetše go lebelega ka tsela ye:

<!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 magato a latelago, etela ditokomane tša Peakanyo goba mehlala ya rena ya semmušo go thoma go beakanya diteng le dikarolo tša sebaka sa gago.

Di-global tša bohlokwa

Bootstrap hira seatla se senyenyane sa bohlokwa lefatše mekgwa ya tshebetso le di-setting tseo u tla hloka ho ba hlokomela ha u sebelisa e, tseo kaofela li hoo e ka bang ka ho khetheha geared nģ'a normalization ya sefapano sebadi mekhoa. A re itahleng ka gare.

Mohuta wa doctype ya HTML5

Bootstrap e nyaka tšhomišo ya HTML5 doctype. Ntle le yona, o tla bona ba bang ba funky sa felelang setaele, empa ho akarelletsa le eona ha ho lokela ho baka hiccups leha e le efe e khōlō.

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

Tag ya meta e arabelang

Bootstrap is developed mobile first , leano leo ho lona re optimize khoutu bakeng sa disebediswa selefouno pele 'me joale tekanyo ho fihlela dikarolo e le ho hlokahala sebelisa CSS mecha ea litaba lipotso. Go netefatša phetolelo ya maleba le go godiša go kgoma bakeng sa didirišwa ka moka, oketša leswao la meta la lefelo la go lebelela leo le arabelago go <head>.

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

O ka bona mohlala wa se ka tiro ka go thempleite ya go thoma .

Go beakanya bogolo bja lepokisi

Bakeng sa go lekanyetša bogolo bjo bo otlologilego kudu ka go CSS, re fetoša box-sizingboleng bja lefase ka bophara go tšwa content-boxgo go border-box. Se se netefatša gore paddingga se ame bophara bja mafelelo bjo bo balwago bja elemente, eupša se ka hlola mathata ka disoftware tše dingwe tša motho wa boraro go swana le Google Maps le Google Custom Search Engine.

Tiragalong yeo e sa tlwaelegago yeo o swanetšego go e phaela ka thoko, diriša selo se sengwe sa go swana le se se latelago:

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

Ka seripa se se lego ka mo godimo, dielemente tše di tsentšwego ka gare ga sehlaga—go akaretša le dikagare tše di tšweleditšwego ka ::beforele ::after—ka moka di tla tšea bohwa bjo bo laeditšwego box-sizingbakeng sa seo .selector-for-some-widget.

Ithute ka botlalo ka ga mohlala wa lepokisi le go lekanyetša bogolo go CSS Tricks .

Reboot gape

Bakeng sa phetolelo ye e kaonafetšego ya sefapano-sephephediši, re šomiša Reboot go lokiša go se dumelelane go ralala le diphensele le didirišwa mola re fana ka di-reset tše di nago le dikgopolo go se nene go dielemente tše di tlwaelegilego tša HTML.

Setšhaba

Dula o tseba ka tlhabollo ya Bootstrap gomme o fihlelele setšhaba ka methopo ye e thušago.

Bala gomme o ingwadiše go The Official Bootstrap Blog .
Boledišana le Bootstrappers-gotee le wena ka IRC. Ka irc.libera.chatseva, ka #bootstrapkanaleng.
Thušo ya phethagatšo e ka hwetšwa go Stack Overflow (tagged bootstrap-5).
Bahlami ba swanetše go šomiša lentšu la bohlokwa bootstrapgo diphuthelwana tšeo di fetošago goba di tlaleletšago go mošomo wa Bootstrap ge di aba ka npm goba mekgwa ye e swanago ya go tliša bakeng sa go utolla mo gogolo.

O ka latela gape @getbootstrap go Twitter go hwetša lesebo la moragorago le dibidio tša mmino tše di makatšago.