Comment écraser Twitter Bootstrap navbar-classe interne

Question

J'aime que l'élément navbar-inner de ma Bootstrap Layout soit personnalisable par le framework jQuery UI.

<div class="navbar-inner ui-widget-header"> 

</div> 

Mais l'arrière-plan de la barre de navigation est toujours noir. Comment remplacer l'arrière-plan Bootstrap avec l'arrière-plan de la classe ui-widget-header sans modifier le fichier bootstrap css?

Answer 1

Créez votre propre fichier CSS que vous utiliserez pour remplacer les styles du bootstrap.css et ajouter la référence à votre HTML après la référence à bootstrap.css. Aussi, pour vous assurer que vos styles écrasent les bootstrap, vous pouvez utiliser le mot-clé! Important dans votre CSS. Créez un fichier CSS et appelez-le quelque chose comme bootstrap-overwrite.css.

Ajoutez la classe d'amorçage que vous souhaitez remplacer -

.navbar-inner 
{ 
    background: none !important; 
} 

Ajouter la référence à votre HTML après la référence bootstrap -

<link href="styles/bootstrap.css" rel="stylesheet" type="text/css" /> 
<link href="styles/bootstrap-overwrite.css" rel="stylesheet" type="text/css" /> 

Twitter Bootstrap est un cadre qui est censé être redécoré si vous ne devriez pas avoir peur d'écraser le style par défaut.

Answer 2

Rendez le sélecteur ui-widget-header plus specific, afin qu'il écrase navbar-inner dans the cascade. Par exemple,

#pageid .navbar .ui-widget-header { 
    background: red; 
} 

est plus spécifique que simplement ...

.ui-widget-header { 
    background: red; 
}