18 votos

ASP.NET MVC4 Agrupación con Twitter Bootstrap

Estoy tratando de utilizar la nueva agrupación característica en MVC 4 con Twitter bootstrap y me parece que las rutas de acceso a la glyphicons png archivos de tipo int el css obtener del mal estado de alguna manera. Heres mi código:

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

Yo no estoy viendo los iconos en los botones y de la misma manera. Estoy haciendo algo mal aquí? Alguna sugerencia?

26voto

Hao Kung Puntos 13035

El problema es más probable que los iconos/imágenes en los archivos css son el uso de rutas relativas, por lo que si su paquete no vive en la misma aplicación de la ruta de acceso relativa como su desagregado de los archivos css, se convierten en enlaces rotos.

Hemos de reajuste url en css en nuestra lista de tareas, pero por ahora, la easist cosa a hacer es tener a su paquete de camino de parecerse a la css directorio de modo que las direcciones url relativas trabajo justo, yo.e:

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

Actualización: Hemos añadido el soporte para este en el 1.1beta1 de la liberación, así automáticamente la reescritura de la url de imagen, usted puede agregar un nuevo ItemTransform que hace este reajuste automáticamente.

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

8voto

El 'CssRewriteUrlTransform' funciona bien para aplicaciones que NO se ejecutan en la parte superior de un directorio virtual.

Por lo tanto, si la aplicación se ejecuta en http://your-site.com/ se ejecuta bien, pero si se ejecuta en http://your-site.com/your-app/ usted tendrá 404 para que todas tus imágenes porque el valor predeterminado 'CssFixRewriteUrlTransform' es hacer referencia a las imágenes con un '/'.

Para resolver este problema, he implementado mi propia versión de 'CssRewriteUrlTransform' como este:

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

ACTUALIZACIÓN: gracias a superjos, quien señaló que fue otra solución:

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

3voto

LeftyX Puntos 9899

Lo que puedes hacer es que usted puede ir a personalizar la página y cambie @iconSpritePath y @iconWhiteSpritePath en los Sprites de la sección y, por supuesto, descargar el nuevo estilo.

He puesto mis imágenes en la carpeta Content/Images carpeta y he cambiado la ruta en:

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

Otra alternativa es descargar todo MENOS los archivos de github, el cambio de las mismas variables en las variables.menos de archivo y volver a compilar el bootrap.menos de archivo con una herramienta como SimpLESS.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: