Начинаем работу с Bootstrap

Поделиться12018-03-12 08:38:33

Автор: pvazov
Участник

Оригинал: Getting Started and Setup for Twitter Bootstrap

Twitter Bootstrap представляет из себя простой и интуитивно понятный фреймворк для создания front-end'а сайтов. Эта статья является введением, в котором будет рассказано об установке Bootstrap и его настройке для дальнейшей работы. С помощью фреймворка Twitter Bootstrap мы будем пошагого создавать проект в следующих уроках. Итак, чтобы приступить к установке Bootstrap, потребуется совсем немного:

Файлы фреймворка Bootstrap, скачанные с домашней страницы проекта http://twitter.github.com/bootstrap/
Любой текстовый редактор для работы с HTML-кодом (в моем случае я буду пользоваться специализированным текстовым редактором Notepad++)

Для дальнейшей работы также потребуются основы знаний по HTML и CSS. Однако не стоит особенно волноваться по поводу уровня ваших знаний - все последующие уроки построены с расчетом на новичков в web-дизайне.
Получаем файлы фреймворка Bootstrap

Архивированные файлы этого фреймворка можно скачать с домашней странички проекта - http://twitter.github.com/bootstrap/.

После скачивания файла разархивируем его в ту же директорию и посмотрим содержимое. Оно представляет из себя набор из трех папок:

Первая папка - css - содержит в себе два файла со стилевыми правилами: bootstrap.css и bootstrap.min.css. Файл bootstrap.css представляет из себя коллекцию готовых классов, с помощью которых создается front-end сайта. Файл bootstrap.min.css является копией файла bootstrap.css с той лишь разницей, что это минимизированная копия. То есть, его размер уменьшен за счет удаления комментариев, пустых строк и другой информации, облегчающей чтение исходного файла. Применять его можно, но вот читать или редактировать практически невозможно по вышеназванным причинам.

Примечание переводчика: Современная сборка фреймворка Bootstrap содержит в себе, помимо двух вышеназванных CSS-файлов, еще два стилевых файла - bootstrap-responsive.css и bootstrap-responsive.min.css.

Задача файла bootstrap-responsive.css - сделать сайт адаптивным (responsive). На сегодняшний день адаптивность сайта является модной и востребованной технологией, в связи с бурным ростом мобильного Интернета. То есть, если при разработке сайта необходимо сделать так, чтобы его можно было просматривать не только на десктопах или ноутбуках, но и на мобильных устройствах - смартфонах, планшетах и т. п., то необходимо воспользоваться файлом bootstrap-responsive.css в дополнение к файлу bootstrap.css. Второй файл bootstrap-responsive.min.css является минимизированной копией файла bootstrap-responsive.css.

Вторая папка - js - содержит в себе два файла со скриптами javascript: bootstrap.js и bootstrap.min.js. По аналогии с файлами CSS, первый файл bootstrap.js является набором готовых скриптов для подключения к создаваемому проекту. Второй файл bootstrap.min.js является минимизированной копией первого.

Третья папка - img - это набор готовых иконок, которые можно применять для разрабатываемого сайта. В папке, на первый взгляд, находятся всего лишь два графических файла. Но если открыть хотя бы один из них, то станет ясно, что это спрайты (sprites).

Что такое спрайты и технология CSS-спрайтов - вы можете почитать в Интернете, так как обзор этих терминов не входит в задачу данной статьи.
Создаем первый сайт под Bootstrap

Для нашего первого проекта необходимо создать отдельную директорию, в которой будут храниться все необходимые файлы. В файловом менеджере (Проводник, Total Commander) создаем папку с именем "mysite" и копируем туда содержимое архива bootstrap.zip.

В итоге должна получиться следующая картина:

Теперь необходимо создать главный индексный HTML-файл - index.html. Проще всего это сделать с помощью текстового редактора. В своем Notepad++ я создаю новый текстовый файл, печатаю в нем всего два слова - Hello World, и сохраняю изменения под именем index.html в папке "mysite".

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

Если попробовать открыть файл index.html в браузере, то увидим следующее:

Прямо скажем, не впечатляет! В окне браузера отображается только лишь текст, который был сохранен в файле index.html.

Однако не стоит расстраиваться, так как это лишь заготовка, с помощью которой будет показано, как создать полноценный HTML-файл и добавить к нему функциональность Twitter Bootstrap. Этот фреймворк значительно упростит и ускорит создание HTML-страниц, что мы и увидим в последующих статьях.

Поделиться22018-03-12 08:39:57

Автор: pvazov
Участник

Основы Bootstrap - Часть 1

Оригинал: Bootstrap Starter Template - Part 1

В предыдущей статье показывалось, как создать директорию "mysite", а также как расположить в ней основную индексную страницу index.html. В этой статье будет содержаться совсем немного текста и технически ее нельзя назвать полноценным обзором. Для понимания того, как создается HTML-страница и как в нее встраивается магия Twitter Bootstrap, мы будем использовать шаблон Starter Template, расположенный на GitHub и предназначенный для использования в фреймворке Twitter Bootstrap. Однако не торопитесь скачивать данный шаблон. В этой статье мы будем создавать его с нуля, шаг за шагом.

Предварительная настройка аналогичная предыдущей статье - для этого необходима директория с файлами Bootstrap и индексная HTML-страница.
Создание web-страницы

Давайте откроем страницу index.html и будем пошагово следовать приведенным в статье инструкциям. Итак, весь HTML-документ обрамлен в два корневых HTML-тега:

<html>Hello World</html>

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

Давайте добавим внутрь тега body еще один тег h1, для того чтобы отобразить информацию на странице. Для этого нужно открыть файл index.html в любом текстовом редакторе (но лучше всего для этого подойдут специализированные программистские блокноты, такие как Notepad++ или Sublime Text 2). Код, создающий данный пример, показан внизу:
<html>

<body>

<h1>"Hello World"</h1>

</body>

</html>

Слово "Hello World" отобразиться в окне браузера полужирным шрифтом большого размера благодаря тому, что он помещен внутри тега h1. Фреймворк от Twitter использует спецификацию HTML5, поэтому в самом начале документа необходимо указать эту спецификацию - <!--doctype html>. Также, согласно рекомендации консорциума W3C, для каждой создаваемой страницы нужно указывать основной язык, на котором она создается, с помощью атрибута lang внутри тега html. Например, для англоязычного варианта страницы нужно создать такой фрагмент кода:

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

Первая часть заголовка содержит заголовок и метаинформацию.

Вторая часть заголовка

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

<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style>
body{
padding-top: 60px; /* отодвигает блок-контейнер на 60 пикселей вниз */
}
</style>
<link href="../assets/bootstap-responsive.css" rel="stylesheet">

Если вы откроете файл с таким подключением каскадных стилей, то не увидите никаких изменений. Это связано с тем, что неправильно указаны пути к файлам css. Изменим пути на более простые, удалив в них указание на директорию assets:

и

Два вышеуказанных файла bootstrap.css и bootstap-responsive.css являются стандартными файлами настроек правил CSS для фреймворка Bootstrap. Первый из них содержит в себе коллекцию классов, которые пригодятся при создании любой web-страницы. Второй файл необходим для придания создаваемой нами HTML-странице адаптивности, то есть возможности ее отображения на экранах различных устройств без потери удобочитаемости. Еще один тег в заголовке, который вы могли заметить - это style. Он служит для переопределения CSS-свойств фреймворка Twitter Bootstrap, когда нужна тонкая настройка HTML-шаблона сайта.

В данном случае правилом:
body{
padding-top: 60px; /* отодвигает блок-контейнер на 60 пикселей вниз */
}

... панель навигации, расположенная всегда фиксировано вверху страницы, отодвигается вниз на 60 пикселей. Вы могли заметить, что надпись "Hello World" в окне браузера смещается вниз ровно на 60 пикселей (60px), чтобы не перекрывать панель навигации.
Третий раздел заголовка

Третьим разделом заголовка является код для старых web-браузеров Internet Expolorer версий от 6 до 8, которые не поддерживают стандарт HTML5. Этот код позволяет странице отображаться в таких браузерах бесшовно, то есть - без искажений. На первый взгляд, этот код может показаться бездействующим, но на самом деле это не так. Код помещен в условные комментарии, которые прекрасно понимают браузеры семейства Internet Expolorer (для них такие комментарии и создавались), но не понимают остальные браузеры, такие как Mozilla Firefox, Google Chrome. Поэтому они просто пропустят их так, как если бы их и не было вовсе:


Четвертый раздел заголовка

В четвертом разделе заголовка размещаются ссылки на favicon'ы сайта. Если кто вдруг не знает, то favicon - это маленький значок, который отображается в заголовке окна браузера с левой стороны от надписи - названия сайта. Так как файлы этих иконок не входят в стандартную "поставку" фреймворка Twitter Bootstrap и располагаются в совсем другом месте, то нам необходимо изменить путь к ним с ../assets на другой - https://github.com/twitter/bootstrap/tree/master/docs/assets. Другим способом размещения файлов-иконок является создание локальной поддиректории "ico" внутри директории "mysite", в которую нужно скачать уже готовые файлики отсюда.

Подключаем следующим кодом файлы favicon'ов:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touchicon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/favicon.png">

Теперь код практически готов, давайте приведем его ниже, целиком:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Awesome Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is my first web page using the magic of twitter bootstrap">
<meta name="author" content="Bootstrap Tutor">

<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/favicon.png">

</head>

<body>

<h1>"Hello World!"</h1>
<p> This is a really long sentece that we will use to show how long a sentence can be made without any purpose whatsoever </p>

</body>

</html>

Итак, в данной статье мы познакомились с основным кодом, который располагается в любой web-странице, созданной с помощью фреймворка Twitter Bootstrap. В следующей статье мы познакомимся с другим разделом HTML-страницы - body, и научимся подключать к нашей странице скрипты, написанные на javascript.

Поделиться32018-03-12 08:41:30

Автор: pvazov
Участник

Основы Bootstrap - Часть 2

Оригинал: Bootstrap Starter Template - Part 2

В предыдущих статьях рассказывалось, как выполнить основные настройки фреймворка Twitter Bootstrap для создания web-страницы. Для этой цели мы воспользовались шаблоном для Bootstrap под названием BootStrap starter template, устройство которого начали разбирать. Мы узнали, из чего состоит заголовок этого HTML-документа. В данной статье мы продолжим изучение шаблона и рассмотрим устройство тела документа body, а также узнаем, как подключать скрипты javascript, без которых фреймворк Twitter Bootstrap не будет работать полноценно.
Тело документа body

Тело HTML-документа body содержит внутри себя контент, который отображается в окне браузера. Если взглянуть на исходный код документа, который мы разрабатывали в предыдущих уроках, то можно заметить, что там содержится только слово Hello World. В этом уроке мы придадим нашей странице более профессиональный вид, добавив в нее навигационную панель с помощью класса navbar.

Более подробную информацию о классе navbar можно почитать здесь. Я же приведу код, который наиболее часто используется при создании навигационной панели на web-странице:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a>/li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>

Обратите внимание на классы brand и nav, которые применены к ненумерованному списку ul внутри навигационной панели - блока с классом navbar. Ссылка с классом brand служит в шаблоне для размещения в ней логотипа сайта. В нашем случае мы изменим значение этой ссылки с "Title" на "My Site". Значения трех остальных ссылок изменим со старого: "Home" - "Link" - "Link" на "Home" - "About" - "Contact". Сейчас страниц, на которые ведут эти ссылки, не существует. Но не волнуйтесь, мы добавим их позже.

Также изменим фоновый цвет блока с классом navbar так, чтобы он выглядел темнее. Для этого добавим к этому классу, помимо класса navbar, еще один - navbar-inverse. Также, сделаем навигационную панель фиксированной - чтобы она располагалась всегда сверху страницы. Для этого к блоку с классами navbar и navbar-inverse добавим еще один, третий класс - navbar-fixed-top. В результате всех этих изменений код навигационной панели будет выглядеть следующим образом:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">My Site</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a>/li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
Делаем навигационную панель адаптивной

Для того чтобы сделать навигационную панель адаптивной и способной сворачиваться в кнопку при уменьшении окна браузера по ширине, необходимо обернуть всю панель в коде еще в один блок с двумя классами - nav-collapse и collapse. Вверху кода с панелью добавим код кнопки, которая будет появляться при уменьшении окна и в которую будет "превращаться" сама навигационная панель. Для этого создадим ссылку, которую с помощью класса btn преобразуем в кнопку и "навесим" на нее нашу панель с помощью класса btn-navbar. Помимо этого, привяжем к ней действия для javascript'а, добавив data-toggle="collapse" data-target=".nav-collapse".
<div class="container">

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<a class="brand" href="#">Project name</a>

<div class="nav-collapse collapse">

</div>

</div>

Теперь при просмотре страницы с навигационной панелью в окне браузера на мониторе будет такая картина:

Навигационная панель Bootstrap

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

Адаптивный вид панели навигации>
Подключаем Javascript

Последней частью нашего урока будет подключение Javascript'а. Добавление строк с кодом выполняется в самом конце документа, сразу перед тегом </body> для того, чтобы страница загружалась быстрее. Для того чтобы скрипты заработали, необходимо изменить путь к ним со стандартного "../assets/" на "/".

Окончательно исправленный нами код будет выглядеть следующим образом:
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Awesome Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is my first web page using the magic of twitter bootstrap">
<meta name="author" content="Bootstrap Tutor">

<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="https://github.com/twitter/bootstrap/tree/master/docs/assets/ico/favicon.png">

</head>

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Mysite</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a>>/li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>!--/.nav-collapse -->
</div>
</div>
</div>

<h1>"Hello World!"</h1>
<p<>This is a really long sentece that we will use to show how long a sentence can be made without any purpose whatsoever </p>

</div>

<script src="_/js/jquery.js"></script>
<script src="_/js/bootstrap-transition.js"<>/script>
<script src="_/js/bootstrap-alert.js"<>/script>
<script src="_/js/bootstrap-modal.js"<>script>
<script src="_/js/bootstrap-dropdown.js"<>/script>
<script src="_/js/bootstrap-scrollspy.js"<>/script>
<script src="_/js/bootstrap-tab.js"<>/script>
<script src="_/js/bootstrap-tooltip.js"<>/script>
<script src="_/js/bootstrap-popover.js"<>/script>
<script src="_/js/bootstrap-button.js"<>/script>
<script src="_/js/bootstrap-collapse.js"<>/script>
<script src="_/js/bootstrap-carousel.js"<>/script>
<script src="_/js/bootstrap-typeahead.js"<>/script>

</body>

</html>

Отредактировано pvazov (2018-03-12 08:43:26)