Question

基本上经过一系列的工作后，我终于设法在ASP.NET MVC4项目中启动并运行Bootstrap。

这是我的文件夹结构：

enter image description here

这是我的bundleconfig：

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

            bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include(
                        "~/Scripts/bootstrap.js"));

            bundles.Add(new ScriptBundle("~/Content/bootstrapcss").Include(
                        "~/Content/bootstrap.css",
                        "~/Content/bootstrap-responsive.css"));
         }

但是，当我尝试添加带有图标的HTML元素时：

<button type="submit" class="btn"><i class="icon-search"></i></button>

图标不会出现。

Answer 1

最后一个包需要是StyleBundle，而不是ScriptBundle。以下是我的一个项目的例子：

bundles.Add(new StyleBundle("~/bundles/css").Include(
                        "~/content/css/bootstrap.min.css",
                        "~/content/css/font-awesome.min.css",
                        "~/content/css/common.css"));

我应该注意，我将CSS文件组织到一个特定的文件夹中，这个特定的项目使用FontAwesome代替Glyphicons。

从注释中可以看出，默认的Bootstrap包假定CSS文件位于一个文件夹中，并且图标sprite文件位于与CSS文件夹相同级别的另一个文件夹中。基于该假设，精灵的路径设置为"../img/glyphicons-halflings.png"。如果您的文件不在同一个位置，则需要手动编辑路径，或使用 Customizer 构建一个下载文件，其中包含明暗路径精灵文件的版本。

如何在ASP.NET MVC4中包含Bootstrap图标？

1 个答案: