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

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

Сарҳо боло! Ин ҳуҷҷатҳо барои v2.3.2 мебошанд, ки дигар расман дастгирӣ намешавад. Версияи охирини Bootstrap-ро санҷед!

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

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

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

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

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

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

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

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

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

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

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

Лутфан қайд кунед, ки ҳама плагинҳои JavaScript барои дохил кардани jQuery талаб мекунанд.

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

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

Исҳоқсозӣ

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

Базаи CSS

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

Компонентхо

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

Плагинҳои JavaScript

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

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

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

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

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

Бо як муқаддимаи мухтасар ба мундариҷа, мо метавонем диққатамонро ба истифодаи Bootstrap равона кунем. Барои ин, мо як қолаби асосии HTML-ро истифода мебарем, ки ҳама чизеро, ки мо дар сохтори Файл зикр кардем, дар бар мегирад .

Акнун, ин ҷо як файли маъмулии HTML -ро дида мебароем :

  1. <!DOCTYPE html>
  2. <html>
  3. <сар>
  4. <title> Шаблони Bootstrap 101 </title>
  5. <meta name = "viewport" мӯҳтавои = "васеъ = паҳнои дастгоҳ, миқёси ибтидоӣ = 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" мӯҳтавои = "васеъ = паҳнои дастгоҳ, миқёси ибтидоӣ = 1.0" >
  6. <!-- Bootstrap -->
  7. <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "экран" >
  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 ба таҳияи ҳама гуна сайт ё барнома шурӯъ кунед.

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

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

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

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

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

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

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

  • Маркетинги танг

    Шаблони маркетинги сабук ва сабук барои лоиҳаҳои хурд ё даста.

  • Нави асоснок

    Саҳифаи маркетингӣ бо истинодҳои паймоиши паҳнои баробар дар наворҳои тағирёфта.

  • даромад

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

  • Поёнтҳои часпанда

    Поёнтаҳои баландии собитро ба поёни порти дидани корбар гузоред.

  • Ҷумботрони карусел

    Риффи бештар интерактивӣ дар сайти асосии маркетинг, ки дорои карусели маъруф аст.

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

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