Bootstrap

Свободный набор инструментов (библиотека) для создания сайтов, включает в себя html- и css-шаблоны оформления. Разработан компанией Twitter, доступен с 19.08.2011.

Установка Bootstrap

Прежде чем использовать, необходимо установить, скачав с сайта http://getbootstrap.com/

Для этого последовательно выбираем  Download -> Compiled CSS and JS -> Download

После скачивания распакуйте архив в свою папку.

Подключение

Между тегами <head>  и </head> добавьте следующие строки:

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

После подключения Bootstrap у вас уже может измениться отображение тегов. Попробуйте вывести заголовки с подключенным и отключенным Bootstrap.

В Bootstrap используются некоторые элементы HTML и свойства CSS, которые требуют использования HTML5 doctype. Включайте его в начале всех проектов.

<!DOCTYPE html>

Верстка страницы

Bootstrap требует, чтобы элементы страницы содержались в одном из двух контейнеров:

  • .containerдля фиксированной ширины контейнера.
  • .container-fluid для контейнера, охватывающего всю ширину вашего просмотра.

В свою очередь контейнеры состоят из блоков .row – строки.

Bootstrap разделяет ширину родительского блока .row на 12 равных блоков, которые можно использовать как угодно. В случае, если блоков будет указано больше 12, т очасть блоков перейдет на следующую строку.

При этом возможны 4 типа колонок

.col-xs- – для очень маленьких экранов (<768px)

.col-sm- – для маленьких экранов (>=768px)

.col-md- – для средних экранов (>=992px)

.col-lg- – для больших  экранов (>=1200px)

Отличие заключается в следующем. Например, для большой сетки на экранах размером меньше 1200 пикселей метка  перестанет быть горизонтальной и превратится в вертикальную.

Пример 1. Разбивка страниц на 4 колонки разного размера

<!DOCTYPE html>
<html>
<head>
<title>Эксперимент с версткой</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<div class="container">
  <div class="row">
<h1>Заголовок</h1>
</div>
  <div class="row">
    <div class="col-lg-1">
      Первая узкая колонка
    </div>
    <div class="col-lg-2">
      Вторая колонка побольше
    </div>
    <div class="col-lg-4">
      Третья колонка больше, чем вторая
    </div>
    <div class="col-lg-5">
      Четвертая колонка самая большая
    </div>
  </div>
</div>
<body>
</html>

Пример 2. Разбивка страницы на три колонки в зависимости от ширины окна

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Эксперимент с версткой</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container" style="width:70%">
  <div class="row">
<h1>Заголовок</h1>
</div>
<div class="row">
        <div class="col-lg-4 col-md-1 col-sm-5 col-xs-5">
        	<span class="visible-lg">.col-lg-4</span>
            <span class="visible-md">.col-md-1</span>
            <span class="visible-sm">.col-sm-5</span>
            <span class="visible-xs">.col-xs-5</span>
        </div>
        <div class="col-lg-4 col-md-5 col-sm-1 col-xs-6">
        	<span class="visible-lg">.col-lg-4</span>
            <span class="visible-md">.col-md-5</span>
            <span class="visible-sm">.col-sm-1</span>
            <span class="visible-xs">.col-xs-6</span>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-1">
        	<span class="visible-lg">.col-lg-4</span>
            <span class="visible-md">.col-md-6</span>
            <span class="visible-sm">.col-sm-6</span>
            <span class="visible-xs">.col-xs-1</span>
       </div>
      </div>

</div>
<body>
</html>

Ссылки
http://bootstrap.imazin.ru/css/

Поделиться:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • StumbleUpon
  • Technorati
  • БобрДобр
  • Memori.ru
  • МоёМесто.ru