Начало с Bootstrap Twitter - Часть 1

Приступаем к изучению Bootstrap Twitter.

Лично мое мнение, что любой веб-мастер, какого-бы он класса и квалификации он не был, обязан иметь о нем представление. И должен уметь создавать проекты с помощью этого продукта.

Итак, Bootstrap Twitter. Прежде всего - почему двойное название и почему Twitter? На оба вопроса одно объяснение - этот фреймворк создала команда, которая ранее создала еще один проект - Twitter. Хорошо, тогда еще один вопрос - а что такое фреймворк? Как говорит всезнающая Википедия, фреймворк, это:

… программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.

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

Так вот, чтобы не повторять написание одинакового кода опять и снова, были созданы такие базовые наборы, которые можно взять за основу и потом наращивать и видоизменять. В этом суть фреймворков, но есть один момент.

C английского языка фреймворк переводиться как “каркас”. И этим уже можно все сказать, в принципе. Но, еще раз внимательно почитаем Википедию:

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

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

На момент написания статьи имелось две версии этого фреймворка - v3.0.2 и v2.3.2. Здесь мы начнем изучение с версии v2.3.2, а потом плавно (я надеюсь) перейдем к более свежей и современной v3.0.2. Кстати, сразу стоит упомянуть, что в Сети есть несколько русскоязычных ресурсов, посвященных Bootstrap.

Но, насколько я понял, оба они являются локализованными (с разной степенью кривизны) версиями одного сайта-первоисточника - http://getbootstrap.com/. Видно, авторы этих проектов сильно торопились со своими детищами. Я рекомендую пользоваться оригиналом и в данной статье мы так и будем поступать, по мере сил.

Скачать готовый фреймворк Bootstrap можно со страницы домашнего проекта (откуда же еще?) в виде архива. Если распаковать скачанный архив на локальном компьютере, то увидим, что он состоит из трех папок:

1

css

1

js

1

img

Содержимое папки CSS:

bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css

Здесь расположены четыре CSS-файла, но на самом деле их два. Различия между

1

bootstrap.css

1

bootstrap.min.css

1

bootstrap-responsive.css

1

bootstrap-responsive.min.css

1

development

А второй вариант - это

1

production

1

development

Кстати, стоит упомянуть, что в фреймворке Bootstrap вместо сброса стилей через файл

1

reset.css

1

normalize.css

Файл

1

bootstrap.css

Файл

1

bootstrap-responsive.css

1

responsive

Содержимое папки JS:

bootstrap.js
bootstrap.min.js

Также, как и в случае со стилевыми правилами, в этой папке присутствует только один файл -

1

bootstrap.js

1

bootstrap.min.js

1

production

1

bootstrap.js

Дело в том, что фреймворк Bootstrap это не только набор CSS-правил, но и компонентов. Готовая панель навигации (

1

html+css+js

1

html+css+js

Содержимое папки IMG:

glyphicons-halflings.png
glyphicons-halflings-white.png

Единственная папка с изображениями в проекте Bootstrap. Если вы ее откроете (предпочтительно в Adobe Photoshop), то увидите, что это обычный спрайт (sprite) - набор готовых стилизованных иконок.

Первый файл

1

glyphicons-halflings.png

1

glyphicons-halflings-white.png

Что такое CSS-спрайт, я тоже объяснять не буду - в Интернете есть подробная информация по этой технологии. Хотя, когда я впервые с ней познакомился, у меня было желание ее описать у себя - это интересно. Но потом время ушло, для меня все стало просто и обыденно в этом плане типа “да чего там писать - и так все просто и понятно.”

C содержимым архива и проекта Bootstrap Twitter познакомились. Теперь рассмотрим, как подключать данный фреймворк к своему рабочему проекту и пользоваться всеми его “вкусностями”.

Создаем папку с новым проектом и туда распаковываем архив с Bootstrap. Первое - нам необходим HTML-шаблон с обязательным условием -

1

DOCTYPE HTML 5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

К нему подключаем CSS и JS-файлы из распакованного архива и сохраняем в ту же папку с будущим проектом. В принципе, все готово для дальнейшей работы …

На этом все.