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

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

Ответы

Ответ 1

Шаги по применению темы довольно просты. Чтобы действительно понять, как все работает вместе, вам нужно понять, что шаблон 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 для обеспечения гибкого дизайна и тематических функций. Под капотом шаблон включает 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 темы, которую вы хотите применить. В этом примере я буду использовать Bootswatch Flatly. Включите загруженные flatly.bootstrap.css и flatly.bootstrap.min.css в папку Content (обязательно включите в проект также).

Откройте 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:

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

Ресурсы

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

Ответ 2

Это может быть немного поздно; но кто-то найдет его полезным.

Там пакет Nuget для интеграции AdminLTE - популярного шаблона Bootstrap - в MVC5

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

Install-Package AdminLteMvc

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

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

Ответ 3

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

файл bootstrap.css

файл bootstrap.min.js

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

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

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

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

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

то есть.

Тогда тебе хорошо идти.

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

Ответ 4

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

Ответ 5

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

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