Як я можу реалізувати тему із bootwatch або 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"));

Саме це дає змогу запускати вашу програму без будь-яких попередніх налаштувань. Спробуйте запустити свій проект зараз.

Застосування тем завантаження в ASP.NET MVC 5

Цей посібник охоплює, як застосовувати теми завантаження в проекті MVC 5

Спочатку завантажте cssтему, яку ви хочете застосувати. У цьому прикладі я буду використовувати Bootswatch's 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-шаблоном Bootstrap :

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

Ресурси

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

Question 3

Це може бути трохи пізно; але комусь це буде корисно.

Існує пакет Nuget для інтеграції AdminLTE - популярного шаблону Bootstrap - до MVC5

Просто запустіть цю команду на консолі Visual Studio Package Manager

Install-Package AdminLteMvc

Примітка. Установка може зайняти деякий час, оскільки вона завантажує всі необхідні файли, а також створює зразки повних та часткових подань (файли .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) тут:

Шаблони MDB для ASP.NET MVC