Comment modifier le style de nav-pills et la barre de navigation?

Je suis le développement de l'interface d'un Site web et je suis plutôt nouvelle pour Ruby et de Rails, css et bootstrap. La suite de la documentation, j'ai une très belle barre de navigation en haut de ma page adaptée à mes besoins en changeant les options dans le fichier css.

.navbar {
  background-color: #3a2665;
  color: #ffffff !important;
}

.navbar .nav {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar .nav > li > a {
  color: #ffffff !important;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em;
}

J'ai aussi besoin d'un pied de page avec les options de navigations, cette fois avec le li éléments dans un style différent de la barre de navigation en haut de la page. J'ai essayé d'utiliser nav-pills, mais ne semblent pas être en mesure de modifier les li éléments, ils suivent la barre de navigation de style. Je ne semble pas modifier quoi que ce soit quand je lance extra !important consolidés.

.nav-pills > li > a {
  color: #ffffff;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.8em ;
  padding: 1px 1px 1px ;
}

Mon question est qu'est-ce que la dépendance hiérarchique de nav, navbar et nav-pills, de sorte que je peux changer le style de chacun d'eux séparément? Quelqu'un at-il un pointeur? Quel est le rôle de !important ? Il remplace mais pourquoi aurais-je besoin si je suis en précisant nav-pills dans mon fichier css?

C'est aussi les "meilleures pratiques" pour utiliser un navbar aussi comme un pied de page? Dans la documentation que j'ai lu, il semble indiquer qu'il est surtout utilisé dans l'en-tête.

Tous les pointeurs sera très appréciée!

OriginalL'auteur user2953607 | 2014-10-03

  1. 3

    Vous pouvez le faire comme ça si vous n'avez pas à utiliser !important de remplacer la feuille de style css

    .navbar {
  background-color: #3a2665;
  color: #ffffff;
}

.navbar .nav {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar .nav > li > a {
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em;
}

footer .navbar{
    color: #ff0000; /* TO change the color in the footer*/
}
footer .navbar .nav > li > a {
  color: #ff0000; /* TO change the color in the footer*/
}

    Le style que vous voulez les classes héritent dans le pied de page vous laisser pour ce qu'ils sont 🙂

    Et oui, vous pouvez utiliser la barre de navigation en bas de page 🙂

    OriginalL'auteur Bojan Petkovski

  2. 3

    Ma première recommandation serait de vérifier SASS pour le restylage de bootstrap, car il offre beaucoup de facile alternatives pour changer les couleurs, polices, etc.

    Cependant, pour répondre à votre question, vous devez utiliser cette hiérarchie:

    .navbar .nav-pills > li > a

    Voici un excellent article sur la compréhension !important CSS déclaration

    (http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/)

    Lors de la création d'un pied de ma pratique habituelle est de créer un arrière-plan div/footer > container > puis les colonnes > contenu comme horizontale ul etc la liste.

    Excellent article pour comprendre !important.

    OriginalL'auteur arinh