web-dev-qa-db-fra.com

CSS Bootstrap remplace mon propre CSS

J'essaie de créer un bouton partagé sur mon site Web (ASPNET WebForms). Jusqu'à présent, la seule implémentation de bouton partagé que j'aime bien est celle de Bootstrap. Je n'utilise aucune autre caractéristique de leur framework. Cependant, dès que j'insère:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

Mon propre CSS est un gâchis. J'ai essayé d'isoler uniquement les classes dont j'avais besoin pour splitbutton, mais je n'ai pas réussi à le faire.

Ceci est mon code html pour le splitbutton avec les classes requises

<div class="btn-group">
                          <button type="button" onclick="NewPost();return false;" class="btn btn-primary">Enviar</button>
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
                          <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Enviar con notificaciones</a></li>
                          </ul>
                    </div>

Est-ce que quelqu'un connaît un moyen d'isoler les classes de désir? Ou peut-être me diriger vers une autre implémentation d'un splitbutton qui est similaire à celle-ci et multi-navigateur? J'ai beaucoup cherché sur Google, mais le seul outil utilisable que j'ai trouvé était le bootstrap.

htmlcsshtml5twitter-bootstrap
11
Joe

Une bonne règle de base. Mettez toujours la feuille de style avec les règles que vous voulez faire autorité en dernier lieu. Vous avez probablement

<link rel="stylesheet" href="/css/mystyles.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

Ainsi, tous les styles déclarés dans bootstrap css remplaceront les vôtres. essayez plutôt

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyles.css">

De cette façon, les règles de votre feuille de style ont plus de priorité.

En dehors de cela, il peut être préférable de ne pas utiliser la version simplifiée de bootstrap afin de supprimer plus facilement les classes en conflit. 

20
Bryan

Vous allez sur le Customizer sur getbootstrap.com http://getbootstrap.com/customize/

Basculez ce dont vous avez besoin:

enter image description here

Ensuite, vous le téléchargez.

Vous l'ouvrez. Regardez les styles de base et la taille globale de la boîte: border-box.

Soit vous modifiez tous vos CSS pour qu'ils fonctionnent avec box-sizing: border-box (google it), ou vous le placez sur le: before,: after et sur tous les css bootstrap nécessaires liste déroulante (ils travaillent ensemble).

6
Christina

Comme mentionné dans les autres solutions de cette page, il existe des méthodes telles que:

  1. Création d'un css d'amorçage personnalisé à partir du site Web d'amorçage
  2. Placer vos styles personnalisés que vous ne voulez pas que bootstrap écrase après les balises de style bootstrap de la page

D'après mon expérience, créer un css d'amorçage personnalisé ou le modifier pour supprimer les classes ou les règles de style non requises n'est pas si pratique. En effet, lorsqu’une version plus récente de bootstrap est disponible, vous devrez peut-être répéter la procédure fastidieuse.

Au lieu de cela, vous pouvez remplacer les styles d'amorçage par vos propres styles, placés après les styles d'amorçage, avec une autre étape qui vous aidera plus efficacement à empêcher les autres de remplacer vos styles.

Vous pouvez consulter la spécificité des styles CSS sur http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ ou https: // developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Un exemple pourrait être, écrire un style

.btn {
    background: red;
}

comme

#mypage .btn {
    background: red;
}

où, mypage pourrait être l'ID d'un élément le plus parent de la page (peut-être la balise body?) . Cela rendrait vos règles de style plus spécifiques que celles définies dans le CSS d'amorçage, elles ne le seraient pas. plus être en mesure de remplacer le vôtre alors.

Notez que l'extrait de code ci-dessus est simplement une illustration et que vous pourriez certainement écrire de meilleurs styles pour la cause.

1
myTerminal

faites de votre feuille de style le dernier fichier css importé. 

0
ndesign11

Tellement simple: utilisez moins de matériel pour éliminer les composants BS dont vous n’avez pas besoin. Compilez et réduisez un fichier bootstrap.min.css, puis importez-le dans votre feuille de style en utilisant:

@import url ("bootstrap.min.css"); au sommet. Ensuite, dans votre code HTML, incluez simplement votre code CSS et ceux-ci seront lus après.

0
Luke