Бутстрап

Пачатак

Агляд праекта, яго змесціва і таго, як пачаць працу з простым шаблонам.

1. Спампаваць

Перад спампоўкай пераканайцеся, што ў вас ёсць рэдактар ​​кода (мы рэкамендуем Sublime Text 2 ) і некаторыя практычныя веды HTML і CSS. Мы не будзем разглядаць зыходныя файлы тут, але яны даступныя для спампоўкі. Мы сканцэнтруемся на тым, каб пачаць працу з нашымі скампіляванымі файламі Bootstrap.

Спампаваць скампілявана

Самы хуткі спосаб пачаць: атрымаць скампіляваныя і скарочаныя версіі нашых CSS, JS і малюнкаў. Няма дакументаў або арыгінальных зыходных файлаў.

Спампаваць Bootstrap

Крыніца загрузкі

Атрымайце арыгінальныя файлы для ўсіх CSS і Javasript разам з лакальнай копіяй дакументаў, загрузіўшы апошнюю версію непасрэдна з GitHub.

Спампаваць зыходны код Bootstrap

2. Структура файла

У загрузцы вы знойдзеце наступную структуру файла і змесціва, лагічна групуючы агульныя актывы і забяспечваючы як скампіляваныя, так і скарочаныя варыянты.

Пасля загрузкі распакуйце сціснутую папку, каб убачыць структуру (скампіляванага) Bootstrap. Вы ўбачыце нешта накшталт гэтага:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── загрузка . мін . css
   ├── js / │ ├── загрузка . js
   │ ├── загрузка . мін . js
   ├── img / │ ├── гліфіконы - палоўкі . png
   │ ├── гліфіконы - палоўкі - белы . PNG
  
  
        
        
        └── README . md

Гэта самая базавая форма 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.     <спасылка 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. Прыклады

Выйдзіце за рамкі базавага шаблону з дапамогай некалькіх прыкладаў макетаў. Мы заклікаем людзей паўтарыць гэтыя прыклады, а не проста выкарыстоўваць іх у якасці канчатковага выніку.

  • Базавы маркетынгавы сайт

    Уключае адзінку героя для асноўнага паведамлення і тры дапаможныя элементы.

  • Плаўны макет

    Выкарыстоўвае нашу новую адаптыўную сістэму вадкай сеткі для стварэння бесперапыннага вадкага макета.

  • Стартавы шаблон

    Barebone HTML-дакумент з усімі Bootstrap CSS і JavaScript уключаны.

Што далей?

Перайдзіце да дакументаў, каб атрымаць інфармацыю, прыклады і фрагменты кода, або зрабіце наступны крок і наладзьце Bootstrap для любога будучага праекта.

Наведайце дакументы Bootstrap Наладзьце Bootstrap