Bootstrap

Að byrja

Yfirlit yfir verkefnið, innihald þess og hvernig á að byrja með einföldu sniðmáti.

1. Sækja

Áður en þú hleður niður, vertu viss um að vera með kóðaritara (við mælum með Sublime Text 2 ) og einhverja þekkingu á HTML og CSS. Við munum ekki ganga í gegnum frumskrárnar hér, en þær eru tiltækar til niðurhals. Við munum einbeita okkur að því að byrja með samansettu Bootstrap skrárnar okkar.

Sækja safnað saman

Fljótlegasta leiðin til að byrja: fáðu samansettar og smækkaðar útgáfur af CSS, JS og myndum okkar. Engin skjöl eða upprunalegar frumskrár.

Sækja Bootstrap

Sækja heimild

Fáðu upprunalegu skrárnar fyrir alla CSS og Javasript, ásamt staðbundnu afriti af skjölunum með því að hlaða niður nýjustu útgáfunni beint frá GitHub.

Sækja Bootstrap uppspretta

2. Uppbygging skráa

Innan niðurhalsins finnurðu eftirfarandi skráarskipulag og innihald, sem flokkar sameiginlegar eignir á rökréttan hátt og gefur bæði samansett og smækkuð afbrigði.

Þegar það hefur verið hlaðið niður, pakkaðu niður þjöppuðu möppunni til að sjá uppbyggingu (samsetta) Bootstrap. Þú munt sjá eitthvað eins og þetta:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── ræsiband . mín . css
   ├── js / │ ├── ræsiband . js
   │ ├── ræsiband . mín . js
   ├── img / │ ├── glyphicons - halflings . png
   │ ├── glyphicons - halflings - hvítur . png
  
  
        
        
        └── README . md

Þetta er undirstöðuform Bootstrap: safnaðar saman skrám til að nota fljótt í næstum hvaða vefverkefni sem er. Við bjóðum upp á samansett CSS og JS ( bootstrap.*), sem og samansett og smættað CSS og JS ( bootstrap.min.*). Myndaskrárnar eru þjappaðar með ImageOptim , Mac app til að þjappa PNG.

3. Hvað er innifalið

Bootstrap er með HTML, CSS og JS fyrir alls kyns hluti, en hægt er að draga þá saman með handfylli af flokkum sem eru sýnilegir efst í Bootstrap skjölunum .

Skjalahlutar

Vinnupallar

Alþjóðleg stíll fyrir líkamann til að endurstilla gerð og bakgrunn, tengistíla, ristkerfi og tvö einföld útlit.

Grunn CSS

Stíll fyrir algenga HTML þætti eins og leturfræði, kóða, töflur, eyðublöð og hnappa. Inniheldur einnig Glyphicons , frábært lítið táknasett.

Íhlutir

Grunnstíll fyrir algenga viðmótshluta eins og flipa og pillur, navbar, tilkynningar, síðuhausa og fleira.

Javascript viðbætur

Líkt og íhlutir eru þessi Javascript viðbætur gagnvirkir hlutir fyrir hluti eins og verkfæraábendingar, popovers, modals og fleira.

Listi yfir íhluti

Saman veita hlutir og Javascript viðbætur eftirfarandi viðmótsþætti :

  • Hnappahópar
  • Fellilistar fyrir hnappa
  • Leiðsöguflipar, pillur og listar
  • Navbar
  • Merki
  • Merki
  • Síðuhausar og hetjueining
  • Smámyndir
  • Viðvaranir
  • Framfarastikur
  • Modals
  • Dropdowns
  • Verkfæraráð
  • Popovers
  • Harmonikku
  • Hringekja
  • Skrifaðu á undan

Í framtíðarhandbókum gætum við farið nánar í gegnum þessa hluti hver fyrir sig. Þangað til, leitaðu að hverju þeirra í skjölunum til að fá upplýsingar um hvernig á að nýta og sérsníða þau.

4. Grunn HTML sniðmát

Með stuttri kynningu á innihaldinu getum við einbeitt okkur að því að nota Bootstrap. Til að gera það munum við nota grunn HTML sniðmát sem inniheldur allt sem við nefndum í skráarskipulaginu .

Nú, hér er að líta á dæmigerða HTML skrá :

  1. <html>
  2.   <haus>
  3.     <title> Bootstrap 101 sniðmát </title>
  4.   </head>
  5.   <líkami>
  6.     <h1> Halló, heimur! </h1>
  7.   </body>
  8. </html>

Til að gera þetta að Bootstrapped sniðmáti skaltu bara láta viðeigandi CSS og JS skrár fylgja með:

  1. <html>
  2.   <haus>
  3.     <title> Bootstrap 101 sniðmát </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "stílblað" >  
  6.   </head>
  7.   <líkami>
  8.     <h1> Halló, heimur! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </html>

Og þú ert búinn! Með þessum tveimur skrám bætt við geturðu byrjað að þróa hvaða síðu eða forrit sem er með Bootstrap.

5. Dæmi

Farðu út fyrir grunnsniðmátið með nokkrum dæmum. Við hvetjum fólk til að endurtaka þessi dæmi og nota þau ekki bara sem lokaniðurstöðu.

  • Grunn markaðssíða

    Er með hetjueiningu fyrir aðalskilaboð og þrjá stoðþætti.

  • Vökvaskipulag

    Notar nýja móttækilega, fljótandi ristkerfið okkar til að búa til óaðfinnanlega fljótandi skipulag.

  • Sniðmát fyrir byrjendur

    Barebones HTML skjal með öllum Bootstrap CSS og javascript innifalið.

Hvað næst?

Farðu í skjölin til að fá upplýsingar, dæmi og kóðabúta, eða taktu næsta stökk og sérsníddu Bootstrap fyrir öll væntanleg verkefni.

Farðu í Bootstrap skjölin Sérsníða Bootstrap