Ачаалагч

Эхлэх

Төслийн тойм, түүний агуулга, энгийн загварыг хэрхэн эхлүүлэх талаар.

1. Татаж авах

Татаж авахаасаа өмнө код засварлагч (бид Sublime Text 2- г санал болгож байна) болон HTML болон CSS-ийн талаар тодорхой мэдлэгтэй байхаа мартуузай. Бид эндээс эх файлуудыг үзэхгүй, гэхдээ тэдгээрийг татаж авах боломжтой. Бид хөрвүүлсэн Bootstrap файлуудаа эхлүүлэхэд анхаарлаа хандуулах болно.

Эмхэтгэсэн татаж авах

Эхлэх хамгийн хурдан арга: манай CSS, JS болон зургийн эмхэтгэсэн болон жижигрүүлсэн хувилбаруудыг аваарай. Докс эсвэл эх файл байхгүй.

Bootstrap татаж авах

Эх сурвалжийг татаж авах

GitHub-аас хамгийн сүүлийн хувилбарыг шууд татаж аваад бүх CSS болон Javasript-ийн эх файлыг, баримт бичгийн дотоод хуулбарыг аваарай.

Bootstrap эх сурвалжийг татаж авах

2. Файлын бүтэц

Татаж авах дотроос та дараах файлын бүтэц, агуулгыг олж, нийтлэг хөрөнгийг логикоор бүлэглэж, эмхэтгэсэн болон жижиглэсэн хувилбаруудыг хоёуланг нь өгөх болно.

Татаж авсны дараа (эмхэтгэсэн) Bootstrap-ийн бүтцийг харахын тулд шахсан хавтсыг задлаарай. Та иймэрхүү зүйлийг харах болно:

  ачаалах / ├── css / │ ├── ачаалах . css
   │ ├── ачаалах . мин . css
   ├── js / │ ├── ачаалах . js
   │ ├── ачаалах . мин . js
   ├── img / │ ├── глификонууд - хагас . png
   │ ├── глификонууд - хагас зулзаганууд - цагаан . png
  
  
        
        
        └── README . md

Энэ бол Bootstrap-ийн хамгийн энгийн хэлбэр юм: бараг бүх вэб төсөлд хурдан ашиглахад зориулагдсан хөрвүүлсэн файлууд. Бид эмхэтгэсэн CSS болон JS ( bootstrap.*), мөн эмхэтгэсэн болон жижигрүүлсэн CSS болон JS ( bootstrap.min.*) -аар хангадаг. Зургийн файлуудыг PNG файлуудыг шахах Mac програм болох ImageOptim ашиглан шахдаг.

3. Юу багтсан бэ

Bootstrap нь бүх төрлийн HTML, CSS болон JS-ээр тоноглогдсон байдаг боловч тэдгээрийг Bootstrap баримт бичгийн дээд талд харагдах цөөн тооны категориудаар нэгтгэн дүгнэж болно .

Баримт бичгийн хэсгүүд

Шатны шат

Биеийн төрөл, дэвсгэрийг дахин тохируулах дэлхийн хэв маяг, холбоосын загвар, сүлжээний систем, хоёр энгийн загвар.

Үндсэн CSS

Типограф, код, хүснэгт, маягт, товчлуур зэрэг нийтлэг HTML элементүүдийн хэв маяг. Мөн Glyphicons -ийг багтаасан бөгөөд энэ нь гайхалтай жижиг дүрсний багц юм.

Бүрэлдэхүүн хэсгүүд

Таб, эм, навигацийн самбар, анхааруулга, хуудасны гарчиг гэх мэт нийтлэг интерфейсийн бүрэлдэхүүн хэсгүүдийн үндсэн загварууд.

Javascript залгаасууд

Бүрэлдэхүүн хэсгүүдтэй адил эдгээр Javascript залгаасууд нь зөвлөмж, поповер, модаль гэх мэт зүйлсийн интерактив бүрэлдэхүүн хэсэг юм.

Бүрэлдэхүүн хэсгүүдийн жагсаалт

Бүрэлдэхүүн хэсгүүд болон Javascript залгаасуудын хэсгүүд хамтдаа дараах интерфейсийн элементүүдийг хангадаг.

  • Товчлуурын бүлгүүд
  • Унтраах товчлуурууд
  • Навигацийн таб, эм, жагсаалт
  • Navbar
  • Шошго
  • Тэмдгүүд
  • Хуудасны толгой ба баатар нэгж
  • Өнгөц зураг
  • Анхааруулга
  • Явцын мөр
  • Модаль
  • Унтраах цэсүүд
  • Зөвлөмж
  • Поповерууд
  • Баян хуур
  • Карусель
  • Урьдчилж бичнэ үү

Ирээдүйн гарын авлагад бид эдгээр бүрэлдэхүүн хэсгүүдийг тус тусад нь нарийвчлан авч үзэх болно. Тэр болтол тэдгээрийг хэрхэн ашиглах, өөрчлөх талаар мэдээлэл авахын тулд эдгээрийг баримтаас хайж олоорой.

4. Үндсэн HTML загвар

Агуулгын талаар товч танилцуулснаар бид Bootstrap-г ашиглахад анхаарлаа төвлөрүүлж чадна. Үүнийг хийхийн тулд бид Файлын бүтцэд дурдсан бүх зүйлийг агуулсан үндсэн HTML загварыг ашиглах болно .

Одоо ердийн HTML файлыг харна уу :

  1. <html>
  2.   <толгой>
  3.     <title> Bootstrap 101 загвар </title>
  4.   </head>
  5.   <бие>
  6.     <h1> Сайн уу, дэлхий! </h1>
  7.   </body>
  8. </html>

Үүнийг Bootstrapped загвар болгохын тулд тохирох CSS болон JS файлуудыг оруулаарай:

  1. <html>
  2.   <толгой>
  3.     <title> Bootstrap 101 загвар </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "загварын хуудас" >  
  6.   </head>
  7.   <бие>
  8.     <h1> Сайн уу, дэлхий! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </html>

Мөн та бэлэн боллоо! Эдгээр хоёр файлыг нэмснээр та Bootstrap ашиглан ямар ч сайт эсвэл програм хөгжүүлж эхлэх боломжтой.

5. Жишээ

Хэд хэдэн жишээ загвараар үндсэн загвараас цааш шилжинэ үү. Бид хүмүүсийг эдгээр жишээн дээр давтах, зөвхөн эцсийн үр дүн болгон ашиглахыг уриалж байна.

  • Маркетингийн үндсэн сайт

    Үндсэн зурваст зориулсан баатар нэгж болон туслах гурван элементийг онцолсон.

  • Шингэний зохион байгуулалт

    Манай шинэ мэдрэмжтэй, шингэний сүлжээний системийг ашиглан шингэний жигд байдлыг бий болгодог.

  • Эхлэх загвар

    Бүх Bootstrap CSS болон javascript-г агуулсан нүцгэн HTML баримт бичиг.

Дараа нь яах вэ?

Мэдээлэл, жишээнүүд болон кодын хэсгүүдийг авахын тулд баримт бичиг рүү зочлоорой, эсвэл дараагийн алхамыг хийж, удахгүй болох аливаа төсөлд Bootstrap-г тохируулна уу.

Bootstrap баримт бичигт зочилно уу Bootstrap-ийг тохируулах