ASP.NET MVC4 Связывание с Twitter Bootstrap

Question

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

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, они становятся неработающими ссылками.

Мы перебазирование URLs в CSS на нашем список дел, но сейчас Самое лёгкое, что нужно сделать, это иметь свой путь расслоения выглядеть каталог CSS, так что относительные адреса просто работать, а именно:

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

Answer 2

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

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

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

Другой альтернативой является, чтобы загрузить все файлы МЕНЬШЕ от github, измените те же переменные в variables.less файл и перекомпилируйте bootrap.less файл с инструментом, похожим на SimpLESS.

Answer 3

«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)); 
    } 
} 

UPDATE: благодаря superjos, который указал, что было еще одно решение там:

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

Answer 4

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

Вобще:

1. Install-Package AspNetBundling
2. Заменить CssRewriteUrlTransform с CssRewriteUrlTransformFixed