Создание адаптивных веб-сайтов с использованием Twitter Bootstrap

2020-10-20

Прежде чем начать, скажу, что существует еще несколько вещей, с которыми вам стоит ознакомиться, прежде чем переходить к чтению этого руководства. Это продолжение моей предыдущей статье: «Учебник по Twitter Bootstrap, решение сложных задач», в которой продемонстрированы многие основы создания веб-сайтов при помощи Twitter Bootstrap «с нуля».

Я настоятельно рекомендую вам прочитать предыдущую статью перед тем, как начинать разбираться с адаптивными свойствами Twitter BootStrap. Я очень благодарен читателям, которые высоко оценили мою предыдущую статью, что и вдохновило меня написать продолжение.

Я также надеюсь, что вы почерпнете полезные знания и из этой статьи!

Хотя Release Candidate 1 для третьей версии Twitter Bootstrap уже выпущен, мы все же будем использовать версию 2.3.2, поскольку, на сегодняшний день, это наиболее стабильная сборка.

Скачать все необходимые файлы вы можете на официальной странице загрузок GitHub.

Что вы подразумеваете, говоря «адаптивный» о веб-сайте?

Что вы подразумеваете, говоря «адаптивный» о веб-сайте?

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

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

При помощи средств CSS3, а конкретно - применению HTML5, данная тенденция с каждым днем растет. Но что делать, если вы являетесь девелопером, а не дизайнером? Тогда у вас проблема!

Ок, вам больше не нужно волноваться, поскольку, как я уже говорил в своей предыдущей статье, Twitter Bootstrap является самым настоящим супергероем в области вёрстки формата CSS Frameworks. И это безусловно так, если речь идет о создании адаптивных веб-сайтов.

Подготовка

Для активации адаптивных свойств Twitter Bootstrap, существуют еще несколько предварительных процедур, которые вы должны выполнить, помимо тех, которые мы обсудили в нашей предыдущей статье.

Чтобы настроить отзывчивую область, вам необходимо проставить правильные мета-теги в заголовке веб-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Приведенный выше мета-тег достаточно очевиден по своему назначению. Мы задаем ширину страницы по ширине устройства и изначально масштабируем её как 1, то есть, теперь мы имеем размер по умолчанию.

Затем мы должны также применить нужный CSS-файл из набора CSS-файлов Bootstrap. В прошлый раз, мы применяли только css/bootstrap.css, но на сей раз, мы также будем использовать css/bootstrap-responsive.css.

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

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

Теперь, у нас все готово для того, чтобы начать создавать наш первый адаптивный веб-сайт при помощи Twitter Bootstrap. Прежде чем приступать, взгляните на нашу демо-страницу.

Убедитесь, что вы, изменяя размер окна браузера, можете видеть, как демо-страница реагирует на различные размеры. Правда здорово?

Давайте начнем

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

Отзывчивая навигация;
Область маркетинга;
Раздел контента;
Правые боковые панели;
Нижняя часть страницы (нижний колонтитул).

Вышеуказанные разделы выглядят так же, как и те, что мы использовали ранее при построении обычного (неотзывчивого) веб-сайта. На самом деле, для того чтобы произвести существенные изменения в разметке, чтобы сделать сайт отзывчивым, обычно нужна лишь минута.

Эти тонкости Вам нужно понять и применять очень аккуратно.

Адаптивная навигация

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

Эту панель мы должны закрепить в верхней части сайта, как вы уже могли видеть на демо-странице. Итак, вот разметка для этого элемента:

<div class="navbar navbar-fixed-top">
</div>

С классом navbar мы уже знакомы – он предназначен для отображения раздела навигации. Дополнительное значение navbar-fixed-top делает ее прилегающей к верхней части страницы.

Всё просто и понятно!

Давайте двигаться дальше и вставим еще несколько элементов кода в навигационную панель:

Строка с кодом navbar-inner нужна для Bootstrap, это даёт понять, что вы собираетесь поместить некоторые материалы внутрь панели навигации.

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

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

<div class="navbar 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-th-list"></span></a>
        <a href="#" class="brand">отзывчивый сайт</a>
        <div class="nav-collapse collapse">
            <ul class="nav pull-right">
                <li class="active"><a href="#">Главная</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Связаться с нами</a></li>
            </ul>
            </div>
        </div>
    </div>
</div>

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

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

Чуть выше, над брендингом, вы можете видеть дополнительную ссылку к классам btn btn-navbar, которая надстроена над интервалом icon-th-list. Эта ссылка отображается только на небольших экранах со списком иконок.

Обратите внимание, также мы использовали элемент data-toggle=collapse, его Bootstrap использует для того, чтобы скрыть/отобразить пункты меню в небольших окнах.

data-target используется для определения того, какие меню должны быть скрыты/отображены.

Область маркетинга

Маркетинговая область строится точно так же, как и при создании обычных (неадаптивных) веб-страниц. Мы создадим раздел (div) с классом hero-unit.

Затем, поместим обёртку container внутри него, а после добавим h1, p и ссылку с классом btn btn-primary. Код должен выглядеть так, как показано ниже:

<div class="hero-unit">
    <div class="container">
        <h1>Обучение геометрии</h1>
        <p class="lead">овсяное печенье шоколадный торт драже кунжут шнапс. Бонбон датское овсяное печенье чупа-чупс пирог мафин тутси ролл сдобная булочка сладкий ролл.</p>
        <p><a href="#" class="btn btn-success btn-large">Начало работы</a></p>
    </div>
</div>

Добавление класса lead к элементам параграфа выделит их, по сравнению с другими элементами p. Также убедитесь в том, что hero-unit div находится полностью снаружи навигационного раздела.

Раздел контента

Ранее мы изучили принцип, в соответствии с которым классифицируются элементы ROW в неотзывчивых веб-страницах. Здесь же, мы будем использовать похожую, но немного изменённую версию элементов row. На этот раз мы будем использовать элемент row-fluid внутри класса row.

Это позволит ряду элементов в точности соответствовать веб-странице и, перетекать вниз, если или когда это будет необходимо.

Поэтому начальная разметка будет выглядеть так:

<div class="container">
    <div class="row-fluid">
        //здесь пример кода
    </div>
</div>

Теперь, поскольку у нас уже готова структура, давайте двигаться дальше, наполним её каким-нибудь контентом. Перед этим, мы должны разделить всю площадь на две части: одна для контента и другая для правой боковой панели.

Чтобы этого добиться, мы будем использовать классы вроде span* - это поможет нам разделить область.

Для разделения областей контента и правой боковой панели мы будем использовать span8 и span4. Как отмечалось в предыдущей статье, Twitter Bootstrap это система, состоящая из 12 колонок.

Суммарное значение класса span в итоге должно быть равно 12.

То есть, вы можете сделать столько разделов, сколько пожелаете, но общая их сумма должна составлять 12. Например: span4, span4 и span4 (три колонки) или span3, span7 и span2 (три не одинаковые колонки) и т. д.

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

<div class="container">
    <div class="row-fluid">
        <div class="span8">
        </div>
        <div class="span4">
        </div>
    </div>
</div>

Здесь, span8 будет нашим разделом контента, а span4 будет нашей правой боковой панелью. Теперь, в span8 мы попробуем добавить некоторые случайные тексты, используя теги p.

<p>пирог тирамису мороженое сладкая вата пудинг. сладкий 
топинг шоколадный батончик тутси ролл сахарная вата овсяное пирожное 
торт мишки гамми. Датское печенье-пудинг с пудрой. Кондитерская вата 
конфеты торт топинг. Кунжутный десерт кусок овсяного печенья медвежья лапа 
молочная ириска.</p>
 
<p class="lead">Зефир суфле.</p>
 
<p>Яблочный пирог суфле из яблок сладкий марципановый ролл. Марципановая медвежья лапа 
пудинг сладкий. Халва сдобная булочка тирамису лакрица 
конфеты камыш халва. Овсяный торт шоколадный торт сахарная слива кунжут 
кусок. Бонбон датский овсяный пирог чупа-чупс торт мафин тутси 
завернутый сладкий ролл сладкий ролл. Сладкий ролл тутси драже печенье 
медвежья лапа сдобная булочка желе тутси сладкий ролл.</p>

После всех тегов p, мы снова разделим область span8 на три одинаковых колонки, чтобы детализировать некоторые разделы нашего сайта.

Мы можем отложить много row-fluid, но необходимо помнить, что окончательная сумма разделов span* должна быть равна 12, иначе ваш сайт работать не будет.

Идем дальше и поместим следующие строки непосредственно под всеми вышеперечисленными тегами p, но в пределах span8:

<div class="row-fluid">
    <div class="span4">
        <h4>Наши клиенты</h4>
        <p>Здравствуйте, это наши клиенты. <a href="#">Нажмите здесь</a>.</p>
        <a href="#" class="btn btn-primary"><i class="icon-heart icon-white"></i> Наши клиенты</a>
    </div>
    <div class="span4">
        <h4> Наши клиенты </h4>
        <p>Здравствуйте, это наши клиенты. <a href="#">Нажмите здесь</a>.</p>
        <a href="#" class="btn btn-primary"><i class="icon-music icon-white"></i> Наши клиенты</a>
    </div>
    <div class="span4">
        <h4>Наши клиенты</h4>
        <p>Здравствуйте, это наши клиенты. <a href="#">Нажмите здесь</a>.</p>
        <a href="#" class="btn btn-primary"><i class="icon-file icon-white"></i> Наши клиенты</a>
    </div>
</div>

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

Заполняем нижнюю часть страницы (нижний колонтитул)

Нашим нижним колонтитулом будет простой контейнер с тремя одинаковыми по размеру span* элементами. Как вы можете увидеть на демо-странице, горизонтальная линия, отделяющая нижний колонтитул, создана при помощи элемента <hr />.

Поэтому, код для нижнего колонтитула такой:

<div class="container">
    <div class="row-fluid">
        <div class="span4">
            <p>&copy; 2013 <a href="#">Лаборатория Zetiz</a></p>
        </div>
        <div class="span4 text-center">
            <ul class="nav inline">
                <li><a href="#">О нас</a></li>
                <li><a href="#">Связаться с нами</a></li>
                <li><a href="#">Политика конфиденциальности</a></li>
            </ul>
        </div>
        <div class="span4 text-right">
            <p>Форум Twitter BootStrap 2.3.2</p>
        </div>
    </div>
</div>

Теги text-center, text-right и text-left являются классами выравнивания. Вы можете использовать их по мере необходимости.

Заключение

Возможно, вы еще этого не осознали, но мы как раз подошли к концу статьи. Поздравляем вас с созданием вашего первого адаптивного сайта.

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

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

Также, например, можно добавить пользовательские таблицы стилей как «customstyle.css» или любые другие CSS-файлы.

Импортируйте все CSS-файлы Bootstrap при помощи команды @import в «customstyle.css», после чего нужно будет ссылку на этот CSS-файл указать на вашей веб-странице.

Одно из изменений, которое я сделал в моем customstyle.css - это заменил фоновое изображение и цвет в разделе маркетинга.

Надеюсь, что вы хорошо провели время, читая данную статью. Спасибо!

Демо-страница