Как подключить бутстрап к visual studio
Это лишь вопрос времени, когда какой-нибудь пользователь наберет 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 нового поколения для всех устройств. Но одних стандартов не достаточно. Пока шло развитие стандарта для веб-разметки на мобильных устройствах, были достигнуты значительные успехи в аппаратном обеспечении, мобильных браузерах и пропускной способности сетей. Процессоры стали быстрее, мобильные браузеры продвинулись до такого состояния, что могли отображать любую веб-страницу (даже если страница не была рассчитана на мобильное устройство). Это создало новую среду для разработчиков.
Что такое 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.
Приступаем
Эксперименты с сетчатой системой 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
.jpg)
Рис. 3. Пример визуализации разметки с рис. 2 на настольном ПК, используя класс col-md-3
.jpg)
Рис. 4. Пример визуализации разметки с рис. 2 на смартфоне, используя класс col-xs-6
Важно отметить, что Bootstrap на самом деле не распознает тип устройства. Bootstrap использует media-запросы, чтобы определить, следует ли применить какой-то CSS-класс. В табл. 1 перечислены четыре категории классов наряду с диапазонами ширины, которые вызывают применение каждой из категорий.
Табл. 1. Категории классов в сеточной системе Bootstrap
| Префикс категории | Форм-фактор | Ширина в пикселях |
| col-xs-* | Смартфон | Менее 768 |
| col-sm-* | Планшет | 768–991 |
| col-md-* | Обычный настольный ПК | 992–1200 |
| col-lg-* | Большой настольный ПК | Более 1200 |
Вы можете использовать любую комбинацию этих категорий при разметке конкретного HTML-элемента. Например, следующая строка кода использует один класс из каждой категории:
Это эквивалентно следующему псевдокоду:
Вы не обязаны явно указывать счетчик столбцов для каждой категории. Если вы не задаете его для конкретной категории, будет использоваться следующая категория с меньшим размером. Например, если бы вы хотели иметь уникальную разметку для смартфонов, но пригодную для планшетов и настольных ПК (обычных и больших), то достаточно указать класс для смартфона и планшета:
Bootstrap содержит более 20 компонентов, которые можно использовать «как есть» или расширить под свои требования.
Bootstrap будет использовать настройку планшета для обоих форм-факторов настольных ПК. Кроме того, класс по умолчанию для смартфонов — col-xs-12, который помещает каждый div в свою строку. Если это приемлемая разметка для смартфона, предыдущую строку кода можно сократить до:
Заметьте, что на рис. 2 эти строки не указаны. Сеточная система Bootstrap будет автоматически смещать div в следующую строку, если текущая строка уже используется или если недостаточно места для div. Вы можете принудительно заставить использовать новую строку с помощью класса row:
Почему 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
.jpg)
Рис. 6. Визуализация Navbar в браузере на экране, ширина которого больше или равна 768 пикселям
.jpg)
Рис. 7. Визуализация Navbar в браузере на экране, ширина которого меньше 768 пикселей
Очевидно, что это очень простой пример. Navbar также может содержать кнопки с раскрывающимися меню и даже включать функциональность поиска. Кроме того, Brand-часть Navbar, которая в примере является текстовой, может быть изображением.
Плагины JQuery
JavaScript, необходимый для запуска этих плагинов, находится в bootstrap.js. Каждый плагин также доступен как отдельный файл, что позволяет включать лишь те плагины, которые требуются приложению, а это ускоряет рендеринг первой страницы.
На рис. 8 показано, как использовать плагин Carousel, который предоставляет функциональность для слайд-шоу. Если в вашей странице уже есть ссылка на bootstrap.js или bootstrap.min.js, все готово. Или же можно сослаться на carousel.js, если Carousel — единственный плагин, нужный вашей странице.
Рис. 8. Использование плагина Carousel
На рис. 9 видно, как визуализируется плагин Carousel в Windows Phone. Плагин Carousel самостоятельно растягивается под форм-факторы планшетов и настольных ПК (обычных и с большими экранами).
.jpg)
Рис. 9. Пример с плагином Carousel, визуализированным в эмуляторе Windows Phone
Некоторые соображения
Как я уже говорил, Bootstrap не годится на все случаи жизни. Чтобы определить, подходит ли Bootstrap для вашего сайта, продумайте несколько соображений.
- Если у вас есть сайт, производительность которого оптимизировалась годами, и он оптимален для ваших пользователей, будьте крайне осторожны. Хорошая идея — создать прототипы сложных, часто используемых страниц. Если страница с поддержкой Bootstrap, на дает адекватной производительности, подумайте о подготовке мобильного сайта (m-site) и кодируйте все самостоятельно. В статье Дино Эспозито (Dino Esposito) «Mobilize an Existing Web Site» (bit.ly/1CaVEWR) оказано, как подготовить мобильный сайт.
- Если вы создаете новый сайт, сделайте прототипы самых сложных страниц и страниц, которые, по вашему мнению, будут использоваться наиболее часто. Убедитесь, что они хорошо работают на дешевых устройствах и в условиях малой пропускной способности сети. Если эти страницы окажутся проблематичными, попробуйте изменить их так, чтобы они работали с адекватной производительностью. Как вариант можно создать мобильный сайт, но это следует делать, только если переработка не помогла.
- Убедитесь, что сеточная система и компоненты Bootstrap, используемые для навигации, не являются слишком ограничивающими факторами в отношении дизайна сайта. На мой взгляд, инструмент подобный Bootstrap заставляет вас проектировать в расчете на мобильные устройства, что в свою очередь заставляет избегать загромождения страниц сайта.
Дополнительная информация и инструменты
Если вы собираетесь разрабатывать свой сайт с применением Bootstrap, вам стоит изучить все компоненты и плагины JQuery, документированные на сайте Bootstrap, где также имеется множество полезных примеров. Также вам следует проверить:
Убедитесь, что сеточная система и компоненты Bootstrap, используемые для навигации, не являются слишком ограничивающими факторами в отношении дизайна сайта.
Заключение
Материал, изложенный в этой статье, является лишь кратким обзором UI-инфраструктуры Bootstrap. Здесь нет полного описания всех CSS-классов, компонентов и плагинов, поставляемых с Bootstrap. Чтобы получить полное представление обо всех доступных средствах и изучить примеры страниц, демонстрирующие различные виды дизайна пользовательских сред, посетите сайт Bootstrap. Эти примеры служат хорошей отправной точкой, если вы хотите понять, что можно делать с помощью Bootstrap.
Прежде чем переходить к разработке на основе Bootstrap или любой другой инфраструктуры, примите во внимание такие факторы, как производительность и удобство в использовании. Создание прототипов основных страниц — лучший способ убедиться, что Bootstrap можно интегрировать в ваш сайт и добиться нужных вам результатов.
Выражаю благодарность за рецензирование статьи эксперту Microsoft Рику Андерсону (Rick Anderson) и Сифасу Лину (Cephas Lin).
Bootstrap представляет собой css-фреймворк для создания адаптивных веб-приложений. Проект Bootstrap изначально был создан и развивался разработчиками из Twitter для собственных нужд, однако затем вышел за границы твиттера и в настоящее время развивается как open source-проект и является одним из самых популярных фреймворков для создания веб-приложений. Что в принципе и неудивительно: в настоящее время все растет количество пользователей мобильного интернета, все больше людей для веб-серфинга используют смартфоны, планшеты. Что в итоге привело к увеличению числа сайтов с адаптивным дизайном и соответственно к увеличению популярности средств для разработки подобных сайтов, в том числе фреймворка Bootstrap.
Функциональность Bootstrap заключена в файле стилей bootstrap.css и скрипте bootstrap.js. И если мы откроем мастер-страницу _Layout.cshtml, которая идет по умолчанию в проекте, то мы увидим подключение соответствующих библиотек:
/Content/css") подключает необходимые стили, в том числе и bootstrap, а выражение @Scripts.Render("
/bundles/bootstrap") подключает скрипт bootstrap. Мы можем это увидеть, открыв файле BundleConfig.cs:
Также на мастер-странице мы можем увидеть использование таких классов css, как navbar, navbar-inverse, navbar-fixed-top и т.д. - все это классы bootstrap, которые позволяют адаптировать интерфейс страницы к различным устройствам. Например, запустим страницу в веб-браузере на ПК:
И если мы также запустим данное приложение на мобильном телефоне или эмуляторе, то мы увидим, что интерфейс по прежнему выглядит довольно неплохо:
Собственно в этом и преимущество использования Bootstrap. Основой для адаптивного дизайна стали правила media queries, которые описывают стилевые свойства элементов для различных разрешений экрана. С точки зрения разработчиков Bootstrap все устройства можно поделить на следующие группы:
Читайте также: