Tangira na Bootstrap

Bootstrap nimbaraga zikomeye, ziranga-ibikoresho byimbere. Wubake ikintu cyose - kuva prototype kugeza kumusaruro - muminota.

Kuriyi page

Gutangira vuba

Tangira ushiramo Bootstrap umusaruro-witeguye CSS na JavaScript ukoresheje CDN udakeneye intambwe zubaka. Reba mubikorwa hamwe niyi Bootstrap CodePen demo .

Kora index.htmldosiye nshya mumuzi wumushinga wawe. Shyiramo <meta name="viewport">tagi kimwe nimyitwarire ikwiye yo kwishura mubikoresho bigendanwa.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Shyiramo CSS ya Bootstrap na JS. Shira <link>ikirango muri <head>CSS yacu, hamwe na <script>tagi ya bundle ya JavaScript (harimo na Popper kumwanya wamanutse, poppers, hamwe nibikoresho) mbere yo gufunga </body>. Wige byinshi kubyerekeranye na CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Urashobora kandi gushiramo Popper na JS yacu ukwayo. Niba udateganya gukoresha ibitonyanga, popovers, cyangwa ibikoresho, uzigame kilobytes udashyizemo Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Mwaramutse, isi! Fungura urupapuro muri mushakisha yawe wahisemo kugirango ubone urupapuro rwa Bootstrapped. Noneho urashobora gutangira kubaka hamwe na Bootstrap mugushiraho imiterere yawe , ukongeramo ibice byinshi , kandi ukoresheje ingero zacu zemewe .

Ihuza rya CDN

Nkibisobanuro, dore amahuriro yacu yibanze ya CDN.

Ibisobanuro	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Urashobora kandi gukoresha CDN kugirango uzane icyaricyo cyose cyinyongera cyanditse kurutonde rwibirimo .

Intambwe ikurikira

Soma bike kubijyanye nibidukikije byingenzi byisi igenamigambi Bootstrap ikoresha.
Soma ibyashyizwe muri Bootstrap mubice turimo nurutonde rwibigize bisaba JavaScript hepfo.
Ukeneye imbaraga nkeya? Tekereza kubaka hamwe na Bootstrap ushizemo amadosiye yinkomoko ukoresheje pack manager .
Urebye gukoresha Bootstrap nka module hamwe <script type="module">? Nyamuneka reba ibyo dukoresha Bootstrap nkigice cya module .

Ibigize JS

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 Gucika na Offcanvas amacomeka kugirango ashyire mubikorwa imyitwarire isubiza
Navs hamwe na tab ya plugin yo guhinduranya ibirimo
Offcanvase yo kwerekana, guhagarara, hamwe nimyitwarire
Umuzingo wo kwitwara neza no kugendagenda
Toost yo kwerekana no kwirukana
Ibikoresho na popovers zo kwerekana no guhagarara (bisaba na Popper )

Isi y'ingenzi

Bootstrap ikoresha urutonde rwibintu byingenzi byisi nuburyo bugenwa, byose bikaba bigenewe gusa uburyo bwo guhuza imiterere ya mushakisha . Reka twibire.

HTML5

Bootstrap isaba gukoresha inyandiko ya HTML5. Bitabaye ibyo, uzabona bimwe bisekeje kandi bituzuye.

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

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

Mukomeze kugezwaho amakuru yiterambere rya Bootstrap kandi wegere abaturage hamwe nibikoresho bifasha.

Soma kandi wiyandikishe kuri Blog ya Bootstrap .
Baza kandi ushishoze Ibiganiro byacu bya GitHub .
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 bootstrapkumupaki 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.