ZeenatAli Ответов: 2

Интеграция bootstrap с MVC

Приветствую!
Я учусь бутстрапу. Я создал шаблон bootstrap с помощью layoutit.com . Я хочу понять, какие изменения мне нужно сделать в index.cshtml и _layout.cshtml, чтобы реализовать созданный шаблон bootstrap в моем проекте VS2015 MVC.

С нетерпением жду ответа. Спасибо.

Что я уже пробовал:

Я включил css-файлы в папку content и js-файлы в папку script в своем решении. Я попытался добавить html-код, предоставленный layoutit.com на создание шаблона к моей странице index.schtml но разрознен разработанный Пафе. Я также попытался добавить css-ссылку на страницу index.cshtml следующим образом:
<link href="~/css/bootstrap.css" rel="stylesheet" />

Я зарегистрировал пакет стилей и скриптов в bundleconfig.cs следующим образом:
public class BundleConfig
   {
       public static void RegisterBundles(BundleCollection bundles)
       {
           StyleBundle(bundles);
           ScriptBundle(bundles);
       }

       public static void StyleBundle(BundleCollection bundles)
       {
           bundles.Add(new StyleBundle("~/css")
                    .Include("~/Content/bootstrap.css"));
       }

       public static void ScriptBundle(BundleCollection bundles)
       {
           bundles.Add(new ScriptBundle("~/js")
                    .Include("~/Scripts/jquery-1.10.2.js")
                    .Include("~/Scripts/bootstrap.js"));
       }
   }

2 Ответов

Рейтинг:
8

ZeenatAli

Вопрос решен. Я пропустил следующую часть:
Перейдите в общую папку.Напишите следующий код в файле _Layout.cshtml -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />

</head>
<body>

    <div class="container">
        @RenderBody()
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/Scripts/respond.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

Рейтинг:
0

Bryian Tan

Вот пример использования bootstrap на одной странице, скрипты и стили оформления должны быть одинаковыми.

Меню Начальной Загрузки[^]

Я вижу, что ваш код зарегистрировал пакет стилей и скриптов в bundleconfig. cs, но визуализировала ли его страница макета? Кроме того, проверьте расположение ваших стилей и скриптов, убедитесь, что файлы находятся в правильном месте.

@Styles.Render("~/css")
@Scripts.Render("~/js")

Я думаю, что эта ссылка неверна, должна ли она быть ~ / Content/bootstrap. css?
<link href="~/css/bootstrap.css" rel="stylesheet" />