Okufuna · Bootstrap mu Luganda

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. Essira tujja kussa ku kutandika ne fayiro za 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 JavaScript, wamu ne kkopi y'omu kitundu eya docs ng'owanula enkyusa eyasembyeyo butereevu okuva ku GitHub.

Download ensibuko ya Bootstrap

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 / ├── ebifaananyi ebiyitibwa glyphicons - ebitundu ebibiri . png
       └── glyphicons - ebitundu ebibiri - ebyeru . png

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.

Nsaba omanye nti JavaScript plugins zonna zeetaaga jQuery okuteekebwamu.

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.

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 :

<!EKITUNDU KY'EKIKULU html>
<html>
  <omutwe>
    <title> Ekipande kya Bootstrap 101 </title>
    <meta name = "viewport" content = "obugazi=obugazi-ekyuma, ekipimo-ekisookerwako=1.0" >  
  </omutwe>
  <omubiri>
    <h1> Mwasuze mutya, ensi! </h1>
    <script src = "https://code.jquery.com/okubuuza ebibuuzo.js" ></script> 
  </omubiri>
</html>

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

<!EKITUNDU KY'EKIKULU html>
<html>
  <omutwe>
    <title> Ekipande kya Bootstrap 101 </title>
    <meta name = "viewport" content = "obugazi=obugazi-ekyuma, ekipimo-ekisookerwako=1.0" >  
    <!-- Omusipi gwa Boot -->
    <link href = "css/bootstrap.min.css" rel = "olupapula lw'omusono" emikutu = "olutimbe" >   
  </omutwe>
  <omubiri>
    <h1> Mwasuze mutya, ensi! </h1>
    <script src = "https://code.jquery.com/okubuuza ebibuuzo.js" ></script> 
    <script src = "js/okutandika.min.js" </script> 
  </omubiri>
</html>

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

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.

Ekifaananyi ky’okutandika

Ekiwandiiko kya HTML ekitaliiko magumba nga kiriko Bootstrap CSS ne JavaScript zonna nga zirimu.
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.
Okutunda okufunda

Slim, lightweight marketing template ku pulojekiti entonotono oba ttiimu.
Obutuufu nav

Omuko gw’okutunda nga guliko enkolagana z’okutambuliramu ez’obugazi obwenkanankana mu navbar ekyusiddwa.
Yingira mu

Barebones zissa emikono mu ffoomu nga zirina custom, ebifuga ffoomu ennene n’ensengeka ekyukakyuka.
Ekiwandiiko ekikwata wansi

Siba wansi w'obugulumivu obutakyukakyuka wansi w'ekifo ky'omukozesa eky'okulaba.
Ekiwujjo ekiyitibwa carousel jumbotron

Riff esinga okukwatagana ku mukutu gwa basic marketing nga mulimu carousel emanyiddwa ennyo.