Создание красивых, отзывчивых сайтов с помощью Bootstrap

Steve Smith

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

+.. contents:: Разделы: + :local: + :depth: 1

Начинаем

Есть несколько способов начать работу с Bootstrap. Если вы запускаете новое приложение в Visual Studio, то можете выбрать шаблон по умолчанию ASP.NET Core Starter, тогда Bootstrap будет изначально установлен:

../_images/bootstrap-in-starter-template.png

Добавление Bootstrap в проект ASP.NET Core заключается только в том, чтобы добавить его в bower.json в качестве зависимости:

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.6",
    "jquery": "2.2.0",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.6"
  }
}

Это рекомендуемый способ добавить Bootstrap в проект ASP.NET Core.

Вы также можете установить bootstrap, используя какой-нибудь менеджер пакетов, такой как bower, npm или NuGet. В любом случае процесс будет фактически одинаковым:

Bower

bower install bootstrap

npm

npm install bootstrap

NuGet

Install-Package bootstrap

Примечание

Лучше всего устанавливать в ASP.NET Core клиентские зависимости, как Bootstrap, через Bower (используя bower.json, как показано выше). Использование npm/NuGet показывает, как легко добавить Bootstrap в другие виды веб приложений, включая более ранние версии ASP.NET.

Если вы ссылаетесь на локальные версии Bootstrap, то вам нужно ссылаться на них на каждой странице приложения. В production версии приложения вы должны ссылаться на bootstrap, используя CDN. В шаблоне по умолчанию ASP.NET файл _Layout.cshtml выглядит вот так:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2016 - WebApplication1</p>
        </footer>
    </div>

    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("scripts", required: false)
</body>
</html>

Примечание

Если вы собираетесь использовать плагины Bootstrap jQuery, вам также нужно будет ссылаться на jQuery.

Базовые шаблоны и функционал

Базовый шаблон Bootstrap очень похож на файл _Layout.cshtml, показанный выше, и включает в себя базовое меню навигации и место для отображения остальной части страницы.

Базовая навигация

Шаблон по умолчанию использует набор элементов <div> для отображения верхней навигации и основного тела страницы. Если вы используете HTML5, то можете заменить первый тэг <div> на тэг <nav> - эффект будет тем же, но с более точной семантикой. Внутри этого первого <div> вы можете увидеть несколько других. Во-первых, <div> с классом “container”, а внутри него еще два элемента <div>: “navbar-header” и “navbar-collapse”. navbar-header div включает в себя кнопку, которая появится, если ширина скрина меньше заданной минимальной ширины, и показываются 3 горизонтальные линии. Иконка отображается с помощью чистых HTML и CSS - изображения не требуется. Вот код, отображающий иконку, со всеми тэгами <span>:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

Сюда также включено имя приложения, которое появляется вверху слева. Основное навигационное меню отображается с помощью элемента <ul> внутри второго div и включает в себя ссылки на Home, About и Contact. Дополнительные ссылки на Register и Login добавляются в _LoginPartial на строке 29. Основное тело каждой страницы отображается под навигационным меню в другом <div>, помеченном классами “container” и “body-content”. В простом файле default _Layout, представленном здесь, контекст страницы отображается конкретным представлением, связанным со страницей, а затем в конец элемента <div> добавляется простой <footer>. Посмотрите, как отображается встроенная страница About:

../_images/about-page-wide.png

Меню с кнопкой “hamburger” вверху справа появляется тогда, когда ширина окна меньше заданной ширины:

../_images/about-page-hamburger.png

Если нажать на иконку, то соответствующие элементы меню будут представлены вот так:

../_images/about-page-hamburger-open.png

Типография и ссылки

Bootstrap настраивает базовую типографию сайта, цвета и форматируют ссылки в своих CSS файлах. Этот CSS файл включает в себя стили по умолчанию для таблиц, кнопок, элементов форм, изображений и так далее (см.). Особенно полезным функционалом является система сетчатой верстки.

Сетки

В современных веб приложениях лучше всего избегать при верстке тэг <table>, ограничивая использование этого элемента конкретными табличными данными. Столбцы и колонки могут быть сверстаны с помощью набора элементов <div> и соответствующих CSS классов. Есть несколько преимуществ такого подхода, включая возможность приспособить сетки для узких экранов, таких как у айфонов.

Система сетчатой верстки Bootstrap основывается на 12 колонках. Это число было выбрано потому, что тогда сетку можно разделить на 1, 2, 3 или 4 колонки, а ширина колонки может варьироваться до 1/12ой от вертикальной ширины экрана. Чтобы начать использовать эту систему, вам стоит начать с контейнера <div>, а затем добавить ряд <div>, как показано здесь:

<div class="container">
  <div class="row">

  </div>
</div>

Далее, добавьте дополнительные элементы <div> для каждой колонки и укажите число необходимых колонок как часть CSS класса, начиная с “col-md-”. Например, если вам нужны две колонки одинакового размера, вы будете использовать для каждой класс “col-md-6”. В данном случае “md” - это сокращение для “medium”, и оно касается стандартного размера экрана компьютера. Есть четыре разные опции, и каждая из них используется для определения максимальной ширины, пока не будет переопределена (если вы хотите, чтобы ширина была зафиксирована независимо от ширины экрана, вы можете просто указать xs классы).

Префикс CSS класса Устройства Ширина
col-xs- Телефоны < 768px
col-sm- Планшеты >= 768px
col-md- Компьютеры >= 992px
col-lg- Большие ПК >= 1200px

Мы определяем две колонки с “col-md-6”, и в результате у нас и будут две колонки с разрешением для ПК, но эти колонки располагаются вертикально при отображении на более мелких устройствах (или в более узком окне браузера на ПК), позволяя пользователям легко просмотреть контент без необходимости горизонтального скролла.

По умолчанию у Bootstrap всегда одноколоночная верстка, так что вам нужно указать колонки, если вам необходимо большее их число. Единственный раз, когда вам потребуется напрямую указать, что <div> принимает 12 колонок, - это когда вам потребуется переопределить поведение для более крупных устройств. При указании нескольких классов устройств в определенных точках вам потребуется сбрасывать отображаемые колонки. При добавлении clearfix div вы можете добиться этого:

../_images/narrow-and-wide-viewport-grid.png

В примере выше One и Two делят строку при верстке “md”, тогда как Two и Three делят строку при верстке “xs”. Без clearfix <div> Two и Three не показаны корректно в представлении “xs” (показаны только One, Four и Five):

../_images/grid-without-clearfix.png

В этом примере использовалась только одна строка <div>, и Bootstrap справился с задачей относительно верстки и расположения колонок. Обычно вы должны указать строковый <div> для каждой горизонтальной строки, которая требуется для вашей верстки, и, конечно, вы можете размещать Bootstrap сетки внутри друг друга. Если вы так сделаете, каждая вложенная сетка займет 100% ширины элемента, в котором она размещена, и они потом разделяются с помощью классов column.

Jumbotron

Если вы используете шаблоны по умолчанию ASP.NET MVC в Visual Studio 2012 или 2013, вы вероятно видели, как работает Jumbotron. Он касается больших разделов страницы на полную ширину, которые можно использовать для отображения большого изображения заднего фона, для вызова действия, вращения или похожих элементов. Чтобы добавить на страницу jumbotron, просто добавьте <div> и присвойте ему класс “jumbotron”, затем разместите внутри контейнер <div> и добавьте контент. Мы легко можем сделать так, чтобы стандартная страница About использовала jumbotron для основных заголовков, которая она отображает:

../_images/jumbotron.png

Кнопки

Основные классы кнопок и их цвета показаны на рисунке ниже.

../_images/theme-buttons.png

Значки

Значки - это маленькие, обычно цифровые выноски рядом с элементами навигации. Они могут обозначать сообщения или уведомления, а также наличие обновлений. Чтобы указать значок, нужно просто добавить <span>, содержащий текст, с классом “badge”:

../_images/theme-badges.png

Оповещения

Иногда нам требуется отобразить некоторые уведомления, оповещения или сообщения об ошибках. Здесь вступают в игру стандартные классы оповещений. There are four different severity levels, with associated color schemes:

../_images/theme-alerts.png

Навигационные и обычные меню

В нашу верстку уже включено стандартное навигационное меню, но Bootstrap поддерживает дополнительные опции стилизации. Мы также можем легко отображать навигационное меню вертикально, а не горизонтально, если так надо, а также добавить поднавигационные элементы. Просты навигационные меню, например, ленты вкладок, размещаются вверху элементов <ul>. Их можно очень просто создать, снабдив их CSS классами “nav” и “nav-tabs”:

../_images/theme-tabstrips.png

Навигационные меню создаются сходным образом, но они немного сложнее. Они начинаются с <nav> или <div> с классом “navbar”, внутри которых контейнер div содержит оставшуюся часть элементов. Наша страница уже включает в себя навигационное меню в заголовок – а ниже показано еще одно, где добавлена поддержка для выпадающего меню:

../_images/theme-navbars.png

Дополнительные элементы

Тему по умолчанию также можно использовать, чтобы довольно симпатично представить HTML таблицы, включая поддержку представлений в полоску. Также существуют метки (labels) со стилями, которые похожи на стили кнопок. Вы можете создавать пользовательские выпадающие меню, поддерживающие дополнительные опции стилей вне стандартного HTML элемента <select>. Если вам нужен индикатор прогресса, можно выбрать несколько разных стилей, а кроме того есть группы списков и панели, которые включают в себя заголовок и контекст.

http://getbootstrap.com/examples/theme/

Другие темы

Вы можете расширить стандартную Bootstrap тему, переопределив CSS, добавив цвета и стили, которые нужны вашему приложению. Если вы хотите использовать готовую тему, есть несколько галерей, доступных онлайн, например, WrapBootstrap.com (здесь есть много платных тем) и Bootswatch.com (здесь находятся бесплатные темы). Некоторые из платных тем предлагают отличный дополнительный функционал, например, расширенную поддержку для меню администратора, панели с классными графиками и индикаторами. Одной из самых популярных тем является Inspinia, и стоит она на данный момент $18. Она включает в себя шаблон ASP.NET MVC5 в дополнении к версиям AngularJS и статического HTML.

../_images/theme-inspinia.png

Если вы хотите создать свою собственную панель с элементами, начните вот с такого примера: http://getbootstrap.com/examples/dashboard/.

Компоненты

Также Bootstrap включает в себя поддержку некоторых встроенных UI компонентов.

Glyphicons

Bootstrap включает в себя наборы иконок из Glyphicons (http://glyphicons.com), где доступно 200 иконок, которые можно бесплатно использовать. Вот простой пример:

../_images/theme-glyphicons.png

Группы Input

Группы Input позволяют связывать дополнительный текст или кнопки с элементом input:

../_images/input-groups.png

Поддержка JavaScript

Библиотека Bootstrap JavaScript включает в себя поддержку API для включенных компонентов, позволяя вам контролировать их поведение внутри вашего приложения. Кроме того, bootstrap.js включает в себя несколько пользовательских jQuery плагинов, предоставляющих дополнительный функционал, как переходы, модальные диалоговые окна, обнаружение прокрутки (обновление стилей, основанное на том, где пользователь остановился при прокрутке страницы), карусели и тд. См. http://getbootstrap.com/javascript/.

Резюме

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

Поделись хорошей новостью с друзьями!
Следи за новостями!