Я собираюсь создать новое веб-приложение ASP.Net MVC5. Я хотел бы использовать в приложении тему из bootswatch или wrapbootstrap, но не могу найти набор инструкций, как это сделать.
asp.net-mvc
twitter-bootstrap
asp.net-mvc-5
bootswatch
Питер Лаудон
источник
источник
.cssвключите тему, а в App_Start BundleConfig.cs замените ее~/Content/bootstrap.cssна~/Content/yourtheme.bootstrap.cssОтветы:
Шаги по применению темы довольно просты. Чтобы действительно понять, как все работает вместе, вам необходимо понять, что шаблон 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.
источник
@Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css")Это может быть немного поздно; но кому-то это пригодится.
Существует пакет Nuget для интеграции популярного шаблона Bootstrap AdminLTE в MVC5.
Просто запустите эту команду в консоли диспетчера пакетов Visual Studio.
Install-Package AdminLteMvcNB: Установка может занять некоторое время, поскольку она загружает все необходимые файлы, а также создает образцы полного и частичного представления (файлы .cshtml), которые помогут вам в разработке. Также предоставляется образец файла макета
_AdminLteLayout.cshtml.Вы найдете файлы в
~/Views/Shared/папкеисточник
Во-первых, если вы можете найти свой
файл bootstrap.css
и
файл bootstrap.min.js
в вашем компьютере, тогда то, что вы делаете,
Сначала загрузите свою любимую тему с http://bootswatch.com/
Скопируйте загруженные bootstrap.css и bootstrap.min.js файлы
Затем на вашем компьютере найдите существующие файлы и замените их новыми загруженными файлами.
ПРИМЕЧАНИЕ: убедитесь, что загруженные файлы переименованы в то, что находится в вашей папке.
т.е.
Тогда вам хорошо.
иногда результат может отображаться не сразу. вам может потребоваться запустить css в вашем браузере, чтобы обновить
источник
У меня есть статья о MSDN - Создание ASP.NET MVC с настраиваемой темой / макетом начальной загрузки с использованием VS 2012, VS 2013 и VS 2015, а также прилагается демонстрационный образец кода. См. Ссылку ниже. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106
источник
Все, что вам нужно сделать, это выбрать и загрузить файлы bootstrap.css и bootstrap.js с веб-сайта Bootswatch, а затем заменить ими исходные файлы.
Конечно, вы должны добавить пути к странице макета после пути jQuery, вот и все.
источник
Bootswatch - хорошая альтернатива, но вы также можете найти несколько типов бесплатных шаблонов, созданных для ASP.NET MVC, которые используют MDBootstrap (интерфейсный фреймворк, построенный поверх Bootstrap) здесь:
Шаблоны ASP.NET MVC MDB
источник