ASP.NET MVC4捆绑Twitter Bootstrap

Question

我正在尝试使用Twitter引导程序在MVC 4中使用新的捆绑功能,在我看来,像css的字形png文件的路径以某种方式搞砸了.继承我的代码:

 bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css"));


        bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
            "~/Static/Js/jquery-1.7.2.js",
            "~/Static/Js/bootstrap/bootstrap.js",
            "~/Static/Js/cookie/jquery.cookie.js"));

我没有在按钮上看到任何图标,同样如此.我在这里做错了吗？有什么建议？

Answer 1

问题很可能是css文件中的图标/图像使用相对路径,因此如果您的捆绑包与非捆绑的css文件不在同一个应用程序相对路径中,则它们会成为断开的链接.

我们在todo列表中使用css中的rebase url,但是现在,最简单的方法是让你的bundle路径看起来像css目录,这样相对的url才能正常工作,即:

new StyleBundle("~/Static/Css/bootstrap/bundle")

更新:我们在1.1beta1版本中添加了对此的支持,因此要自动重写图像网址,您可以添加一个新的ItemTransform,它会自动执行此更改.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

Answer 2

'CssRewriteUrlTransform'适用于不在虚拟目录之上运行的应用程序.

所以,如果您的应用程序在http://your-site.com/上运行,它运行得很好,但是如果在http://your-site.com/your-app/上运行,您的所有图像都会有404,因为默认的'CssFixRewriteUrlTransform'用'/'引用你的图像.

为了解决这个问题,我已经实现了我自己的'CssRewriteUrlTransform'版本,如下所示:

    public class CssFixRewriteUrlTransform : IItemTransform {
    private static string ConvertUrlsToAbsolute(string baseUrl, string content) {
        if (string.IsNullOrWhiteSpace(content)) {
            return content;
        }
        var regex = new Regex("url\\(['\"]?(?<url>[^)]+?)['\"]?\\)");
        return regex.Replace(content, match => string.Concat("url(", RebaseUrlToAbsolute(baseUrl, match.Groups["url"].Value), ")"));
    }

    public string Process(string includedVirtualPath, string input) {
        if (includedVirtualPath == null) {
            throw new ArgumentNullException("includedVirtualPath");
        }
        var directory = VirtualPathUtility.GetDirectory(includedVirtualPath);
        return ConvertUrlsToAbsolute(directory, input);
    }

    private static string RebaseUrlToAbsolute(string baseUrl, string url) {
        if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase)) {
            return url;
        }
        if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase)) {
            baseUrl = string.Concat(baseUrl, "/");
        }
        return VirtualPathUtility.ToAbsolute(string.Concat(baseUrl, url));
    }
}

更新:感谢superjos指出那是另一种解决方案:

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}

Answer 3

您可以做的是您可以转到自定义页面@iconSpritePath并@iconWhiteSpritePath在Sprite中更改,当然还可以下载新样式.

我把我的图像放在文件Content/Images夹文件夹中,我改变了路径:

• /Content/Images/glyphicons-halflings.png
• /Content/Images/glyphicons-halflings-white.png

另一种方法是从下载所有的减档github上,更改相同的变量variables.less文件并重新编译bootrap.less与像一个工具文件SimpLESS.