Source

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, yatanzwe kubuntu nabantu kuri jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Ibyinshi mubice byacu bisaba gukoresha JavaScript kugirango ikore. By'umwihariko, bakeneye jQuery , Popper.js , hamwe na plugin zacu za JavaScript. Shira ibikurikira <script>hafi yimpera yimpapuro zawe, burimbere yo gufunga </body>tagi, kugirango ubishoboze. jQuery igomba kuza mbere, hanyuma Popper.js, hanyuma amacomeka ya JavaScript.

Dukoresha sQ yubaka ya jQuery , ariko verisiyo yuzuye nayo irashyigikiwe.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

Ibyacu bootstrap.bundle.jskandi bootstrap.bundle.min.jsdushyiramo Popper , ariko ntabwo ari jQuery . Kubindi bisobanuro bijyanye nibiri muri Bootstrap, nyamuneka reba igice cyibirimo .

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.js )
  • Uburyo bwo kwerekana, guhagarara, hamwe nimyitwarire
  • Navbar yo kwagura Gucomeka kwacu kugirango dushyire mubikorwa imyitwarire isubiza
  • Ibikoresho na popovers zo kwerekana no guhagarara (bisaba na Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 .

Agasanduku

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.

  • Kurikira @getbootstrap kuri Twitter .
  • Soma kandi wiyandikishe kuri Blog ya Bootstrap .
  • Ganira na Bootstrappers bagenzi bawe muri IRC. Kuri irc.freenode.netseriveri, 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 kurubuga rwa Twitter kubwamazimwe agezweho hamwe namashusho yindirimbo nziza.