Bootstrap

Kuyambapo

Kufotokozera mwachidule za polojekitiyi, zomwe zili mkati mwake, ndi momwe mungayambitsire ndi template yosavuta.

1. Koperani

Musanatsitse, onetsetsani kuti muli ndi code editor (tikupangira Sublime Text 2 ) ndi chidziwitso chogwira ntchito cha HTML ndi CSS. Sitidutsa pamafayilo oyambira pano, koma alipo kuti mutsitse. Timayang'ana kwambiri poyambira ndi mafayilo ophatikizidwa a Bootstrap.

Dawunilodi wapanga

Njira yachangu kwambiri yoyambira: pezani mitundu yophatikizidwa komanso yosinthidwa ya CSS, JS, ndi zithunzi. Palibe zolemba kapena mafayilo oyambira.

Tsitsani Bootstrap

Tsitsani gwero

Pezani mafayilo oyambilira a CSS ndi JavaScript onse, limodzi ndi zolemba zakumaloko potsitsa mtundu waposachedwa mwachindunji kuchokera ku GitHub.

Tsitsani gwero la Bootstrap

2. Mapangidwe a fayilo

Pakutsitsa mupeza mawonekedwe a fayilo ndi zomwe zili m'munsimu, ndikuyika m'magulu azinthu zofananira ndikupereka kusiyanasiyana kophatikizidwa komanso kocheperako.

Mukatsitsa, tsegulani chikwatu choponderezedwa kuti muwone mawonekedwe a (wophatikizidwa) Bootstrap. Mudzawona chonga ichi:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js │ ├──
   bootstrap . min . js ├──
   img / │ ├── glyphicons - halflings . png
   │ ├── glyphicons - halflings - white . png
  
  
        
        
        └── WERENGANI . md

Uwu ndiye mtundu wofunikira kwambiri wa Bootstrap: mafayilo opangidwa kuti agwiritse ntchito mwachangu pafupifupi pulojekiti iliyonse. Timapereka CSS ndi JS ( bootstrap.*), kuphatikizapo CSS ndi JS ( bootstrap.min.*). Mafayilo azithunzi amapanikizidwa pogwiritsa ntchito ImageOptim , pulogalamu ya Mac yopondereza ma PNG.

Chonde dziwani kuti mapulagini onse a JavaScript amafuna kuti jQuery iphatikizidwe.

3. Zomwe zikuphatikizidwa

Bootstrap imabwera yokhala ndi HTML, CSS, ndi JS pazinthu zamitundu yonse, koma imatha kufotokozedwa mwachidule ndi magulu angapo omwe akuwoneka pamwamba pa zolemba za Bootstrap .

Zigawo za Docs

Kumanga

Masitayilo apadziko lonse lapansi kuti thupi likhazikitsenso mtundu ndi maziko, masitayilo amalumikizidwe, dongosolo la gridi, ndi masanjidwe awiri osavuta.

Base CSS

Masitayilo azinthu wamba za HTML monga typography, code, matebulo, mafomu, ndi mabatani. Zimaphatikizanso ma Glyphicons , chithunzi chachikulu chaching'ono.

Zigawo

Masitayilo oyambira amitundu yofananira monga ma tabo ndi mapiritsi, navbar, zidziwitso, mitu yamasamba, ndi zina zambiri.

Javascript mapulagini

Zofanana ndi Zigawo, mapulagini awa a Javascript ndi zida zolumikizirana pazinthu monga zida, popovers, modals, ndi zina zambiri.

Mndandanda wa zigawo

Pamodzi, zigawo za Components ndi Javascript plugins zimapereka mawonekedwe awa:

  • Magulu a batani
  • Zotsitsa za batani
  • Ma tabu oyenda, mapiritsi, ndi mindandanda
  • Navbar
  • Zolemba
  • Mabaji
  • Mitu yamatsamba ndi gawo la ngwazi
  • Tizithunzi
  • Zidziwitso
  • Mipiringidzo yopita patsogolo
  • Makhalidwe
  • Zotsitsa
  • Malangizo
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

M'mabuku amtsogolo, titha kudutsa zigawo izi payekha mwatsatanetsatane. Mpaka nthawi imeneyo, yang'anani chilichonse mwazolembazo kuti mumve zambiri za momwe mungagwiritsire ntchito ndikusintha mwamakonda.

4. Basic HTML template

Ndichidule chachidule cha zomwe zili mkati, titha kuyang'ana kwambiri kuyika Bootstrap kuti tigwiritse ntchito. Kuti tichite izi, tigwiritsa ntchito template yoyambira ya HTML yomwe ili ndi zonse zomwe tatchula mu Fayilo .

Tsopano, nayi mawonekedwe a fayilo ya HTML yodziwika bwino :

  1. <!DOCTYPE html>
  2. <html>
  3.   <mutu>
  4.     <title> Bootstrap 101 Template </title>
  5.   </mutu>
  6.   <thupi>
  7.     <h1> Moni, dziko! </ h1>
  8.     <script src = "https://code.jquery.com/jquery-latest.js" ></script> 
  9.   </ thupi>
  10. </html>

Kuti mupange template ya Bootstrapped , ingophatikizani mafayilo oyenera a CSS ndi JS:

  1. <!DOCTYPE html>
  2. <html>
  3.   <mutu>
  4.     <title> Bootstrap 101 Template </title>
  5.     <!-- Bootstrap -->
  6.     <link href = "css/bootstrap.min.css" rel = "stylesheet" >  
  7.   </mutu>
  8.   <thupi>
  9.     <h1> Moni, dziko! </ h1>
  10.     <script src = "https://code.jquery.com/jquery-latest.js" ></script> 
  11.     <script src = "js/bootstrap.min.js" ></script> 
  12.   </ thupi>
  13. </html>

Ndipo mwakonzeka! Ndi mafayilo awiriwo atawonjezedwa, mutha kuyamba kupanga tsamba lililonse kapena kugwiritsa ntchito ndi Bootstrap.

5. Zitsanzo

Pitani kupyola template yoyambira ndi masanjidwe ochepa chabe. Timalimbikitsa anthu kubwereza zitsanzozi osati kungozigwiritsa ntchito ngati zotsatira zake.

  • Tsamba loyambira malonda

    Muli ndi gawo la ngwazi ya uthenga woyamba ndi zinthu zitatu zothandizira.

  • Kapangidwe kamadzimadzi

    Imagwiritsa ntchito makina athu atsopano omvera, amadzimadzi kuti apange mawonekedwe amadzimadzi opanda msoko.

  • template yoyambira

    Chikalata cha barebones HTML chokhala ndi Bootstrap CSS ndi javascript zikuphatikizidwa.

Ndiyeno nchiyani?

Pitani ku ma docs kuti mudziwe zambiri, zitsanzo, ndi zidule za code, kapena tsatirani njira ina ndikusintha Bootstrap pulojekiti iliyonse yomwe ikubwera.

Pitani ku zolemba za Bootstrap Sinthani Mwamakonda Anu Bootstrap