Bootstrap

Сар кардани кор

Шарҳи лоиҳа, мундариҷаи он ва чӣ гуна бояд бо қолаби оддӣ оғоз шавад.

1. Зеркашӣ кунед

Пеш аз зеркашӣ, боварӣ ҳосил кунед, ки муҳаррири код (мо тавсия медиҳем Sublime Text 2 ) ва каме дониши кории HTML ва CSS дошта бошед. Мо дар ин ҷо файлҳои манбаъро намефаҳмем, аммо онҳо барои зеркашӣ дастрасанд. Мо диққати худро ба оғози кор бо файлҳои Bootstrap тартибдодаамон равона мекунем.

Зеркашӣ тартиб дода шудааст

Роҳи зудтарини оғоз: версияҳои тартибдодашуда ва хурдшудаи CSS, JS ва тасвирҳои моро гиред. Ҳуҷҷатҳо ё файлҳои аслии аслӣ вуҷуд надоранд.

Bootstrap-ро зеркашӣ кунед

Манбаи зеркашӣ

Файлҳои аслии ҳама CSS ва Javasript ва нусхаи маҳаллии ҳуҷҷатҳоро тавассути зеркашии версияи охирини мустақим аз GitHub гиред.

Манбаи Bootstrap-ро зеркашӣ кунед

2. Сохтори файл

Дар доираи зеркашӣ шумо сохтор ва мундариҷаи файлҳои зеринро пайдо мекунед, ки дороиҳои умумиро мантиқӣ гурӯҳбандӣ мекунанд ва вариантҳои тартибдодашуда ва хурдшударо пешниҳод мекунанд.

Пас аз зеркашӣ, ҷузвдони фишурдашударо кушоед, то сохтори Bootstrap-ро бубинед. Шумо чизе монанди ин хоҳед дид:

  bootstrap / ├── css / │ ├── bootstrap . css │
   ├── bootstrap . мин . css ├──
   js / │ ├── bootstrap . js
   │ ├── bootstrap . мин . js
   ├── img / │ ├── глификонҳо - нимлингҳо . png
   │ ├── глификонҳо - нимбаргҳо - сафед . png
  
  
        
        
        └── README . мд

Ин шакли асосии Bootstrap аст: файлҳои тартибдодашуда барои истифодаи зуд дар қариб ҳама лоиҳаҳои веб. Мо CSS ва JS-и тартибдодашуда ( bootstrap.*), инчунин CSS ва JS-и тартибдодашуда ва хурдкардашударо ( bootstrap.min.*) пешниҳод мекунем. Файлҳои тасвирӣ бо истифода аз ImageOptim , як барномаи Mac барои фишурдани PNG фишурда мешаванд.

3. Чиро дар бар мегирад

Bootstrap барои ҳама гуна чизҳо бо HTML, CSS ва JS муҷаҳҳаз шудааст, аммо онҳоро метавон бо як қатор категорияҳои дар болои ҳуҷҷатҳои Bootstrap намоён ҷамъбаст кард .

Қисмҳои ҳуҷҷатҳо

Исҳоқсозӣ

Услубҳои глобалӣ барои бадан барои аз нав танзимкунии намуд ва замина, услубҳои истинод, системаи шабака ва ду тарҳи оддӣ.

Базаи CSS

Услубҳо барои унсурҳои умумии HTML, ба монанди типография, код, ҷадвалҳо, шаклҳо ва тугмаҳо. Ғайр аз он , Glyphicons , маҷмӯи нишонаи хурди бузургро дар бар мегирад.

Компонентхо

Услубҳои асосӣ барои ҷузъҳои умумии интерфейс ба монанди ҷадвалҳо ва доруҳо, навор, огоҳиҳо, сарлавҳаҳои саҳифа ва ғайра.

Плагинҳои Javascript

Ба монанди ҷузъҳо, ин плагинҳои Javascript ҷузъҳои интерактивӣ барои чизҳое ба монанди маслиҳатҳои асбобҳо, поповҳо, модальҳо ва ғайра мебошанд.

Рӯйхати ҷузъҳо

Якҷоя, қисмҳои ҷузъҳо ва плагинҳои Javascript унсурҳои интерфейси зеринро таъмин мекунанд:

  • Гурӯҳҳои тугмаҳо
  • Тугмаҳои афтанда
  • Ҷадвалҳои навигатсионӣ, доруҳо ва рӯйхатҳо
  • Навбар
  • Тамғакоғазҳо
  • Нишонҳо
  • Сарлавҳаҳои саҳифа ва воҳиди қаҳрамон
  • Суратҳо
  • Огоҳӣ
  • Барҳои пешрафт
  • Модалҳо
  • Равзанаҳои афтанда
  • Маслиҳатҳо
  • Поповерҳо
  • Аккордеон
  • Карусель
  • Навиштан

Дар дастурҳои оянда, мо метавонем ин ҷузъҳоро ба таври алоҳида ба таври муфассалтар гузарем. То он вақт, ҳар яке аз инҳоро дар ҳуҷҷатҳо барои маълумот дар бораи чӣ гуна истифода бурдан ва танзим кардани онҳо ҷустуҷӯ кунед.

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 = "stylesheet" >  
  6.   </head>
  7.   <бадан>
  8.     <h1> Салом, ҷаҳон! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </html>

Ва шумо омодаед! Бо илова кардани ин ду файл, шумо метавонед бо Bootstrap ба таҳияи ҳама гуна сайт ё барнома шурӯъ кунед.

5. Мисолҳо

Бо якчанд тарҳҳои намунавӣ берун аз қолаби асосӣ ҳаракат кунед. Мо мардумро ташвиқ мекунем, ки ин мисолҳоро такрор кунанд ва на танҳо онҳоро ҳамчун натиҷаи ниҳоӣ истифода баранд.

  • Сомонаи маркетинги асосӣ

    Бо як воҳиди қаҳрамон барои паёми асосӣ ва се унсури дастгирӣ.

  • Тарҳбандии моеъ

    Барои сохтани тарҳи бефосилаи моеъ системаи нави шабакаи моеъи моро истифода мебарад.

  • Шаблони ибтидоӣ

    Ҳуҷҷати HTML бо ҳама бо CSS Bootstrap ва JavaScript дохил карда шудааст.

Баъд чӣ?

Барои маълумот, мисолҳо ва порчаҳои код ба ҳуҷҷатҳо равед ё ҷаҳиши навбатӣ гиред ва Bootstrap-ро барои ҳама гуна лоиҳаи дарпешистода танзим кунед.

Ба ҳуҷҷатҳои Bootstrap муроҷиат кунед Bootstrap-ро фармоиш диҳед