Как я могу реализовать тему из bootswatch или wrapbootstrap в проекте MVC 5?

Question 1

Я собираюсь создать новое веб-приложение ASP.Net MVC5. Я хотел бы использовать в приложении тему из bootswatch или wrapbootstrap, но не могу найти набор инструкций, как это сделать.

Question 2

Шаги по применению темы довольно просты. Чтобы действительно понять, как все работает вместе, вам необходимо понять, что шаблон ASP.NET MVC 5 предоставляет из коробки и как вы можете настроить его для своих нужд.

_{Примечание. Если у вас есть базовое представление о том, как работает шаблон MVC 5, прокрутите вниз до раздела тем.}

Шаблон ASP.NET MVC 5: как это работает

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

Создайте новый проект. В разделе «Шаблоны» выберите « Интернет» > « Веб-приложение ASP.NET» . Введите имя вашего проекта и щелкните OK.
В следующем мастере выберите MVC и щелкните OK. Это применит шаблон MVC 5.
Шаблон MVC 5 создает приложение MVC, которое использует Bootstrap для обеспечения адаптивного дизайна и функций тематики. Под капотом, шаблон включает в себя загрузочный 3. * NuGet пакет , который устанавливает 4 файла: bootstrap.css, bootstrap.min.css, bootstrap.js, и bootstrap.min.js.

Bootstrap входит в состав вашего приложения с помощью функции веб-оптимизации. Осматривайте Views/Shared/_Layout.cshtmlи ищите

@Styles.Render("~/Content/css")

и

@Scripts.Render("~/bundles/bootstrap")

Эти два пути относятся к пакетам, установленным в App_Start/BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js",
    "~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

Это то, что позволяет запускать ваше приложение без предварительной настройки. Попробуйте запустить свой проект прямо сейчас.

Применение тем Bootstrap в ASP.NET MVC 5

В этом пошаговом руководстве рассказывается, как применять темы начальной загрузки в проекте MVC 5.

Сначала загрузите cssтему, которую хотите применить. В этом примере я буду использовать Flatly от Bootswatch . Включите загруженный файл flatly.bootstrap.cssи flatly.bootstrap.min.cssв Contentпапку (не забудьте также включить в Project).

Откройте App_Start/BundleConfig.csи измените следующее:

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

чтобы включить новую тему:

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/flatly.bootstrap.css",
    "~/Content/site.css"));

Если вы используете значение по умолчанию, _Layout.cshtmlвключенное в шаблон MVC 5, вы можете перейти к шагу 4. Если нет, как минимум, включите эти две строки в свой макет вместе с шаблоном HTML Bootstrap :

В вашем <head>:
```
@Styles.Render("~/Content/css")
```
Последняя строка перед закрытием </body>:
```
@Scripts.Render("~/bundles/bootstrap")
```
Попробуйте запустить свой проект прямо сейчас. Теперь вы должны увидеть свое недавно созданное приложение, использующее вашу тему.

Ресурсы

Проверьте этот удивительный 30 день проходных руководства со стороны - Джеймс палатами для получения дополнительной информации, руководства, советы и приемы , о том , как использовать Twitter Bootstrap с ASP.NET MVC 5.

Question 3

Это может быть немного поздно; но кому-то это пригодится.

Существует пакет Nuget для интеграции популярного шаблона Bootstrap AdminLTE в MVC5.

Просто запустите эту команду в консоли диспетчера пакетов Visual Studio.

Install-Package AdminLteMvc

NB: Установка может занять некоторое время, поскольку она загружает все необходимые файлы, а также создает образцы полного и частичного представления (файлы .cshtml), которые помогут вам в разработке. Также предоставляется образец файла макета _AdminLteLayout.cshtml.

Вы найдете файлы в ~/Views/Shared/папке

Question 4

Во-первых, если вы можете найти свой

файл bootstrap.css

и

файл bootstrap.min.js

в вашем компьютере, тогда то, что вы делаете,

Сначала загрузите свою любимую тему с http://bootswatch.com/

Скопируйте загруженные bootstrap.css и bootstrap.min.js файлы

Затем на вашем компьютере найдите существующие файлы и замените их новыми загруженными файлами.

ПРИМЕЧАНИЕ: убедитесь, что загруженные файлы переименованы в то, что находится в вашей папке.

т.е.

Тогда вам хорошо.

иногда результат может отображаться не сразу. вам может потребоваться запустить css в вашем браузере, чтобы обновить

Question 5

У меня есть статья о MSDN - Создание ASP.NET MVC с настраиваемой темой / макетом начальной загрузки с использованием VS 2012, VS 2013 и VS 2015, а также прилагается демонстрационный образец кода. См. Ссылку ниже. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

Question 6

Все, что вам нужно сделать, это выбрать и загрузить файлы bootstrap.css и bootstrap.js с веб-сайта Bootswatch, а затем заменить ими исходные файлы.

Конечно, вы должны добавить пути к странице макета после пути jQuery, вот и все.

Question 7

Bootswatch - хорошая альтернатива, но вы также можете найти несколько типов бесплатных шаблонов, созданных для ASP.NET MVC, которые используют MDBootstrap (интерфейсный фреймворк, построенный поверх Bootstrap) здесь:

Шаблоны ASP.NET MVC MDB