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

Reading time ~6 minutes

Приступаем к изучению 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
. Первые две папки обязательны при создании любого нового проекта на Bootstrap.

Содержимое папки 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
. Помимо этого, используются компоненты известного HTML5 Boilerplate.

Файл

1
bootstrap.css
- это главный файл стилевых правил CSS для фреймворка Bootstrap, без него этот фреймворк - просто не фреймворк. В этом файле находится коллекция готовых CSS-классов, которые подключаются к элементам HTML-документа по мере необходимости и тем самым форматируют HTML-страницу.

Файл

1
bootstrap-responsive.css
- единственная задача данного файла сделать HTML-страницу, к которой подключается этот файл, адаптивной (
1
responsive
). Что такое адаптивный дизайн, вы можете легко найти в Интернете, на сегодняшний день это тема №1 в веб-дизайне.

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

bootstrap.js
bootstrap.min.js

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

1
bootstrap.js
, тогда как
1
bootstrap.min.js
- это его минимизированная
1
production
-версия. Файл
1
bootstrap.js
- это набор готовых js-сценариев, задача которых является вспомогательной в деле создания HTML-компонентов.

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

1
html+css+js
), форма поиска с кнопкой внутри (
1
html+css+js
), рабочая панель вкладок (html+css+js) и так далее - это все HTML-компоненты. И как уже должно быть понятно, роль 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-файлы из распакованного архива и сохраняем в ту же папку с будущим проектом. В принципе, все готово для дальнейшей работы …

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017