Bootstrap 3 разметка: Система сеток. Разметка · Bootstrap. Версия v4.3.1

Статья из блога IT-школы Hillel

Front-end Developer в airSlate, Преподаватель Компьютерной школы Hillel.

1. 1.Что такое CSS Grid
2. 2.Как работает CSS Grid
3. 3.Что такое Bootstrap?
4. 4.Как работает Bootstrap Grid
5. 5.CSS Grid против Bootstrap
6. 6.Что все-таки лучше?

Статьи Front-end

Пользовательский интерфейс (User Interface) — это то, с чем взаимодействует пользователь на любом сайте. Очень важно, чтобы ваш сайт выглядел не только эстетично и функционально, но и чтобы интерфейс был интуитивно понятным. Высокопроизводительный, отзывчивый и визуально приятный пользовательский интерфейс является обязательным для успешного веб-сайта.

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

В этой статье я решила сравнить два очень популярных инструментов для создания сетки макетов — CSS Grid и Bootstrap. Но для начала давайте немного разберем, что это такое и как работает.

Что такое CSS Grid

CSS Grid — это двумерная система сетки, которая очень удобна в использовании при верстке макетов и больших сегментов страницы. Сетка состоит из горизонтальных и вертикальных линий, образующих строки и столбцы, как в таблице.

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

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

Как работает CSS Grid?

Как уже говорилось выше, CSS Grid делит пространство на две оси, что позволяет создавать нужное количество строк и столбцов, которые можно зафиксировать по ширине и высоте с помощью пикселей или указать долю пространства с помощью фракций (1fr, 2fr. .).

Понятие фракции появилось именно с внедрением Grid-ов в CSS и часто используется для создания адаптивных и кроссплатформенных макетов.

Давайте разберем такой пример вполне стандартного макета для страничек:

Рис. 1 Пример макета

На Рис.1 я сверстала базовый макет для веб-странички, где есть Header, Navigation, Main, Aside, Footer — основные семантические теги.

Вот как будет выглядеть в этом случае мой HTML:

<div>
        <header>THIS IS HEADER</header>
        <nav>THIS IS NAVIGATION</nav>
        <main>THIS IS MAIN</main>
        <aside>THIS IS ASIDE</aside>
        <footer>THIS IS FOOTER</footer>
    </div>

И CSS с использованием гибкой сетки:

body {
            margin: 0;
        }
 
        .wrap {
            font-size: 40px;
            color: white;
 
            display: grid;
            grid-template-columns: 300px 1fr 200px;
            grid-template-areas: 
                "header header header"
                "nav main aside"
                "footer footer footer";
        }
 
        . header {
            background-color: red;
            grid-area: header;
        }
 
        .nav {
            background-color: yellow;
            grid-area: nav;
        }
 
        .main {
            background-color: blueviolet;
            grid-area: main;
        }
 
        .aside {
            background-color: green;
            grid-area: aside;
        }
 
        .footer {
            background-color: blue;
            grid-area: footer;
        }

Давайте разберем, что происходит в коде выше:

1. В первую очередь мы дали родительскому контейнеру свойство display: grid.

2. Затем с помощью свойства grid-template-columns: 300px 1fr 200px; определила, что на странице у нас будет 3 колонки (300px, auto, 200px cоответсвенно).

3. Свойством grid-template-areas было указано то, как именно должны располагаться элементы относительно сетки.

Обратите внимание, что нам не пришлось оборачивать теги nav, main, aside в еще один отдельный блок, чтобы разместить их в одну строку, и это позволило нам своего рода писать код кратко и понятно. Также огромным преимуществом такой сетки в том, что ячейки растягиваются автоматически, в зависимости от контента, что лежит в контейнере (например как в main).

Что такое Bootstrap?

Bootstrap — это бесплатный фреймворк, содержащий набор инструментов HTML, CSS и JavaScript, используемых для создания веб-сайтов. Это гибкая система, которая обеспечивает кросс-браузерную совместимость и позволяет быстро верстать адаптивные дизайны. В этой статье мы поговорим только о Bootstrap Grid, чтобы понять, в чем же разница между двумя видами сеток.

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

Как работает Bootstrap Grid

В отличие от CSS Grid, в Bootstrap Grid элементы столбцов (с классом col) располагаются внутри каждой строки (с классом row), таким образом создавая горизонтальную группу столбцов.

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

Рис. 2 Пример строки с 12 столбцами

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

<div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>

Bootstrap предлагает четыре уровня классов, а именно xs, sm, md и lg, которые классифицируются следующим образом в зависимости от размера устройства:

1. xs — для телефонов размером < 76px.

2. sm — для планшетов размером > 768px и < 992px

3. md — для десктопов размером > 992px и < 1200px

4. lg — для больших экранов размером > 1200px

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

Давайте рассмотрим пример создания такой же странички, как мы делали выше (Рис.1), в этот раз с помощью Bootstrap.

<div>
        <div>THIS IS HEADER</div>
    </div>
    <div>
        <div>THIS IS NAVIGATION</div>
        <div>THIS IS MAIN</div>
        <div>THIS IS ASIDE</div>
    </div>
    <div>
        <div>THIS IS FOOTER</div>
    </div>

А также этот же макет, только уже адаптированный к мобильной (Рис. 3) версии и планшетной (Рис. 4):

<div>
        <div>THIS IS HEADER</div>
    </div>
    <div>
        <div>THIS IS NAV</div>
        <div>THIS IS MAIN THIS IS MAIN THIS IS MAIN</div>
        <div>THIS IS ASIDE</div>
    </div>
    <div>
        <div>THIS IS FOOTER</div>
    </div>

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

Рис. 3 Пример макета на планшете

Рис. 4 Пример макета на мобильном телефоне

CSS Grid против Bootstrap

Вот сравнение этих двух систем сеток:

Что все-таки лучше?

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

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

• С другой стороны, CSS Grid — это простая и гибкая система сеток, в которой применяется кросс-совместимый дизайн, обеспечивающий отличное взаимодействие с пользователем. Таким образом, использование CSS Grid в сравнении с Bootstrap имеет смысл использовать при реализации простых макетов.

Ну и конечно, и CSS Grid, и Bootstrap мы изучаем на курсах Front-end разработки 😉

Рекомендуем курс по теме

• Front-end Basic basic

Веб-разработка — Создание адаптивных веб-сайтов с помощью Bootstrap

• Статья
• 000Z» data-article-date-source=»ms.date»>08/06/2015
• Чтение занимает 13 мин

Кит Пижиновски

Продукты и технологии:

Bootstrap, Visual Studio 2013, CSS, JavaScript

В статье рассматриваются:

• Bootstrap и адаптивный веб-дизайн;
• эксперименты с сетчатой системой Bootstrap;
• компоненты Bootstrap и плагины JQuery;
• принятие решение о том, подходит ли Bootstrap для вашего сайта.

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

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

В этой статье дан обзор одной из таких инфраструктур, Bootstrap, включенной во многие шаблоны проектов Web Application в Visual Studio 2013. Bootstrap — это инфраструктура, поддерживающая адаптивный веб-дизайн (responsive Web design, RWD) — такой подход к проектированию веб-сайтов, который обеспечивает приемлемое зрительное восприятие на устройствах всех форм-факторов с помощью единой кодовой базы. После обзора я рассмотрю некоторые факторы, которые могут помочь решить, подходит ли для вашего сайта инфраструктура вроде Bootstrap.

Начало всех начал

Потребовался определенный виток эволюции, чтобы индустрия программного обеспечения вышла в ту точку, где появляются решения вроде Bootstrap. После фальстарта в 1998 году, когда сначала появлялись, а потом исчезали Wireless Markup Language (WML), Compact HTML и XHTML Mobile Profile, в 2009 году HTML5 наконец стал стандартом HTML нового поколения для всех устройств. Но одних стандартов не достаточно. Пока шло развитие стандарта для веб-разметки на мобильных устройствах, были достигнуты значительные успехи в аппаратном обеспечении, мобильных браузерах и пропускной способности сетей. Процессоры стали быстрее, мобильные браузеры продвинулись до такого состояния, что могли отображать любую веб-страницу (даже если страница не была рассчитана на мобильное устройство). Это создало новую среду для разработчиков.

Разработчики любят создавать инструменты для других разработчиков, и мобильная Web не является исключением. Сегодня на рынке предлагается более десятка разных инфраструктур UI. Было бы нечестно отметить одну из этих инфраструктур как лучшую, потому что существуют разные подходы, а разные веб-сайты предъявляют разные требования. Я выбрал Bootstrap для этой статьи, поскольку она достаточно распространена, полностью документирована и включается в шаблоны ASP.NET Web Application.

Что такое Bootstrap?

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

Если вы предпочитаете использовать новейшие версии Bootstrap и JQuery, обновляйте свой проект с помощью NuGet.

Bootstrap многое делает за вас автоматически. Она также позволяет легко адаптировать поведение по умолчанию для конкретного форм-фактора, в то же время сохраняя хороший вид вашей страницы на других форм-факторах. Bootstrap версии 3 поставляется с CSS-классами, специально ориентированными на те размеры экранов, с которыми имеют дело мобильные, планшетные, настольные браузеры и даже браузеры на ПК с очень большими экранами. Вы можете использовать CSS-классы Bootstrap для аннотирования HTML5-элементов. К числу наиболее часто применяемых CSS-классов относится сетчатая система (grid system) в Bootstrap — набор классов, организующих разметку страницы с использованием строк и столбцов. Я опишу эту систему подробнее далее в этой статье.

В Bootstrap есть ряд UI-компонентов для создания UI сайта, включая раскрывающееся меню кнопки (Button dropdown), группу Button, раскрывающийся список (Dropdown), Navbar, Breadcrumb, объект Media, панели Pagination и Progress и многие другие. Большинство этих компонентов сами являются адаптивными, т. е. они по-разному визуализируются в зависимости от ширины экрана, поддерживаемой браузером. Например, Navbar — мощный компонент, который автоматически переходит от строки меню на всю ширину экрана на настольных компьютерах, в которой показываются пункты меню, к симпатично выглядящей компактной версии, которая предоставляет пункты меню через раскрывающуюся полоску меню, активируемую касанием Navbar.

Для поддержки более продвинутых UI-средств в Bootstrap также имеется набор пользовательских плагинов JQuery, в том числе Carousel, сворачиваемая панель (Collapsible panel), модальные диалоговые запросы (Modal dialog prompts) и всплывающие сообщения (Popover messages).

Приступаем

Bootstrap CSS- и JavaScript-файлы автоматически включаются в ваш проект при использовании шаблона ASP.NET Web Application в Visual Studio 2013. Диалог New Project для шаблонов Web Application показан на рис. 1. Bootstrap также требует JQuery. Получая Bootstrap из шаблона Web Application в Visual Studio 2013, вы на самом деле получаете Bootstrap v3. 0.0 с JQuery v1.10.2. Если вы применяете шаблоны для Visual Studio 2012, эти файлы не включаются в ваш проект. Кроме того, Bootstrap не включается автоматически, если вы создаете новый веб-сайт через File | New Web Site.

Рис. 1. Диалог New Project в Visual Studio 2013 для шаблона ASP.NET Web Application

Если вы предпочитаете использовать новейшие версии Bootstrap и JQuery, обновляйте свой проект с помощью NuGet. Более того, NuGet позволяет получить Bootstrap, если вы располагаете версией Visual Studio до Visual Studio 2013. На сайте Bootstrap (getbootstrap.com) показывается, как подключиться к версии Bootstrap, размещенной в CDN, что может существенно повысить производительность.

Эксперименты с сетчатой системой Bootstrap

Bootstrap предоставляет так называемую 12-столбчатую адаптивную разметку. Вы можете размечать свои страницы, используя любое количество строк, но должны использовать 12 столбцов. Эти 12 столбцов получают одинаковый размер по всей ширине окна браузера, и с помощью CSS-классов Bootstrap вы указываете, сколько столбцов должен занимать тот или иной HTML-элемент. Этот тип сетчатой системы отличается от той, к которой привыкли XAML-разработчики в Windows Phone и Windows 8. Сетчатая система XAML разрешает создавать в разметке страницы любое количество строк и столбцов. Разработчики помещают каждый элемент управления в ячейку, указывая номера строки и столбца. Что делает сеточную систему Bootstrap особенно мощной, так это возможность указывать разные объединения колонок (column span) для больших и обычных настольных ПК, планшетов и смартфонов. Например, распространенный шаблон разметки заключается в создании серии div, причем для каждого div указывается, что тот должен занимать два столбца на большом настольном ПК (т. е. на каждой строке умещается по шесть div), три столбца на обычном настольном ПК, четыре — на планшете и шесть — на смартфоне (с двумя div на строку). Этот сценарий кодируется на рис. 2, используя классы col*, которые составляют сеточную систему Bootstrap. Классы цветов (gray, orange и т. д.) просто окрашивают фон div. На рис. 3 и 4 показано, как эта страница будет визуализироваться на настольном ПК и смартфоне соответственно.

{Для верстки: этот листинг придется дать с наездом на соседнюю колонку}

Рис. 2. Распространенный шаблон разметки с использованием сеточной системы Bootstrap

<body>
  <div>
    <hr />
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
  </div> <!-- /container -->
</body>

Рис. 3. Пример визуализации разметки с рис. 2 на настольном ПК, используя класс col-md-3

Рис. 4. Пример визуализации разметки с рис. 2 на смартфоне, используя класс col-xs-6

Важно отметить, что Bootstrap на самом деле не распознает тип устройства. Bootstrap использует media-запросы, чтобы определить, следует ли применить какой-то CSS-класс. В табл. 1 перечислены четыре категории классов наряду с диапазонами ширины, которые вызывают применение каждой из категорий.

Табл. 1. Категории классов в сеточной системе Bootstrap

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

<div>
  {Здесь размещаются другие HTML-элементы. } </div>

Это эквивалентно следующему псевдокоду:

If ширина окна браузера менее 768 пикселей, этот div будет охватывать 6 из 12 доступных столбцов, что займет половину (6/12) экрана
Else if ширина окна браузера находится между 768 и 991 пикселями, этот div будет охватывать 4 из 12 доступных столбцов, что займет треть (4/12) экрана
Else if ширина окна браузера находится между 992 и 1200 пикселями, этот div будет охватывать 3 из 12 доступных столбцов, что займет четверть (3/12) экрана
Else if ширина окна браузера более 1200 пикселей, этот div будет охватывать 2 из 12 доступных столбцов, что займет одну шестую экрана (2/12)

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

<div> {HTML-элементы здесь. } </div>

Bootstrap содержит более 20 компонентов, которые можно использовать «как есть» или расширить под свои требования.

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

<div> {HTML-элементы здесь.} </div>

Заметьте, что на рис. 2 эти строки не указаны. Сеточная система Bootstrap будет автоматически смещать div в следующую строку, если текущая строка уже используется или если недостаточно места для div. Вы можете принудительно заставить использовать новую строку с помощью класса row:

<div>
  {Сюда поместите столбцы.}
</div>

Почему 12 столбцов? Может показаться, что это число было выбрано случайным образом, но это не так. Число 12 обеспечивает любую кратность деления и открывает широкий простор для сочетаемости. Например, 12 без остатка делится на 1, 2, 3, 4, 6 и 12. Используя эти значения для диапазонов столбцов, можно получать разметку контента на 12 столбцов, 6, 4, 2 и 1 соответственно. Более того, такие комбинации, как 3+9, 9+3, 4+8 и 8+4 являются визуально привлекательными для разметки контента.

Компоненты Bootstrap

Bootstrap содержит более 20 компонентов, которые можно использовать «как есть» или расширить под свои требования. Посмотрите на сайте Bootstrap описание каждого компонента и примеры их использования. В документации по объекту Media для демонстрации используется музыкальный видеоролик REO Speedwagon. Даже если вы не застали 80-е, послушать эту группу стоит.

Компонент Navbar я рассмотрю подробнее — он используется для создания строки меню вверху страницы. На рис. 5 показано, как с помощью этого компонента создать простое меню, содержащее значок сайта и несколько пунктов меню. Если ширина экрана браузера более 768 пикселей, Navbar визуализируется, как на рис. 6, а если она меньше 768 пикселей — как на рис. 7. В данном случае пункты меню отображаются, когда пользователь касается кнопки, содержащей горизонтальные линии.

Рис. 5. Использование Bootstrap-компонента Navbar

<nav>
  <div>
    <div>
      <button type="button"
        data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a href="#">Brand</a>
    </div>
    <div
     >
      <ul>
        <li><a href="#">Link 1
          <span>(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /. container-fluid -->
</nav>

Рис. 6. Визуализация Navbar в браузере на экране, ширина которого больше или равна 768 пикселям

Рис. 7. Визуализация Navbar в браузере на экране, ширина которого меньше 768 пикселей

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

Плагины JQuery

В Bootstrap более десятка плагинов JQuery, которые документированы на вкладке JavaScript сайта Bootstrap. На первый взгляд они кажутся функционально похожими на описанные в предыдущем разделе компоненты в том плане, что это CSS-классы, дополняющие HTML5-элементы. Однако эти CSS-классы инициируют операции JQuery при рендеринге HTML-элемента или при различных событиях, генерируемых HTML-элементом. Страницы, интенсивно использующие эти плагины, следует тестировать на производительность, особенно на устройствах с медленными процессорами и ограниченной памятью.

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

На рис. 8 показано, как использовать плагин Carousel, который предоставляет функциональность для слайд-шоу. Если в вашей странице уже есть ссылка на bootstrap.js или bootstrap.min.js, все готово. Или же можно сослаться на carousel.js, если Carousel — единственный плагин, нужный вашей странице.

Рис. 8. Использование плагина Carousel

<div
  data-ride="carousel">
  <!-- Индикаторы -->
  <ol>
    <li data-target="#carousel-example-generic"
      data-slide-to="0"></li>
    <li data-target="#carousel-example-generic"
      data-slide-to="1"></li>
    <li data-target="#carousel-example-generic"
      data-slide-to="2"></li>
  </ol>
  <!-- Оболочка для содержимого слайда -->
  <div role="listbox">
    <div>
      <img src=". .." alt="...">
      <div>
        ...
      </div>
    </div>
    ...Для краткости представлен только один слайд
  </div>
  <!-- Элементы управления -->
  <a
    href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span
      aria-hidden="true"></span>
    <span>Previous</span>
  </a>
  <a
    href="#carousel-example-generic" role="button"
    data-slide="next">
    <span
      aria-hidden="true"></span>
    <span>Next</span>
  </a>
</div>

На рис. 9 видно, как визуализируется плагин Carousel в Windows Phone. Плагин Carousel самостоятельно растягивается под форм-факторы планшетов и настольных ПК (обычных и с большими экранами).

Рис. 9. Пример с плагином Carousel, визуализированным в эмуляторе Windows Phone

Некоторые соображения

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

1. Если у вас есть сайт, производительность которого оптимизировалась годами, и он оптимален для ваших пользователей, будьте крайне осторожны. Хорошая идея — создать прототипы сложных, часто используемых страниц. Если страница с поддержкой Bootstrap, на дает адекватной производительности, подумайте о подготовке мобильного сайта (m-site) и кодируйте все самостоятельно. В статье Дино Эспозито (Dino Esposito) «Mobilize an Existing Web Site» (bit.ly/1CaVEWR) оказано, как подготовить мобильный сайт.
2. Если вы создаете новый сайт, сделайте прототипы самых сложных страниц и страниц, которые, по вашему мнению, будут использоваться наиболее часто. Убедитесь, что они хорошо работают на дешевых устройствах и в условиях малой пропускной способности сети. Если эти страницы окажутся проблематичными, попробуйте изменить их так, чтобы они работали с адекватной производительностью. Как вариант можно создать мобильный сайт, но это следует делать, только если переработка не помогла.
3. Убедитесь, что сеточная система и компоненты Bootstrap, используемые для навигации, не являются слишком ограничивающими факторами в отношении дизайна сайта. На мой взгляд, инструмент подобный Bootstrap заставляет вас проектировать в расчете на мобильные устройства, что в свою очередь заставляет избегать загромождения страниц сайта.

Дополнительная информация и инструменты

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

• Bootswatch (bootswatch.com) — содержит бесплатные темы для Bootstrap;
• Wrap Bootstrap (wrapbootstrap.com) — содержит недорогие темы и шаблоны для Bootstrap;
• Font Awesome (fontawesome.io) — сайт, который предоставляет бесплатные масштабируемые векторные значки, легко адаптируемые с помощью CSS;
• статью «Deploy an ASP.NET MVC 5 Mobile Web Application on Azure Websites» (bit.ly/1CMOGwq), в которой показывается, как применить Bootstrap к существующему веб-сайту, чтобы сделать его дружественным к мобильным устройствам. В этой статье также демонстрируется развертывание сайта в Microsoft Azure.

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

Заключение

Материал, изложенный в этой статье, является лишь кратким обзором UI-инфраструктуры Bootstrap. Здесь нет полного описания всех CSS-классов, компонентов и плагинов, поставляемых с Bootstrap. Чтобы получить полное представление обо всех доступных средствах и изучить примеры страниц, демонстрирующие различные виды дизайна пользовательских сред, посетите сайт Bootstrap. Эти примеры служат хорошей отправной точкой, если вы хотите понять, что можно делать с помощью Bootstrap.

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

Кит Пижиновски (Keith Pijanowski) имеет более чем 20-летний опыт работы в индустрии ПО. Работал в начинающих и крупных компаниях на самых разных должностях и занимался всем — от написания кода до развития бизнеса. В настоящее время является инженером и частным предпринимателем. С ним можно связаться по адресу [email protected] ли через twitter.com/keithpij.

Выражаю благодарность за рецензирование статьи эксперту Microsoft Рику Андерсону (Rick Anderson) и Сифасу Лину (Cephas Lin).

JavaScript · Bootstrap

Индивидуальные или скомпилированные

Плагины могут быть включены по отдельности (используя отдельные файлы Bootstrap *.js ) или все сразу (используя bootstrap.js или уменьшенный bootstrap.min.js ) .

Использование скомпилированного JavaScript

И bootstrap.js , и bootstrap.min.js содержат все плагины в одном файле. Включить только один.

Зависимости подключаемых модулей

Некоторые подключаемые модули и компоненты CSS зависят от других подключаемых модулей. Если вы включаете плагины по отдельности, обязательно проверьте наличие этих зависимостей в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен до файлов плагинов). Обратитесь к нашему bower.json , чтобы узнать, какие версии jQuery поддерживаются.

Атрибуты данных

Вы можете использовать все плагины Bootstrap исключительно через API разметки, не написав ни одной строки JavaScript. Это первоклассный API Bootstrap, и его следует учитывать в первую очередь при использовании плагина.

Тем не менее, в некоторых ситуациях может быть желательно отключить эту функцию. Поэтому мы также предоставляем возможность отключить API атрибутов данных, отвязав все события в документе с пространством имен 9.0005 API данных . Это выглядит так:

 $(document). off('.data-api') 

В качестве альтернативы, чтобы указать конкретный подключаемый модуль, просто включите имя подключаемого модуля в качестве пространства имен вместе с пространством имен data-api, например:

 $(document).off('.alert.data-api') 

Programmatic API

Мы также считаем, что вы должны иметь возможность использовать все подключаемые модули Bootstrap исключительно через JavaScript API. Все общедоступные API-интерфейсы представляют собой отдельные методы с возможностью цепочки и возвращают коллекцию, над которой действуют.

 $('.btn.danger').button('toggle').addClass('fat') 

Все методы должны принимать необязательный объект опций, строку, предназначенную для определенного метода, или ничего (что инициирует плагин с поведением по умолчанию):

 $('#myModal').modal() // инициализирован со значениями по умолчанию
$('#myModal').modal({ keyboard: false }) // инициализируется без клавиатуры
$('#myModal'). modal('show') // инициализирует и немедленно вызывает шоу 

Каждый плагин также предоставляет свой исходный конструктор на Конструктор свойство: $.fn.popover.Конструктор . Если вы хотите получить определенный экземпляр плагина, извлеките его непосредственно из элемента: $('[rel="popover"]').data('popover') .

Настройки по умолчанию

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

 $.fn.modal.Constructor.DEFAULTS.keyboard = false // изменяет значения по умолчанию для модального плагина ` опция клавиатуры на false 

Нет конфликта

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

 var bootstrapButton = $.fn.button.noConflict() // вернуть $.fn.button к ранее присвоенному значению
$.fn.bootstrapBtn = bootstrapButton // дать $().bootstrapBtn функциональность Bootstrap 

Events

Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени, где инфинитив (например, показывает ) запускается в начале события, а его форма причастия прошедшего времени (например, показывает ) запускается при завершении события. действие.

Начиная с версии 3.0.0, все события Bootstrap имеют пространство имен.

Все инфинитивные события обеспечивают функциональность preventDefault . Это дает возможность остановить выполнение действия до его начала.

 $('#myModal').on('show.bs.modal', функция (e) {
  if (!data) return e.preventDefault() // останавливает показ модального окна
}) 

Номера версий

Доступ к версии каждого плагина Bootstrap jQuery можно получить через свойство VERSION конструктора плагина. Например, для плагина всплывающей подсказки:

 $.fn.tooltip.Constructor.VERSION // => "3.3.7" 

Нет специальных запасных вариантов, когда JavaScript отключен

Плагины Bootstrap не очень изящно отступают, когда JavaScript выключен. Если вы заботитесь о пользовательском опыте в этом случае, используйте

Сторонние библиотеки

Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI. Несмотря на .noConflict и события, связанные с пространством имен, могут возникнуть проблемы совместимости, которые необходимо устранить самостоятельно.

О переходах

Для простых эффектов перехода включите transition.js один раз вместе с другими файлами JS. Если вы используете скомпилированный (или минимизированный) bootstrap. js , нет необходимости включать его — он уже есть.

Что внутри

Transition.js — это базовый помощник для событий transitionEnd , а также эмулятор перехода CSS. Он используется другими подключаемыми модулями для проверки поддержки переходов CSS и обнаружения зависших переходов.

Отключение переходов

Переходы можно глобально отключить с помощью следующего фрагмента JavaScript, который должен идти после transition.js (или bootstrap.js или bootstrap.min.js , в зависимости от обстоятельств) загружен:

 $.support.transition = false 

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

Несколько открытых модальных окон не поддерживаются

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

Размещение модальной разметки

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

Предупреждения для мобильных устройств

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

Из-за того, как HTML5 определяет свою семантику, HTML-атрибут autofocus не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный код JavaScript:

 $('#myModal').on('show.bs.modal', функция () {
  $('#myInput').фокус()
}) 

Примеры

Статический пример

Модальное окно с заголовком, телом и набором действий в нижнем колонтитуле.

Одно прекрасное тело…

 

  

    <дел>
      <дел>
        ×
         
Модальное название
 
      
      <дел>
        
Одно прекрасное тело…
      
      <дел>
        Закрыть
        Сохранить изменения