Source

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, yeo e filwego mahala ke batho ba go jsDelivr. Go diriša molaodi wa sephuthelwana goba o nyaka go taonelouta difaele tša mohlodi? Hlogo ya go ya letlakaleng 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.js , le di-plugin tša rena tša JavaScript. Bea <script>s ye e latelago 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.js, gomme ka morago ga moo di-plugin tša rena tša JavaScript.

We use jQuery's slim build , empa phetolelo e feletseng e boetse e 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>

O rata go tseba gore ke dikarolo dife tšeo di nyakago ka go lebanya jQuery, JS ya rena, le Popper.js? 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.js ) .
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
Tooltips le popovers bakeng sa bontša le boemo (gape hloka Popper.js ) .
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, 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 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 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.

Latela @getbootstrap go Twitter .
Bala gomme o ingwadiše go The Official Bootstrap Blog .
Boledišana le Bootstrappers-gotee le wena ka IRC. Ka irc.freenode.netseva, 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.