Omusipi gwa Bootstrap

Okutandika

Okulaba pulojekiti, ebirimu, n'engeri y'okutandika n'ekifaananyi eky'enjawulo.

1. Okuwanula

Nga tonnawanula, kakasa nti olina code editor (tukuwa amagezi Sublime Text 2 ) n’okumanya okumu okukola ku HTML ne CSS. Tetujja kutambula mu fayiro z'ensibuko wano, naye ziriwo okuwanulibwa. Tujja kussa essira ku kutandika ne fayiro zaffe eza Bootstrap ezikung'aanyiziddwa.

Download ekuŋŋaanyiziddwa

Engeri esinga okwangu ey’okutandika: funa enkyusa ezikung’aanyiziddwa era ezikendeezeddwa eza CSS, JS, n’ebifaananyi byaffe. Tewali docs oba fayiro z'ensibuko ez'olubereberye.

Wano wefunire Bootstrap

Download source

Funa fayiro ez'olubereberye eza CSS zonna ne Javasript, wamu ne kkopi y'omu kitundu eya docs ng'owanula enkyusa eyasembyeyo butereevu okuva ku GitHub.

Download ensibuko ya Bootstrap

2. Ensengeka ya fayiro

Munda mu kuwanula ojja kusanga ensengeka ya fayiro eno wammanga n’ebirimu, mu ngeri entuufu okugatta eby’obugagga ebya bulijjo n’okuwa enjawulo zombi ezikung’aanyiziddwa n’ezikendeezeddwa.

Bw’omala okuwanula, sumulula ekitabo ekinyigirizibwa okulaba ensengeka ya (ekung’aanyiziddwa) Bootstrap. Ojja kulaba ekintu nga kino:

  bootstrap / ├── css / │ ├── omupiira gw'okutandika . css
   │ ├── omusipi gw'okutandika . min . css
   ├── js / │ ├── omusipi gw'okutandika . js
   │ ├── omusipi gw'okutandika . min . js
   ├── img / │ ├── ebigambo ebiraga ebigambo ebiyitibwa glyphicons - halflings . png
   │ ├── glyphicons - ebitundu ebibiri - ebyeru . png
  
  
        
        
        └── SOMA . md

Eno y’engeri esinga obukulu eya Bootstrap: fayiro ezikung’aanyiziddwa okukozesa amangu okugwa kumpi mu pulojekiti yonna ey’omukutu. Tuwa CSS ne JS ( bootstrap.*) ezikung’aanyiziddwa, awamu ne CSS ne JS ( bootstrap.min.*) ezikung’aanyiziddwa era ezikendeezeddwa. Fayiro z’ebifaananyi binyigirizibwa nga bakozesa ImageOptim , app ya Mac ey’okunyigiriza PNGs.

3. Ebirimu

Bootstrap ejja nga eriko HTML, CSS, ne JS ku bintu ebya buli ngeri, naye bisobola okufunzibwa n’ebiti ebitonotono ebirabika waggulu ku biwandiiko bya Bootstrap .

Ebitundu bya Docs

Okukola ebikondo

Emisono gy’ensi yonna egy’omubiri okuddamu okuteekawo ekika n’emabega, emisono gy’okuyunga, enkola ya grid, n’ensengeka bbiri ennyangu.

Omusingi gwa CSS

Emisono gy’ebintu ebya bulijjo ebya HTML nga typography, code, tables, forms, ne buttons. Era mulimu Glyphicons , ekifaananyi ekitono ekinene ennyo.

Ebitundu ebikola omubiri

Emisono emikulu egy’ebitundu by’enkolagana ebya bulijjo nga tabu n’empeke, navbar, okulabula, emitwe gy’emiko, n’ebirala.

Ebikozesebwa mu Javascript

Okufaananako ne Components, bino Javascript plugins bitundu ebikwatagana ku bintu nga totips, popovers, modals, n'ebirala.

Olukalala lw’ebitundu ebikola omubiri

Wamu, ebitundu bya Components ne Javascript plugins biwa ebintu bino wammanga eby’enkolagana:

  • Ebibinja bya button
  • Ebintu ebigwa ku button
  • Navigational tabs, empeke, n’enkalala
  • Navbar
  • Ebiwandiiko ebiwandiikibwako
  • Baagi za Baagi
  • Emitwe gy’emiko n’ekitundu ky’omuzira
  • Ebifaananyi ebitonotono
  • Okulabula
  • Ebbaala z’enkulaakulana
  • Ebikozesebwa mu kukola (Modals).
  • Ebintu ebigwa wansi
  • Ebikozesebwa
  • Popovers eziyitibwa Popovers
  • Accordion
  • Ekyuma ekiyitibwa Carousel
  • Typeahead

Mu balagirizi ab’omu maaso, tuyinza okutambula mu bitundu bino kinnoomu mu bujjuvu. Okutuusa olwo, noonya buli kimu ku bino mu biwandiiko okumanya engeri y’okubikozesaamu n’okubikolako.

4. Ekifaananyi kya HTML ekikulu

Nga tulina intro ennyimpimpi mu birimu okuva mu kkubo, tusobola okussa essira ku kuteeka Bootstrap okukozesa. Okukola ekyo, tujja kukozesa ekifaananyi kya HTML ekikulu ekirimu buli kye twayogeddeko mu nsengeka ya Fayiro .

Kati, wuuno okutunuulira fayiro ya HTML eya bulijjo :

  1. <html>
  2.   <omutwe>
  3.     <title> Ekipande kya Bootstrap 101 </title>
  4.   </omutwe>
  5.   <omubiri>
  6.     <h1> Mwasuze mutya, ensi! </h1>
  7.   </omubiri>
  8. </html>

Okufuula kino Bootstrapped template , ssaamu fayiro za CSS ne JS ezisaanidde:

  1. <html>
  2.   <omutwe>
  3.     <title> Ekipande kya Bootstrap 101 </title>
  4.     <!-- Omusipi gwa Boot -->
  5.     <link href = "css/bootstrap.min.css" rel = "olupapula lw'omusono" >  
  6.   </omutwe>
  7.   <omubiri>
  8.     <h1> Mwasuze mutya, ensi! </h1>
  9.     <script src = "js/okutandika.min.js" </script> 
  10.   </omubiri>
  11. </html>

Era ggwe oteekeddwateekeddwa! Nga fayiro ezo ebbiri zigattiddwako, osobola okutandika okukola omukutu gwonna oba enkola yonna ng’okozesa Bootstrap.

5. Ebyokulabirako

Sukka ku kifaananyi eky'omusingi n'ensengeka z'ebyokulabirako ntono. Tukubiriza abantu okuddiŋŋana ku byokulabirako bino so si kumala kubikozesa ng’ekivaamu eky’enkomerero.

  • Omukutu gw’okutunda omusingi

    Nga mulimu ekitundu ky’omuzira eky’obubaka obusookerwako n’ebintu bisatu ebiwagira.

  • Ensengeka y’amazzi

    Akozesa enkola yaffe empya eddamu, ey’ekisenge ky’amazzi okukola ensengeka y’amazzi etaliimu buzibu.

  • Ekifaananyi ky’okutandika

    Ekiwandiiko kya HTML ekitaliiko magumba nga kiriko Bootstrap CSS zonna ne javascript nga zirimu.

Kiki ekiddako?

Yolekera docs okufuna amawulire, ebyokulabirako, n'ebitundu bya koodi, oba kwata ekiddako era olongoose Bootstrap ku pulojekiti yonna ejja.

Kyalira ebiwandiiko bya Bootstrap Okulongoosa Bootstrap