Intangiriro

Tangira hamwe na Bootstrap, urwego ruzwi cyane kwisi kubaka kubaka, imbuga za mbere zigendanwa, hamwe na jsDelivr hamwe nurupapuro rwerekana urupapuro.

Kuriyi page

Gutangira vuba

Urashaka kongera vuba Bootstrap kumushinga wawe? Koresha jsDelivr, isoko yubusa CDN. Ukoresheje pake umuyobozi cyangwa ukeneye gukuramo dosiye yinkomoko? Kujya kurupapuro rwo gukuramo .

CSS

Gukoporora-shyira urupapuro rwimiterere <link>yawe <head>mbere yizindi mpapuro zose kugirango wikore CSS yacu.

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

JS

Ibyinshi mubice byacu bisaba gukoresha JavaScript kugirango ikore. By'umwihariko, bakeneye ibyuma byacu bya JavaScript na Popper . Shira kimwe muri ibi bikurikira<script> hafi yimpera yimpapuro zawe, mbere yikimenyetso cyo gufunga ,</body> kugirango ubashoboze.

Bundle

Shyiramo buri Bootstrap ya JavaScript plugin no kwishingikiriza hamwe numwe mubice bibiri. Byombi bootstrap.bundle.jskandi bootstrap.bundle.min.jsushizemo Popper kubikoresho byacu hamwe na popovers. Kubindi bisobanuro bijyanye nibiri muri Bootstrap, nyamuneka reba igice cyibirimo .

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

Tandukanya

Niba uhisemo kujyana nigisubizo cyinyandiko zitandukanye, Popper igomba kuza mbere (niba ukoresha ibikoresho cyangwa popovers), hanyuma amacomeka ya 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>

Module

Niba ukoresha <script type="module">, nyamuneka reba ibyo dukoresha Bootstrap nkigice cya module .

Ibigize

Amatsiko ni ibihe bice bisaba neza JavaScript na Popper? Kanda ibice byerekana ibice hepfo. Niba utazi na gato ibijyanye nimiterere yurupapuro rusange, komeza usome kurugero rwurupapuro.

Erekana ibice bisaba JavaScript

Imenyesha ryo kwirukana
Utubuto two guhinduranya leta na checkbox / imikorere ya radio
Carousel kumyitwarire yose ya slide, kugenzura, nibipimo
Gusenyuka kugirango uhindure ibintu bigaragara
Ibitonyanga byo kwerekana no guhagarara (bisaba na Popper )
Uburyo bwo kwerekana, guhagarara, hamwe nimyitwarire
Navbar yo kwagura Gucomeka kwacu kugirango dushyire mubikorwa imyitwarire isubiza
Toost yo kwerekana no kwirukana
Ibikoresho na popovers zo kwerekana no guhagarara (bisaba na Popper )
Umuzingo wo kwitwara neza no kugendagenda

Inyandikorugero

Wemeze ko paji zawe zishyirwaho hamwe nibishushanyo mbonera bigezweho. Ibyo bivuze gukoresha HTML5 yinyandiko kandi ushizemo meta meta tag kugirango imyitwarire iboneye. Shyira byose hamwe kandi page yawe igomba kumera gutya:

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

Ku ntambwe ikurikira, sura Layout doc cyangwa ingero zacu zemewe kugirango utangire ushireho ibiri kurubuga rwawe nibigize.

Isi y'ingenzi

Bootstrap ikoresha urutonde rwingenzi rwimiterere yisi yose hamwe nigenamiterere uzakenera kumenya mugihe uyikoresha, ibyo byose bikaba bigenewe gusa kuganisha kumiterere yuburyo bwa mushakisha. Reka twibire.

HTML5

Bootstrap isaba gukoresha inyandiko ya HTML5. Bitabaye ibyo, uzabona bimwe bisekeje bituzuye, ariko harimo ntibigomba gutera hiccups.

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

Igisubizo cya meta tag

Bootstrap yatejwe imbere mobile mbere , ingamba aho duhindura code kubikoresho bigendanwa mbere hanyuma tugahindura ibice nkibikenewe dukoresheje ibibazo bya media bya CSS. Kugirango wemeze neza kandi ukore zooming kubikoresho byose, ongeramo reba reba reba meta tag yawe <head>.

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

Urashobora kubona urugero rwibi mubikorwa mugutangira inyandikorugero .

Ingano

Kubunini buringaniye muri CSS, duhindura box-sizingagaciro kwisi kuva content-boxkuri border-box. Ibi byemeza paddingko bitagira ingaruka ku bugari bwa nyuma bwabazwe, ariko birashobora gutera ibibazo hamwe na software zimwe-zindi nka Google Ikarita ya Google na Moteri ishakisha Google.

Mubihe bidasanzwe ugomba kubirengaho, koresha ikintu nkiki gikurikira:

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

Hamwe n'igice cyavuzwe haruguru, ibintu byashyizwe mu majwi - harimo ibyakozwe binyuze muri - ::beforekandi ::afterbyose bizaragwa ibyateganijwe box-sizingkuri ibyo .selector-for-some-widget.

Wige byinshi kubyerekeye agasanduku k'icyitegererezo n'ubunini kuri CSS Amayeri .

Ongera usubiremo

Kugirango tunonosore neza-cross-mushakisha, dukoresha Reboot kugirango dukosore ibitagenda neza kuri mushakisha n'ibikoresho mugihe dutanga ibisubizo bike byibitekerezo kubintu bisanzwe bya HTML.

Umuryango

Komeza kugezwaho amakuru yiterambere rya Bootstrap hanyuma ugere kubaturage hamwe nibikoresho bifasha.

Soma kandi wiyandikishe kuri Blog ya Bootstrap .
Ganira na Bootstrappers bagenzi bawe muri IRC. Kuri irc.libera.chatseriveri, mu #bootstrapmuyoboro.
Imfashanyo yo gushyira mubikorwa irashobora kuboneka kuri Stack Overflow (tagged bootstrap-5).
Abashinzwe iterambere bagomba gukoresha ijambo ryibanze bootstrapkumapaki ahindura cyangwa akongera kumikorere ya Bootstrap mugihe akwirakwiza binyuze muri npm cyangwa uburyo busa bwo gutanga kubintu byinshi byavumbuwe.

Urashobora kandi gukurikira @getbootstrap kurubuga rwa Twitter kubwamazimwe agezweho hamwe namashusho yindirimbo nziza.