ASP.NET MVC4 Объединение с Twitter Bootstrap

Я пытаюсь использовать новую функцию связывания в MVC 4 с загрузочной загрузкой Twitter, и мне кажется, что это путь к файлам png файлов glyphicons, в которых css каким-то образом запутался. Вот мой код:

 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"));

Я не вижу иконки на кнопках и аналогично. Я здесь что-то не так? Любые предложения?

ОТВЕТЫ

Ответ 1

Вероятно, проблема в том, что значки/изображения в файлах css используют относительные пути, поэтому, если ваш пакет не живет в том же относительном пути приложения, что и ваши разделенные файлы css, они становятся неработающими ссылками.

У нас есть перезагрузка URL-адресов в css в списке todo, но на данный момент проще всего сделать так, чтобы ваш путь пакета выглядел как каталог css, поэтому относительные URL-адреса просто работают, то есть:

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

Обновление: Мы добавили поддержку этого в версию 1.1beta1, поэтому для автоматической перезаписи URL-адресов изображений вы можете добавить новый 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()));

Ответ 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));
    }
}

ОБНОВЛЕНИЕ: благодаря суперджосам, которые указали, что это еще одно решение:   

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

Ответ 3

Что вы можете сделать, так это перейти к настройке страница и изменить @iconSpritePath и @iconWhiteSpritePath в Sprites и, конечно же, загрузите новый стиль.

Я поместил свои изображения в папку Content/Images, и я изменил путь в:

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

Другой альтернативой является загрузка всех LESS файлов из github, изменение тех же переменных в variables.less и перекомпилируйте файл bootrap.less с помощью инструмента, такого как SimpLESS.

Ответ 4

Исправление для этого теперь добавлено в мой AspNetBundling пакет NuGet, который разрешает кучу других проблем в стандартном трансформаторе, особенно вокруг использования данных -uris. Open-sourced на GitHub тоже.

Просто выполните:

  • Install-Package AspNetBundling
  • Замените CssRewriteUrlTransform на CssRewriteUrlTransformFixed