Intangiriro

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

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Ibyinshi mubice byacu bisaba gukoresha JavaScript kugirango ikore. By'umwihariko, bakeneye jQuery , Popper , hamwe na plugin yacu ya JavaScript. Dukoresha sQ yubaka ya jQuery , ariko verisiyo yuzuye nayo irashyigikiwe.

Shyira kimwe muri ibi bikurikira<script> hafi yimpera yimpapuro zawe, mbere yikimenyetso cyo gufunga ,</body> kugirango ubashoboze. jQuery igomba kuza mbere, hanyuma Popper, hanyuma amacomeka ya JavaScript.

Bundle

Shyiramo buri Bootstrap JavaScript plugin hamwe numwe mubice bibiri. Byombi bootstrap.bundle.jskandi bootstrap.bundle.min.jsushizemo Popper kubikoresho byacu na popovers, ariko ntabwo ari jQuery . Shyiramo jQuery ubanza, hanyuma Bootstrap JavaScript bundle. Kubindi bisobanuro bijyanye nibiri muri Bootstrap, nyamuneka reba igice cyibirimo .

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

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

Ibigize

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

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
Umuzingo wo kwitwara neza no kugendagenda
Ibikoresho na popovers zo kwerekana no guhagarara (bisaba na Popper )

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

Nibyo byose ukeneye kubisabwa muri rusange. Sura inyandiko za Layout cyangwa ingero zacu zemewe kugirango utangire ushireho ibiri kurubuga rwawe nibigize.

Isi yose 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, shrink-to-fit=no">

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 ya gatatu 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 ::after- byose 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-4).
Abashinzwe iterambere bagomba gukoresha ijambo ryibanze bootstrapkumupaki ahindura cyangwa akongera kumikorere ya Bootstrap mugihe akwirakwiza binyuze muri npm cyangwa uburyo busa bwo gutanga kubintu byinshi byavumbuwe.

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

CSPs hamwe na SVGs

Ibice byinshi bya Bootstrap birimo SVGs yashyizwemo muri CSS yacu muburyo bwimiterere kandi byoroshye kurubuga rwa interineti. Ku mashyirahamwe afite ibishushanyo mbonera bya CSP , twanditse ingero zose za SVGs zashyizwemo (zose zikoreshwa binyuze ) kugirangobackground-image ubashe gusuzuma neza amahitamo yawe.

Funga buto (ikoreshwa mubimenyesha no muburyo)
Kugenzura agasanduku na radio buto
Ifishi yo guhinduranya
Ifishi yo kwemeza
Hitamo menu
Igenzura rya Carousel
Navbar guhinduranya buto

Ukurikije ibiganiro byabaturage , inzira zimwe zo gukemura iki muri codebase yawe bwite harimo gusimbuza URL numutungo wakiriwe waho, gukuramo amashusho no gukoresha amashusho yimbere (ntibishoboka mubice byose), no guhindura CSP yawe. Icyifuzo cyacu ni ugusubiramo witonze politiki yumutekano wawe hanyuma ugahitamo inzira nziza igana imbere, nibiba ngombwa.