CSS Bootstrap remplace mon propre CSS
Je suis en train de créer un split-bouton dans mon site web (ASPNET WebForms). Jusqu'à présent le seul split-bouton de mise en œuvre de j'aime, c'est celui de Bootstrap. Je ne suis pas à l'aide de toute autre caractéristique de leur cadre. Cependant, dès que j'ai insérer:
<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'aurais besoin pour splitbutton, mais je n'étais pas en mesure de réussi à le faire.
C'est mon code html pour le splitbutton avec le nécessaire classes
<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>
Quelqu'un connais un moyen d'isoler le désir des classes? Ou peut être me diriger vers une autre mise en œuvre d'un splitbutton est semblable à celui-ci et de la croix-navigateur? J'ai googlé beaucoup, mais la seule utilisable que j'ai trouvé a été de bootstrap.
OriginalL'auteur Joe | 2014-10-01
Vous devez vous connecter pour publier un commentaire.
Une bonne règle de base. Toujours mettre la feuille de style avec les règles que vous souhaitez le plus autorité en dernier. Vous avez probablement
Donc tout les styles déclarés dans le bootstrap css permettra de remplacer la vôtre. au lieu d'essayer
De cette façon, les règles dans votre feuille de style ont plus la priorité.
En dehors de cela, vous pourriez être mieux de ne pas utiliser la version compacte de bootstrap de sorte que vous pouvez supprimer tout conflit entre les classes plus faciles.
Droit, il ne fonctionne que lorsque vous voulez remplacer les styles, à l'instar de ce que l'OP avait de la difficulté avec.
OriginalL'auteur Bryan
Vous allez à la Personnalisation sur getbootstrap.com http://getbootstrap.com/customize/
Basculer les choses dont vous avez besoin:
Puis de le télécharger.
Vous l'ouvrez. Regardez les styles de base et la mondial au box-sizing:border-box.
Soit vous changez tous vos CSS pour fonctionner avec box-sizing: border-box (google), ou de vous mettre sur la :avant, :après, et l'élément sur tout le bootstrap css que vous avez besoin pour les formulaires, les boutons et le menu déroulant (ils travaillent ensemble).
OriginalL'auteur Christina
Comme mentionné dans les autres solutions sur cette page, il y a des moyens comme:
Selon mon expérience, la création d'une coutume bootstrap css ou de le modifier pour supprimer unrequired classes ou dans le style des règles n'est pas tellement pratique. C'est parce que lorsqu'une nouvelle version de bootstrap est, vous pourriez avoir besoin de passer par la lourdeur de la procédure à nouveau.
Au lieu de cela, vous pouvez aller de l'avant avec la substitution de l'amorçage de styles avec vos propres styles, placé après le démarrage styles, avec une autre étape qui permettra de mieux vous aider à empêcher d'autres personnes de remplacer vos styles.
Vous pouvez avoir un coup d'oeil à la spécificité des styles CSS à 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, écrit d'un style
comme
où,
mypage
pourrait être un ID d'un parent-la plupart des élément de la page (peut-être la balise body?).Ce serait faire de votre style de règles plus spécifiques que celles qui sont définies dans le fichier de bootstrap CSS, ils ne seront plus en mesure de remplacer la vôtre alors.
Veuillez noter que l'extrait de code ci-dessus est juste une illustration, et vous pourriez certainement mieux écrire des styles pour la cause.
OriginalL'auteur myTerminal
faire votre feuille de style de la dernière importé le fichier css.
Comment est-il mauvais? Les feuilles de Style en cascade. Par Conséquent Feuilles De Style En Cascade. L'ajout de votre propre css personnalisé dernier aura préséance sur propriétés dans le SCT.
OriginalL'auteur ndesign11
Je ne sais pas si cela répondra à votre question exactement, mais ce que je fais dans tous mes BS 3 projets:
Dans ma tête:
Dans
custom.css
De cette façon, nous charger de bootstrap à la première, mais quelque chose de personnalisé que vous voulez faire sera chargé dernier qui signifie que vos chances de substitution sont de haute et de ne pas provoquer des conflits. C'est aussi une ligne et beaucoup plus propre pour votre
<head>
OriginalL'auteur Jared Eitnier
Si simple d'utiliser moins de bande de la BS composants que vous n'avez pas besoin. Compiler et de rapetisser un bootstrap.min.fichier css, puis les importer dans votre feuille de style à l'aide de:
@import url("bootstrap.min.css"); dans la partie supérieure. Ensuite, dans le HTML, il suffit d'inclure votre CSS et ces sera lu après.
OriginalL'auteur Luke