Comment ajouter un dégradé à la barre de navigation dans le bootstrap 3, à l'aide LESS.js

ie ressemble: http://twitterbootstrap3navbars.w3masters.nl/ mais sans l'aide de matières css, je veux écrire cela dans mon moins de fichiers...

Dans mon moins.les variables j'ai déjà essayé ceci:

@navbar-gradient:   linear-gradient(top, @navbar-default-pre-color 0%, @navbar-default-pre-color 50%, @navbar-default-pre-color 51%, @navbar-default-pre-color 100%);

@navbar-default-bg:                @navbar-gradient;

Dans google chrome, la barre de navigation a juste montré jusqu'noir, j'ai essayé changeing de couleur d'arrière-plan: il suffit de fond, image de fond d'écran etc (dans les outils de développement chrome qui vous permettent de modifier le css à droite sur la page).

Des idées?

OriginalL'auteur InfinteScroll | 2014-04-28

  1. 3

    Vous pouvez le faire en utilisant le Moins de code suivant:

    @navbar-gradient-start-color: #004400;
@navbar-gradient-stop-color: #009900;
.navbar-default {
#gradient > .vertical( @navbar-gradient-start-color,@navbar-gradient-stop-color);
}

    Vous devez ajouter ce code à la fin de l'amorçage.moins (ou navnbar.moins fichier. (mieux créer un personnalisé.moins fichier et l'importer à la fin de bootstrap.moins)

    Voir aussi: http://bassjobsen.weblogs.fm/adding-background-gradient-bootstraps-navbar-less/

    Le Moins de code ci-dessus va afficher le code CSS suivant:

    .navbar-default {
  background-image: -webkit-linear-gradient(top, #004400 0%, #009900 100%);
  background-image: -o-linear-gradient(top, #004400 0%, #009900 100%);
  background-image: linear-gradient(to bottom, #004400 0%, #009900 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

    Avis que l' .vertical() mixin a été défini dans le moins/mixin/gradients.moins fichier de Bootstrap de fichiers source. Ce mixin a été des espaces de dans le #gradient espace de noms et c'est pourquoi il doit être appelé comme #gradient > .vertical().

    OriginalL'auteur Bass Jobsen

  2. 1

    donc voici ce que je prépare. J'ai ajouté la ligne suivante à la ligne 380 dans la barre de navigation.moins, en vertu de la barre de navigation par défaut de la classe

    background-color: @navbar-default-bg;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(lighten(@navbar-default-bg,30%)), to(@navbar-default-bg));
  background-image: -webkit-linear-gradient(top, lighten(@navbar-default-bg,30%), 0%, @navbar-default-bg, 100%);
  background-image: -moz-linear-gradient(top, lighten(@navbar-default-bg,30%) 0%, @navbar-default-bg 100%);
  background-image: linear-gradient(to bottom, lighten(@navbar-default-bg,30%) 0%, @navbar-default-bg 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=lighten(@navbar-default-bg,30%), endColorstr=@navbar-default-bg, GradientType=0);

    J'ai coupé et passé, certains de partir d'ici: http://twitterbootstrap3navbars.w3masters.nl/

    Il n'est pas nécessaire de l'ajouter à la ligne 380 lorsque vous définissez le code ci-dessus pour la .navbar (ou .navbar-par défaut) sélecteur, vous pouvez l'ajouter à la fin de bootstrap.less ou navbar.less (vous ne devriez assurez-vous que le code personnalisé est après le code par défaut, et même cela n'est pas nécessaire de provoquer le code par défaut ne permet pas de définir la background-image pour la barre de navigation)

    OriginalL'auteur InfinteScroll

  3. 0

    La raison en est @navbar-default-bg est fixé à background-color et comme @StrikePricer l'a souligné, un gradient doit être définie comme background-image.

    Aussi il semble que vous utilisez la même couleur à tous les arrêts. Donc cela pourrait être la raison pour laquelle vous ne voyez pas le dégradé.

    Donc une réponse plus complète (en ignorant navigateur de préfixe de base) serait:

    //defined in variables.css:
@navbar-gradient-start-color: #004400;
@navbar-gradient-stop-color: #009900;
@navbar-gradient: linear-gradient(to bottom, @navbar-gradient-start-color 0%, @navbar-gradient-stop-color 100%);

//in your main definitions/overrides:
.navbar {
  background-image: @navbar-gradient; 
}
    Lorsque vous ignorez navigateur de préfixe de base de votre réponse ne diffère pas de celle déjà donnée par @StrikePricer déjà. Lors de l'utilisation de Bootstrap processus de génération par défaut, le autoprfixer ne faut pas ajouter de la filter propriété pour IE8 soutien.
    En fait ma réponse diffère dans au moins un aspect qui est je l'ai expliqué pourquoi cela fonctionne.

    OriginalL'auteur thom_nic