I-Bootstrap

Ukuqalisa

Uhlolojikelele lwephrojekthi, ekuqukethe, nokuthi ungaqala kanjani ngesifanekiso esilula.

1. Landa

Ngaphambi kokulanda, qiniseka ukuthi unomhleli wekhodi (sincoma Umbhalo Ophansi 2 ) kanye nolwazi oluthile olusebenzayo lwe-HTML ne-CSS. Ngeke sihambe kumafayela omthombo lapha, kodwa ayatholakala ukuze alandwe. Sizogxila ekuqaliseni ngamafayela e-Bootstrap ahlanganisiwe.

Ukulanda kuhlanganisiwe

Indlela eshesha kakhulu yokuqalisa: thola izinguqulo ezihlanganisiwe nezincishisiwe ze-CSS yethu, i-JS, nezithombe. Awekho amadokhumenti noma amafayela omthombo wangempela.

Landa i-Bootstrap

Landa umthombo

Thola amafayela oqobo ayo yonke i-CSS ne-JavaScript, kanye nekhophi yasendaweni yamadokhumenti ngokulanda inguqulo yakamuva ngokuqondile ku-GitHub.

Landa umthombo we-Bootstrap

2. Isakhiwo sefayela

Ngaphakathi kokulanda uzothola ukwakheka kwefayela okulandelayo nokuqukethwe, ukuqoqa ngokunengqondo izimpahla ezivamile futhi kunikeze kokubili okuhlanganisiwe nokuguquliwe.

Uma isilandiwe, vula unzip ifolda ecindezelwe ukuze ubone ukwakheka kwe-(i-Bootstrap ehlanganisiwe). Uzobona into efana nale:

  i -bootstrap / ├── css / │ ├── i- bootstrap . css
   │ ├── i- bootstrap . imiz . css
   ├── js / │ ├── i- bootstrap . js
   │ ├── i- bootstrap . imiz . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - white . png

Lolu uhlobo oluyisisekelo kakhulu lwe-Bootstrap: amafayela ahlanganisiwe ukuze asetshenziswe ngokushesha cishe kunoma iyiphi iphrojekthi yewebhu. Sihlinzeka nge-CSS ne-JS ( bootstrap.*) ehlanganisiwe, kanye ne-CSS ne-JS ( bootstrap.min.*). Amafayela esithombe acindezelwa kusetshenziswa i - ImageOptim , uhlelo lokusebenza lwe-Mac lokucindezela ama-PNG.

Sicela uqaphele ukuthi wonke ama-plugin e-JavaScript adinga ukuthi i-jQuery ifakwe.

3. Yini efakiwe

I-Bootstrap iza ifakwe i-HTML, i-CSS, ne-JS yazo zonke izinhlobo zezinto, kodwa ingafingqwa ngezigaba ezimbalwa ezibonakala phezulu kwemibhalo ye- Bootstrap .

Izigaba zamadokhumenti

I-scaffolding

Izitayela zomhlaba wonke ukuze umzimba usethe kabusha uhlobo nengemuva, izitayela zokuxhumanisa, isistimu yegridi, nezakhiwo ezimbili ezilula.

Isisekelo se-CSS

Izitayela zezinto ezijwayelekile ze-HTML njenge-typography, ikhodi, amathebula, amafomu, nezinkinobho. Futhi kufaka phakathi ama- Glyphicons , isethi yesithonjana esihle kakhulu.

Izingxenye

Izitayela eziyisisekelo zezingxenye zokusebenzelana ezivamile ezifana namathebhu namaphilisi, i-navbar, izexwayiso, izihloko zekhasi, nokuningi.

I-JavaScript plugins

Ngokufana ne-Components, lawa ma-plugin e-JavaScript ayizingxenye ezisebenzisanayo zezinto ezifana namathiphu amathuluzi, ama-popover, ama-modal, nokuningi.

Uhlu lwezingxenye

Ndawonye, ​​izingxenye ze- Components kanye ne - JavaScript plugin zinikeza izici ezilandelayo zokusebenzelana:

  • Amaqembu ezinkinobho
  • Ukwehliswa kwezinkinobho
  • Amathebhu okuzulazula, amaphilisi, nezinhlu
  • Ibha ye-Navbar
  • Amalebula
  • Amabheji
  • Izihloko zekhasi neyunithi yeqhawe
  • Izithonjana
  • Izexwayiso
  • Imigoqo yenqubekelaphambili
  • Amamodeli
  • Okwehliswayo
  • Amathuluzi
  • Ama-Popovers
  • I-Accordion
  • I-Carousel
  • I-Typehead

Kumihlahlandlela yesikhathi esizayo, singase sihambe kulezi zingxenye ngazinye ngokuningiliziwe. Kuze kube yileso sikhathi, bheka ngakunye kwalokhu embhalweni ukuze uthole ulwazi mayelana nokusetshenziswa nokuwenza ngendlela oyifisayo.

4. Isifanekiso se-HTML esiyisisekelo

Ngesethulo esifushane sokuqukethwe esiphumile endleleni, singagxila ekubekeni i-Bootstrap ezosetshenziswa. Ukuze senze lokho, sizosebenzisa isifanekiso se-HTML esiyisisekelo esihlanganisa yonke into esiyishilo esakhiweni sefayela .

Manje, nakhu ukubheka ifayela elijwayelekile le-HTML :

  1. <!DOCTYPE html>
  2. <html>
  3.   <ikhanda>
  4.     <isihloko> Isifanekiso se-Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.   </ikhanda>
  7.   <umzimba>
  8.     <h1> Sawubona, mhlaba! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </umzimba>
  11. </html>

Ukwenza lokhu kube isifanekiso esine-Bootstrapped , vele ufake amafayela afanelekile e-CSS kanye ne-JS:

  1. <!DOCTYPE html>
  2. <html>
  3.   <ikhanda>
  4.     <isihloko> Isifanekiso se-Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.     <!-- I-Bootstrap -->
  7.     <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen" >   
  8.   </ikhanda>
  9.   <umzimba>
  10.     <h1> Sawubona, mhlaba! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </umzimba>
  14. </html>

Futhi usulungile! Ngalawo mafayela amabili engeziwe, ungaqala ukuthuthukisa noma iyiphi isayithi noma uhlelo lokusebenza nge-Bootstrap.

5. Izibonelo

Hambisa ngale kwesifanekiso esiyisisekelo ngezakhiwo ezimbalwa eziyizibonelo. Sikhuthaza abantu ukuthi baphindaphinde kulezi zibonelo futhi bangamane bazisebenzise njengomphumela.

  • Isifanekiso sokuqala

    Idokhumenti ye-HTML ye-barebones nayo yonke i-Bootstrap CSS ne-JavaScript efakiwe.

  • Isizinda sokumaketha esiyisisekelo

    Kufakwe neyunithi yeqhawe yomlayezo oyinhloko nezinto ezintathu ezisekelayo.

  • Isakhiwo samanzi

    Isebenzisa isistimu yethu entsha esabelayo, yegridi ewuketshezi ukuze idale isakhiwo soketshezi esingenamthungo.

  • Ukumaketha okuncane

    Isifanekiso esincane, esingasindi sokumaketha samaphrojekthi amancane noma amaqembu.

  • I nav

    Ikhasi lokumaketha elinezixhumanisi zokuzulazula ezinobubanzi obulinganayo ku-navbar eguquliwe.

  • Ngena ngemvume

    Ama-barebones angena efomini ngokwezifiso, izilawuli zefomu ezinkulu kanye nesakhiwo esivumelana nezimo.

  • Unyaweni onamathelayo

    Phina unyaweni wobude obugxilile phansi kwendawo yokubuka yomsebenzisi.

  • I-Carousel jumbotron

    I-riff esebenzisanayo kusayithi eliyisisekelo lokumaketha eliqukethe i-carousel evelele.

Yini elandelayo?

Yiya kumadokhumenti ukuze uthole ulwazi, izibonelo, namazwibela ekhodi, noma uthathe isinyathelo esilandelayo futhi wenze ngendlela oyifisayo i-Bootstrap yanoma iyiphi iphrojekthi ezayo.

Vakashela amadokhumenti e-Bootstrap Enza ngendlela oyifisayo i-Bootstrap