在ASP.NET MVC应用程序中,如果要使用Bootstrap,您必须确保您正在包括所需的库和样式表。如果您只想在特定页面中使用Bootstrap,您必须确保在分配给这些页面的布局视图中包括Bootstrap样式表。如果您不包括这些,Bootstrap样式将显示在您不想展示它们的页面上。
以下是一个示例,展示如何将Bootstrap样式和JQuery库包含在ASP.NET MVC应用程序中:
在您的项目中,添加以下内容到您的BundleConfig.cs
文件,来定义通过捆绑器使用的样式表和脚本包:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
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"));
在您页面层次结构的顶层布局视图中,添加以下代码行来调用您刚刚在BundleConfig.cs
文件中定义的脚本和样式表:
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
这将确保您在所有页面中使用Bootstrap样式表和JQuery库的正确版本,并且这些仅在布局视图中出现。
参考文献: