Twitter bootstrap — первые уроки

Twitter bootstrap — первые уроки

Создать сайт от начала и до конца — не такая уж и легкая задача. Даже опытные разработчики сталкиваются с трудностями. Чтобы облегчить данную задачу придумали twitter bootstrap, уроки которого будут на моем блоге.


twitter-bootstrap
В этом уроке мы рассмотрим некоторые возможности Bootstrap и увидим, как этот framework может ускорить веб-разработку.

Некоторые функции, которые включены в twitter bootstrap:

  • css grid система
  • кнопки, формы, таблицы
  • компоненты пользовательского интерфейса — навигация, прогресс бары, оповещения, нумерация страниц, хлебные крошки.

Начнем наши twitter bootstrap уроки. Для начала необходимо скачать twitter bootstrap и установить в head страницы следующее:

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>

Теперь когда все установлено, можем приступить в экспериментам.

CSS: Кнопки

Bootstrap содержит CSS стили для основных HTML элементов, включая <button>. Вставьте в свой документ следующий код:

<button type="button" class="btn">Default Button</button>

Как видите, к элементу <button> добавлен класс btn. Вот у нас что получилось:

twitter-bootstrap-uroki-01

Так же для определения ролей кнопки можно добавлять соответствующие классы

<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-warning">Button</button>
<button type="button" class="btn btn-danger">Button</button>

Обратите внимание на цвета:

twitter-bootstrap-uroki-02

Компоненты пользовательского интерфейса

Bootstrap включает в себя так же UI компоненты, которые используются для навигации, нумерации страниц и много еще для чего. Добавить эти компоненты не составит труда. Давайте попробуем сгруппировать наши кнопки:

<div class="btn-group">
 <button type="button" class="btn btn-success">Button</button>
 <button type="button" class="btn btn-warning">Button</button>
 <button type="button" class="btn btn-danger">Button</button>
</div>

Обратите внимание — кнопки заключены в <div> в классом btn-group. Использование такой конструкции приведет нас к следующему виду:

twitter-bootstrap-uroki-03

Разумеется можно сделать это все и вертикально

<div class="btn-group btn-group-vertical">
 <button type="button" class="btn btn-success">Button</button>
 <button type="button" class="btn btn-warning">Button</button>
 <button type="button" class="btn btn-danger">Button</button>
</div>

twitter-bootstrap-uroki-04

Настройка

Как вы уже догадались, Bootstrap содержит большое количество стилей. Если они вам все не понадобятся, то можно выбрать нужные вам компоненты на этой странице.

Заключение

Конечно, Twitter Bootstrap имеет много возможность и функций. Мы с вами рассмотрели лишь малую часть. В следующих статьях постараюсь взять конкретный пример и сделать что-нибудь стоящее. Пост twitter bootstrap уроки подошел к концу.