Ачаалагч

Эхлэх

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

1. Татаж авах

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

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

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

Bootstrap татаж авах

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

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

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

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

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

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

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

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

Бүх JavaScript залгаасууд jQuery-г оруулах шаардлагатайг анхаарна уу.

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

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

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

Шатны шат

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

Үндсэн CSS

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

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

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

JavaScript залгаасууд

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

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

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

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <толгой>
  4.     <title> Bootstrap 101 загвар </title>
  5.     <meta name = "viewport" content = "өргөн=төхөөрөмжийн өргөн, анхны масштаб=1.0" >  
  6.   </head>
  7.   <бие>
  8.     <h1> Сайн уу, дэлхий! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" >></script> 
  10.   </body>
  11. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <толгой>
  4.     <title> Bootstrap 101 загвар </title>
  5.     <meta name = "viewport" content = "өргөн=төхөөрөмжийн өргөн, анхны масштаб=1.0" >  
  6.     <!-- Bootstrap -->
  7.     <link href = "css/bootstrap.min.css" rel = "загварын хуудас" медиа = "дэлгэц" >   
  8.   </head>
  9.   <бие>
  10.     <h1> Сайн уу, дэлхий! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" >></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </body>
  14. </html>

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

5. Жишээ

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

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

    Бүх Bootstrap CSS болон JavaScript орсон HTML баримт бичиг.

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

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

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

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

  • Нарийн маркетинг

    Жижиг төсөл эсвэл багуудад зориулсан нимгэн, хөнгөн маркетингийн загвар.

  • Зөвшөөрөгдсөн nav

    Өөрчлөгдсөн навигацийн самбар дахь ижил өргөнтэй навигацийн холбоос бүхий маркетингийн хуудас.

  • Нэвтрэх

    Баребонууд өөрчлөн, том хэлбэрийн хяналт, уян хатан байрлалтай хэлбэрээр нэвтэрдэг.

  • Наалттай хөл хэсэг

    Хэрэглэгчийн харах цонхны доод хэсэгт тогтмол өндөртэй хөл хэсгийг зүү.

  • Carousel jumbotron

    Маркетингийн үндсэн сайт дээрх алдартай тойруулгыг агуулсан илүү интерактив рифф.

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

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

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