Thoma ka Bootstrap

Bootstrap ke sedirišwa se matla, se se tletšego ka dikarolo tša ka pele. Aga selo le ge e le sefe—go tloga go prototype go ya go tšweletšo—ka metsotso e sego kae.

Letlakaleng le

Thoma ka pela

Thoma ka go akaretša CSS ya Bootstrap yeo e loketšego tšweletšo le JavaScript ka CDN ntle le go nyaka megato efe goba efe ya go aga. E bone ka tirišo ka demo ye ya Bootstrap CodePen .

Hlama faele ye mpsha index.htmlka modung wa gago wa projeke. Akaretša <meta name="viewport">tag gammogo bakeng sa boitshwaro bjo bo swanetšego bja go arabela ka didirišweng tša sellathekeng.

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

Akaretša CSS le JS ya Bootstrap. Bea <link>leswao ka go la <head>bakeng sa CSS ya rena, le <script>leswao la sehlopha sa rena sa JavaScript (go akaretša le Popper bakeng sa go beakanya di-drolodown, di-popper, le ditlhagišo tša didirišwa) pele ga go tswalela </body>. Ithute ka botlalo ka dikgokagano tša rena tša 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>

O ka akaretša gape le Popper le JS ya rena ka thoko. Ge e ba o sa rulaganye go diriša di-dropdown, di-popover, goba ditlhagišo tša didirišwa, boloka di-kilobyte tše dingwe ka go se akaretše 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>

Thobela, lefase! Bula letlakala ka go sephephediši sa gago sa kgetho go bona letlakala la gago la Bootstrapped. Bjale o ka thoma go aga ka Bootstrap ka go hlama peakanyo ya gago , go oketša dikarolo tše dintši , le go diriša mehlala ya rena ya semmušo .

Dikgokagano tša CDN

Bjalo ka tšhupetšo, mo ke dikgokagano tša rena tša mathomo tša CDN.

Tlhalošo	URL ya yona
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`

O ka šomiša gape CDN go tšea efe goba efe ya dikago tša rena tša tlaleletšo tšeo di lokeleditšwego letlakaleng la Diteng .

Megato e latelago

Bala go se nene ka dipeakanyo tše dingwe tša bohlokwa tša tikologo ya lefase ka bophara tšeo Bootstrap e di dirišago.
Bala ka seo se akaretšwago go Bootstrap karolong ya rena ya dikagare le lenaneo la dikarolo tšeo di nyakago JavaScript ka mo tlase.
O hloka matla a oketšegilego ganyenyane? Nagana ka go aga ka Bootstrap ka go akaretša difaele tša mohlodi ka molaodi wa sephuthelwana .
O nyaka go šomiša Bootstrap bjalo ka modula ka <script type="module">? Hle lebelela go diriša ga rena Bootstrap bjalo ka karolo ya modula.

Dikarolo tša JS

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 di-plugin tša rena tša Collapse le Offcanvas go phethagatša maitshwaro a go arabela
Navs ka Tab plugin bakeng sa toggling diphensele diteng
Di-offcanvase bakeng sa go bontšha, go beakanya, le boitshwaro bja go phutholla
Scrollspy bakeng sa boitshwaro bja go phurolla le diapdeite tša go sepelasepela
Toasts bakeng sa ho bontša le ho lahla
Tooltips le popovers bakeng sa bontša le positioning (hape hloka Popper ) .

Di-global tša bohlokwa

Bootstrap e hira seatla se se mmalwa sa bohlokwa bja mekgwa ya lefase le dipeakanyo, tšeo ka moka di nyakilego di lebišitšwe ka mo go kgethegilego go ya go go tlwaetša mekgwa ya sephephediši sa sefapano. 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 le sa felelang setaele.

<!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 o šoma go thoma ka pela .

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 diteng 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 .
Botšiša le go hlahloba Dipoledišano tša rena tša GitHub .
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.