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, 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Dimojule

Ge o diriša <script type="module">, hle lebelela karolo ya rena ya go diriš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
Di-offcanvase bakeng sa go bontšha, go beakanya, le boitshwaro bja go phutholla
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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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">

You can see an example of this in action in the starter template.

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

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

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

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