Kubona · Bootstrap mu Rwanda

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 ya Bootstrap yakozwe.

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 JavaScript, hamwe na kopi yaho ya docs ukuramo verisiyo yanyuma muri GitHub.

Kuramo inkomoko ya Bootstrap

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

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.

Nyamuneka menya ko amacomeka yose ya JavaScript asaba jQuery gushyirwamo.

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 bigize interineti kubintu 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.

Hamwe nintangiriro ngufi mubirimo hanze yinzira, turashobora kwibanda mugushira 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 :

<! DOCTYPE html>
<html>
  <umutwe>
    <title> Bootstrap 101 Inyandikorugero </title>
    <meta izina = "kureba" ibirimo = "ubugari = igikoresho-ubugari, intangiriro-igipimo = 1.0" >  
  </head>
  <body>
    <h1> Mwaramutse, isi! </h1>
    <inyandiko src = "https://code.jquery.com/jquery.js" > </script> 
  </body>
</html>

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

<! DOCTYPE html>
<html>
  <umutwe>
    <title> Bootstrap 101 Inyandikorugero </title>
    <meta izina = "kureba" ibirimo = "ubugari = igikoresho-ubugari, intangiriro-igipimo = 1.0" >  
    <! - Bootstrap ->
    <ihuza href = "css / bootstrap.min.css" rel = "urupapuro rwerekana" itangazamakuru = "ecran" >   
  </head>
  <body>
    <h1> Mwaramutse, isi! </h1>
    <inyandiko src = "https://code.jquery.com/jquery.js" > </script> 
    <inyandiko src = "js / bootstrap.min.js" > </script> 
  </body>
</html>

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

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

Inyandikorugero

A barebones HTML inyandiko hamwe na Bootstrap CSS yose hamwe na JavaScript irimo.
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.
Kwamamaza kugufi

Icyitegererezo cyoroheje, cyoroshye cyo kwamamaza imishinga mito cyangwa amakipe.
Nav

Ipaji yo kwamamaza hamwe nuburinganire bwuburinganire buringaniye muburyo bwahinduwe.
Injira

Barebone isinya muburyo hamwe nibisanzwe, uburyo bunini bwo kugenzura nuburyo bworoshye.
Umutwe

Shyira uburebure-burebure munsi yumurongo wumukoresha.
Carousel jumbotron

Birenzeho guhuza urubuga rwibanze rwerekana karuseli izwi.