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
   │ ├── подигање . мин . js
   ├── img / │ ├── глификони - полтрони . png
   │ ├── глификони - полтрони - бели . png
  
  
        
        
        └── ПРОЧИТАЈ . мд

Ова е најосновната форма на Bootstrap: компајлирани датотеки за брзо испуштање во употреба во речиси секој веб-проект. Обезбедуваме компајлирани CSS и JS ( bootstrap.*), како и компајлирани и минифицирани CSS и JS ( bootstrap.min.*). Датотеките со слики се компресирани со помош на ImageOptim , апликација за Mac за компресирање на PNG.

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.     <врска 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. Примери

Движете се надвор од основниот шаблон со неколку примери за распоред. Ги охрабруваме луѓето да ги повторат овие примери и да не ги користат едноставно како краен резултат.

  • Основен маркетинг сајт

    Се одликува со единица херој за примарна порака и три придружни елементи.

  • Распоред на течност

    Го користи нашиот нов одговорен, флуиден систем за решетка за да создаде беспрекорен распоред на течности.

  • Шаблон за стартер

    Обичен HTML документ со сите вклучени Bootstrap CSS и javascript.

Што е следно?

Упатете се до документите за информации, примери и фрагменти од код или направете го следниот скок и приспособете го Bootstrap за кој било претстоен проект.

Посетете ги документите за Bootstrap Прилагодете го Bootstrap