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

Оригинал: Bootstrap Starter Template - Part 1
Автор: Bootstrap Tutor
Дата публикации: декабрь 2012 г.
Перевод: Семененко В.
Дата перевода: август 2013 г.

В предыдущей статье показывалось, как создать директорию "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). Код, создающий данный пример, показан внизу:

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

    <html lang="en"> ... </html>
  

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

Header

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

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

  • <meta charset="utf-8"> - данный атрибут указывает, в какой кодировке создается HTML-документ. Кодировка UTF-8 - это кодировка Unicode;
  • <title>Bootstrap, from Twitter</title> - данный тег выводит в заголовке окна браузера название страницы;
  • <meta name="viewport" content="widht=device-width, initial-scale=1.0"> - данный HTML5 тег сообщает браузеру о том, что нашу страницу нужно отображать на экране устройства в масштабе один к одному. Таким образом, содержимое сайта одинаково адаптируется к размеру небольших устройств, таких как смартфоны, планшеты; и к размерам нормальных дисплеев, таких как десктопы или ноутбуки. То есть, наша страница становиться отзывчивой (responsive);
  • <meta name="description" content="Это моя первая страница, созданная с помощью фреймворка Twitter Bootstrap"> - данный тег необходим для поисковой оптимизации сайта. Он сообщает поисковым машинам о содержании страницы. Одной из лучших SEO-практик является создание и применение данного тега;
  • <meta name="author" content="Bootstrap Tutor"> - в данном теге содержится информация об авторе данной статьи.

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

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

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

<link href="bootstrap.css" rel="stylesheet">
и
<link href="bootstap-responsive.css" rel="stylesheet">

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

В данном случае правилом:

... панель навигации, расположенная всегда фиксировано вверху страницы, отодвигается вниз на 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'ов:

Теперь код практически готов, давайте приведем его ниже, целиком:

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

Загляните на досуге

Санкт-Петербург из Минска, by width no marginwidth

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100