Bootstrap

Gutangira

Incamake yumushinga, ibirimo, nuburyo bwo gutangira nicyitegererezo cyoroshye.

1. Kuramo

Mbere yo gukuramo, menya neza ko ufite umwanditsi mukuru wa kode (turasaba Sublime Text 2 ) hamwe nubumenyi bukora bwa HTML na CSS. Ntabwo tuzanyura mumadosiye yinkomoko hano, ariko araboneka gukuramo. Tuzibanda ku gutangira hamwe na dosiye yacu ya Bootstrap.

Gukuramo

Inzira yihuse yo gutangira: shakisha verisiyo yakozwe kandi yagabanijwe ya CSS, JS, n'amashusho. Nta doc cyangwa dosiye yumwimerere.

Kuramo Bootstrap

Gukuramo isoko

Shakisha dosiye yumwimerere kuri CSS zose na Javasript, hamwe na kopi yaho ya docs ukuramo verisiyo iheruka kuva muri GitHub.

Kuramo inkomoko ya Bootstrap

2. Imiterere ya dosiye

Mugukuramo uzasangamo imiterere ya dosiye ikurikira nibirimo, muburyo bworoshye guhuza umutungo rusange no gutanga byombi byakusanyirijwe hamwe.

Bimaze gukuramo, fungura ububiko bwafunzwe kugirango urebe imiterere ya (icyegeranyo) Bootstrap. Uzabona ikintu nkiki:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glyphicons - kimwe cya kabiri . png
   │ ├── glyphicons - kimwe cya kabiri - cyera . png
  
  
        
        
        GUSOMA . _ md

Ubu ni bwo buryo bwibanze bwa Bootstrap: ikusanyije dosiye zo kwihuta gukoreshwa mumushinga wose wurubuga. Dutanga CSS hamwe na JS ( bootstrap.*), hamwe na CSS hamwe na JS ( bootstrap.min.*). Amadosiye yishusho arahagarikwa akoresheje ImageOptim , porogaramu ya Mac yo guhagarika PNGs.

3. Harimo iki

Bootstrap ije ifite HTML, CSS, na JS kubintu byose, ariko birashobora gukusanyirizwa hamwe hamwe nibyiciro bike bigaragara hejuru yinyandiko za Bootstrap .

Ibice bya dosiye

Gukubita

Imiterere yisi yose kugirango umubiri usubiremo ubwoko ninyuma, guhuza imiterere, sisitemu ya gride, nuburyo bubiri bworoshye.

Shingiro CSS

Imisusire kubintu bisanzwe bya HTML nka typografie, code, imbonerahamwe, imiterere, na buto. Harimo na Glyphicons , igishusho kinini gito cyashizweho.

Ibigize

Imiterere yibanze kubintu bisanzwe bigize ibice nka tabs n'ibinini, navbar, imenyesha, imitwe yimpapuro, nibindi byinshi.

Amacomeka ya Javascript

Bisa nibigize, amacomeka ya Javascript nibintu bigizwe nibintu nkibikoresho, popovers, modal, nibindi byinshi.

Urutonde rwibigize

Hamwe na hamwe, ibice hamwe na Javascript plugins ibice bitanga ibice bikurikira:

  • Amatsinda ya buto
  • Ibitonyanga
  • Kugenda tabs, ibinini, na lisiti
  • Navbar
  • Ibirango
  • Ikarita
  • Urupapuro imitwe hamwe nintwari
  • Thumbnail
  • Imenyesha
  • Utubari twiterambere
  • Uburyo
  • Ibitonyanga
  • Ibikoresho
  • Amashanyarazi
  • Amasezerano
  • Carousel
  • Imyandikire

Mu buyobozi buzaza, dushobora kunyura muri ibyo bice kugiti cyacu muburyo burambuye. Kugeza icyo gihe, shakisha buri kimwe muri ibyo byangombwa kugirango ubone amakuru yukuntu wabikoresha.

4. Inyandiko shingiro ya HTML

Hamwe nintangiriro ngufi mubirimo hanze yinzira, turashobora kwibanda gushira Bootstrap kugirango dukoreshe. Kugirango ukore ibyo, tuzakoresha icyitegererezo cyibanze cya HTML gikubiyemo ibintu byose twavuze muburyo bwa File .

Noneho, dore reba dosiye isanzwe ya HTML :

  1. <html>
  2.   <umutwe>
  3.     <title> Bootstrap 101 Inyandikorugero </title>
  4.   </head>
  5.   <body>
  6.     <h1> Mwaramutse, isi! </h1>
  7.   </body>
  8. </html>

Kugirango ukore inyandikorugero ya Bootstrapped , shyiramo gusa dosiye ya CSS na JS:

  1. <html>
  2.   <umutwe>
  3.     <title> Bootstrap 101 Inyandikorugero </title>
  4.     <! - Bootstrap ->
  5.     <ihuza href = "css / bootstrap.min.css" rel = "urupapuro rwerekana "  
  6.   </head>
  7.   <body>
  8.     <h1> Mwaramutse, isi! </h1>
  9.     <inyandiko src = "js / bootstrap.min.js" > </script> 
  10.   </body>
  11. </html>

Kandi urashizweho! Hamwe nizo dosiye ebyiri zongeweho, urashobora gutangira guteza imbere urubuga cyangwa porogaramu iyo ari yo yose hamwe na Bootstrap.

5. Ingero

Himura hejuru yicyitegererezo hamwe nurugero ruto. Turashishikariza abantu gusubiramo kurugero kandi ntitubikoreshe gusa nkibisubizo byanyuma.

  • Urubuga rwibanze rwo kwamamaza

    Kugaragaza intwari kubutumwa bwibanze nibintu bitatu byunganira.

  • Imiterere y'amazi

    Koresha uburyo bushya bwo kwitabira, bwamazi ya sisitemu kugirango ukore imiterere idafite amazi.

  • Inyandikorugero

    A barebones HTML inyandiko hamwe na Bootstrap CSS yose hamwe na javascript irimo.

Bikurikiraho?

Kujya kuri docs kumakuru, ingero, hamwe na kode ya kode, cyangwa fata ubutaha hanyuma uhindure Bootstrap kumushinga uwo ariwo wose uza.

Sura inyandiko za Bootstrap Hindura Bootstrap