eriri akpụkpọ ụkwụ

Na-amalite

Nleba anya nke oru ngo a, ihe di n'ime ya, na otu esi amalite site na iji ndebiri di mfe.

1. Download

Tupu nbudata, jide n'aka na ị nwere onye editọ koodu (anyị na-akwado Sublime Text 2 ) na ụfọdụ ihe ọmụma na-arụ ọrụ nke HTML na CSS. Anyị agaghị agabiga faịlụ isi mmalite ebe a, mana ha dị maka nbudata. Anyị ga-elekwasị anya na ibido faịlụ Bootstrap anyị achịkọtara.

achịkọtara nbudata

Ụzọ kachasị ọsọ iji malite: nweta ụdị nke CSS, JS na onyonyo anyị chịkọtara na nke pere mpe. Enweghị docs ma ọ bụ faịlụ isi mmalite.

Budata Bootstrap

Budata isi iyi

Nweta faịlụ izizi maka CSS na Javasript niile, yana nnomi mpaghara nke docs site na nbudata ụdị ọhụrụ ozugbo na GitHub.

Budata isi mmalite Bootstrap

2. Usoro faịlụ

N'ime nbudata a, ị ga-ahụ nhazi faịlụ na ọdịnaya ndị a, na-achịkọta ihe ndị a na-ahụkarị ma na-enye ma agbakọta na obere mgbanwe.

Ozugbo ebudatara ya, mepee folda ahụ abịakọrọ ka ịhụ nhazi nke (nke achịkọtara) Bootstrap. Ị ga-ahụ ihe dị ka nke a:

  akpụkpọ ụkwụ / ├── css / │ ├── akpụkpọ ụkwụ . css
   │ ├── akpụkpọ ụkwụ . min . css
   ├── js / │ ├── akpụkpọ ụkwụ . js
   │ ├── akpụkpọ ụkwụ . min . js
   ├── img / │ ├── glyphicons - ọkara . png
   │ ├── glyphicons - ọkara - ọcha . png
  
  
        
        
        └── GỤKWUO . md

Nke a bụ ụdị Bootstrap kachasị ewu ewu: faịlụ achịkọtara maka ojiji ntinye ngwa ngwa n'ihe fọrọ nke nta ka ọ bụrụ ọrụ weebụ ọ bụla. Anyị na-enye CSS na JS ( bootstrap.*), yana CSS na JS ( bootstrap.min.*) chịkọtara na obere . A na-ejikọta faịlụ onyonyo a site na iji ImageOptim , ngwa Mac maka ịpịkọta PNG.

3. Gịnị gụnyere

Bootstrap na-abịa na HTML, CSS na JS maka ụdị ihe niile, mana enwere ike ịchịkọta ha na obere edemede a na-ahụ anya n'elu akwụkwọ Bootstrap .

Akụkụ akwụkwọ

Ihe mkpuchi

Ụdị zuru ụwa ọnụ maka ahụ iji tọgharịa ụdị na ndabere, ụdị njikọ, usoro grid, na nhazi abụọ dị mfe.

Isi CSS

Ụdị maka ihe HTML a na-ahụkarị dị ka typography, koodu, tebụl, ụdị, na bọtịnụ. Tinyekwara Glyphicons , nnukwu akara ngosi obere.

Ngwa

Ụdị ntọala maka ihe ndị na-emekọ ihe ọnụ dị ka taabụ na pill, navbar, alerts, headers page, and more.

Ihe mgbakwunye Javascript

Yiri akụrụngwa, ngwa mgbakwunye Javascript ndị a bụ ihe mmekọrịta maka ihe dị ka ntụnye aka, popovers, modals, na ndị ọzọ.

Ndepụta nke akụrụngwa

Ọnụ, akụrụngwa na ngalaba plugins Javascript na-enye ihe interface ndị a:

  • Otu bọtịnụ
  • Mbudata bọtịnụ
  • Taabụ nchọgharị, ọgwụ na ndepụta
  • Navbar
  • Akara aha
  • Akara
  • Ibe nkụnye eji isi mee na otu dike
  • thumbnails
  • Nti mkpu
  • Ogwe ọganihu
  • Ụdị ụdị
  • Mbelata
  • Ntuziaka ngwaọrụ
  • Popovers
  • Accordion
  • Carousel
  • Ụdị isi

N'ime ntuziaka ga-abịa n'ihu, anyị nwere ike ịgafe akụkụ ndị a n'otu n'otu n'ụzọ zuru ezu karị. Ruo mgbe ahụ, chọọ nke ọ bụla n'ime ihe ndị a n'akwụkwọ maka ozi gbasara otu esi eji na hazie ha.

4. Ndabere HTML template

Site na ntinye nkenke n'ime ọdịnaya apụghị n'ụzọ, anyị nwere ike ilekwasị anya na itinye Bootstrap n'ọrụ. Iji mee nke ahụ, anyị ga-eji template HTML bụ isi nke gụnyere ihe niile anyị kwuru na nhazi faịlụ .

Ugbu a, lee anya na faịlụ HTML na-ahụkarị :

  1. <html>
  2.   <isi>
  3.     <title> Bootstrap 101 Template </title>
  4.   </ isi>
  5.   <ahụ>
  6.     <h1> Ndewo, ụwa! </h1>
  7.   </ ahu>
  8. </html>

Iji mee nke a ka ọ bụrụ template Bootstrapped , naanị tinye faịlụ CSS na JS kwesịrị ekwesị:

  1. <html>
  2.   <isi>
  3.     <title> Bootstrap 101 Template </title>
  4.     <!-- Bootstrap -->
  5.     <njikọ href = "css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </ isi>
  7.   <ahụ>
  8.     <h1> Ndewo, ụwa! </h1>
  9.     <script src = "js/bootstrap.min.js" </script> 
  10.   </ ahu>
  11. </html>

Ị na-atọkwa! Site na faịlụ abụọ ahụ agbakwunyere, ị nwere ike ịmalite ịmepụta saịtị ma ọ bụ ngwa ọ bụla na Bootstrap.

5. Ihe atụ

Gaa n'ofe ndebiri ntọala yana nhazi ihe atụ ole na ole. Anyị na-agba ndị mmadụ ume ka ha kwughachi ihe atụ ndị a ma ghara iji ha mee ihe dị ka njedebe ikpeazụ.

  • Ebe azụmaahịa bụ isi

    Na-egosipụta otu dike maka ozi bụ isi yana ihe atọ na-akwado.

  • Nhazi mmiri mmiri

    Na-eji sistemu grid mmiri ọhụrụ anyị na-anabata iji mepụta nhazi mmiri na-enweghị nkebi.

  • template mmalite

    Akwụkwọ HTML nwere ọkpụkpụ Bootstrap CSS na javascript gụnyere.

Gịnị na-esote?

Gaa na docs maka ozi, ihe atụ, na koodu snippets, ma ọ bụ mee ihe na-esote wee hazie Bootstrap maka ọrụ ọ bụla na-abịa.

Gaa na docs Bootstrap Hazie Bootstrap