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.

Thoma ka pela

O nyaka go oketša Bootstrap ka pela go projeke ya gago? Diriša jsDelivr, e lego 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS.

Bontši bja dikarolo tša rena di nyaka go dirišwa ga JavaScript gore di šome. Ka go lebanya, ba nyaka jQuery , Popper , le di-plugin tša rena tša JavaScript. We use jQuery's slim build , empa phetolelo e feletseng e boetse e tšehetsoa.

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. jQuery e swanetše go tla pele, ke moka Popper, gomme ka morago di-plugin tša rena tša JavaScript.

Mokgobo

Akaretša plugin e nngwe le e nngwe ya Bootstrap JavaScript 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, eupša e sego jQuery . Akaretša jQuery pele, ke moka o be sehlopha sa JavaScript sa Bootstrap. 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/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>

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

Dikarolo

O rata go tseba gore ke dikarolo dife tšeo di nyakago jQuery, JavaScript ya rena le Popper ka go lebanya? Tobetsa bontša dikarolo kgokagano ka tlase. Ge o sa kgonthišege ka ga sebopego sa letlakala, 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
Scrollspy bakeng sa boitshwaro bja go phurolla le diapdeite tša go sepelasepela
Tooltips le popovers bakeng sa bontša le positioning (hape hloka Popper ) .

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, 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 sohle seo o se hlokago bakeng sa dinyakwa tša letlakala ka kakaretšo. 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, shrink-to-fit=no">

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 mokgatlo 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 .
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-4).
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.

Di-CSP le di-SVG tše di tsentšwego

Dikarolo tše mmalwa tša Bootstrap di akaretša di-SVG tše di tsentšwego ka go CSS ya rena go setaele sa dikarolo ka go se fetoge le gabonolo go ralala le diphensele le didirišwa. For organizations with more strict CSP configurations , re ngwadile ditiragalo ka moka tša di-SVG tša rena tše di tsentšwego (tšeo ka moka di dirišwago ka background-image) gore o kgone go hlahloba dikgetho tša gago ka botlalo.

Koala konopo (sebediswa ka ditemoso le modals) .
Mapokisi a go hlahloba a tlwaelo le dikonope tša radio
Foromo switjha
Diaekhone tša netefatšo ya foromo
Custom kgetha dimenu
Ditaolo tša carousel
Navbar toggle dikonopo

Based on community conversation , dikgetho tše dingwe tša go rarolla se motheong wa gago wa khoutu di akaretša go tšeela di-URL sebaka ka dithoto tšeo di amogetšwego lefelong leo, go tloša diswantšho le go diriša diswantšho tša ka gare ga mothaladi (ga go kgonege dikarolong ka moka), le go fetoša CSP ya gago. Tšhišinyo ya rena ke go sekaseka ka kelohloko melawana ya gago ya tšhireletšo gomme o tšee sephetho ka tsela ye kaone ya go ya pele, ge go nyakega.