Создание прекрасного стиля вместе: Visual Studio и Bootstrap

Bootstrap - это популярный подход для стандартизации стиля для настольных и мобильных веб-сайтов. Но начало может быть запутанным. В этой статье вы узнаете, как начать работу с Bootstrap с помощью Microsoft Visual Studio Community 2015 Edition (VSCE), бесплатной версии флагманской среды разработки Microsoft. (Если вы еще не знакомы с VSCE, см. « Получение бесплатного, но мощного инструмента для веб-разработки: Visual Studio Community 2015 Edition ”, Чтобы узнать, как загрузить и установить его.) После этого вы увидите, как применить Bootstrap к существующему сайту, чтобы сделать его популярным.

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

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

Сначала вам нужно Visual Studio Community 2015 Edition. Далее вам нужно создать проект в Visual Studio. Просто запустите Visual Studio и в меню выберите Файл / Новый проект (или нажмите Ctrl + Shift + N ).

Внизу слева в разделе « Шаблоны» откройте Visual C # и нажмите « Веб» . Теперь нажмите, чтобы выбрать ASP.NET Web Application . Дайте проекту название внизу и нажмите ОК .

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

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


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

Поскольку мы будем использовать простой HTML / JavaScript, нажмите кнопку « Очистить» . Мы просто добавим страницы по мере необходимости.

Нажмите ОК .

Вы можете или не можете видеть это диалоговое окно.

Этот диалог является напоминанием о том, что Microsoft Azure является платформой облачных вычислений, которая предоставляет целый ряд функций и возможностей для хостинга, поддержки и мониторинга работоспособности вашего сайта. Тесная интеграция с Visual Studio делает его очень хорошим вариантом для многих разработчиков. Если вы заинтересованы в дальнейшем изучении Microsoft Azure, вы можете получить бесплатную пробную версию по адресу http://azure.microsoft.com/en-us/pricing/free-trial/ , Вы также можете узнать больше о размещении своего сайта в Azure, прочитав « Итак, вы хотите создать и развернуть веб-приложение в облаке - с минимальными затратами »

Теперь для наших целей нажмите кнопку « Нет, спасибо …» под кнопкой « Войти» . Ваш проект будет создан, и вы готовы начать.

Далее вам понадобится сам Bootstrap. А благодаря диспетчеру пакетов NuGet в Visual Studio этот процесс совсем несложный.

В обозревателе решений справа щелкните, чтобы выбрать имя вашего проекта (оно должно быть вторым сверху под именем решения). Теперь из меню выберите Project / Manage NuGet Packages ...

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

Нажмите, чтобы выбрать начальную загрузку, а затем нажмите кнопку Установить . Visual Studio теперь загружает Bootstrap, извлекает его и устанавливает CSS, JavaScript и файлы шрифтов в ваш проект. Теперь в верхней части вкладки выберите, нажмите раскрывающийся список «Фильтр» и выберите « Установлено» слева от диалогового окна.

Здесь вы видите, что Bootstrap установил и еще одну вещь - jQuery. Зачем? Одна из вещей, которые Visual Studio сделал, когда вы запросили установку Bootstrap, - посмотреть, зависит ли Bootstrap от каких-либо других библиотек. В этом случае требуется JQuery. Так что сначала он установил jQuery, а затем установил Bootstrap. Пакеты NuGet доступны практически для любой библиотеки, которая вам может понадобиться.

Как вы можете видеть, диспетчер пакетов NuGet в Visual Studio делает трудоемкий и подверженный ошибкам процесс столь же быстрым и простым, как поиск и щелчок.

В обозревателе решений обратите внимание на новые папки в вашем проекте.

В обозревателе решений обратите внимание на новые папки в вашем проекте

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

Зачем?