web-dev-qa-db-fra.com

Comment personnaliser les différentes tailles d'entrée de bootstrap Twitter sans utiliser! Important?

Les tailles d'entrée de Bootstrap se développent uniquement en largeur, tandis que les boutons se développent à la fois en hauteur et en taille de police. (voir photo) J'essaie de personnaliser les entrées pour les étendre également en hauteur et en taille de police. (Remarque: ils corrigent cela pour la prochaine version, mais je suis trop impatient d'attendre)

enter image description here

Jusqu'à présent, je ne peux y parvenir qu'en utilisant le !important pirater pour écraser le CSS d'entrée. Je veux éviter d'utiliser !important à tout prix, car c'est une pratique affreuse.

Actuellement, c'est le code que j'ai pour augmenter la hauteur de .input-large. Cela ne fonctionne pas lorsque je supprime !important. Je suppose que c'est parce que les entrées ont une priorité plus élevée que les classes (ce que je trouve absolument idiot, mais corrigez-moi si je me trompe).

.input-large {
width: 210px;
height: 44px !important;
margin-bottom: 10px !important;
line-height: 30px !important;
padding: 11px 19px !important;
font-size: 17.5px !important;
}

Existe-t-il un moyen de réaliser cela sans supprimer le style d'entrée par défaut et sans déclarer !important?

Voici un violon: http://jsfiddle.net/xryQK/

htmlcssformstwitter-bootstrap
31
Michelle

À la place d'utiliser !important, vous pouvez utiliser un sélecteur d'attribut qui remplacera la valeur par défaut car il sera plus spécifique qu'en utilisant simplement un class. Pas bon avec le concept de spécificité? Reportez-vous à l'article this .

Pour calculer la spécificité de vos sélecteurs, vous pouvez utiliser this site Web.

[1] En utilisant class[attr=class]

.input-large[class="input-large"] {
    width: 400px;
}

OR

[2] En utilisant tag[attr=class]

input[class="input-large"] {
    width: 400px;
}

Et en utilisant !important n'est pas une pratique horrible si vous l'utilisez au bon endroit.

Notez que les sélecteurs ci-dessus, [1] fera tous les éléments width à 400px ayant un class de input-large et en cas de sélecteur [2], il définira width sur 400px pour tous les éléments input ayant class sur input-large, donc si vous voulez, vous pouvez appeler plusieurs classes c'est-à-dire .class.class sur input tag et utilisez le sélecteur ci-dessous ..

.input-large.input-large-altered {
    width: 400px;
}

Donc, cela sélectionnera tout élément ayant ces deux classes définies, si vous voulez être plus spécifique et ne définir que pour input type="text" que vous pouvez toujours écrire même un sélecteur plus spécifique comme

input[type="text"].input-large.input-large-altered {
   width: 400px;
}

Ainsi, celui-ci ne ciblera que l'élément input dont l'attribut type contient un value de text [~ # ~] et [~ # ~] ayant les deux classes, c'est-à-dire .input-large.input-large-altered

Démo

Démo 2

Démo 3 (Plusieurs classes)

31
Mr. Alien

AFAIK vous venez de mettre votre propre CSS personnalisé après le bootstrap

exemple:

... Some codes here ...

<link type="text/css" rel="stylesheet" href="bootstrap.css">
<style>
.input-large {
    width: 210px;
    height: 44px;
    margin-bottom: 10px;
    line-height: 30px;
    padding: 11px 19px;
    font-size: 17.5px;
}
</style>

... another code ...

Désolé, j'ai oublié de supprimer le !important Le !important n'est pas nécessaire

6
gamehelp16

Si vous travaillez à partir des fichiers bootstrap .less

une solution simple serait d'ajouter une entrée supplémentaire comme:

.form-fatter {
  // Set font for forms
  label,
  input,
  button,
  select,
  textarea {
    // Increase the default with 20%
    #font > .shorthand(@baseFontSize*1.2,normal,@baseLineHeight*1.2); 
  }
}

dans votre html

<form class="form-horizontal form-fatter">
...
</form>
1
Vincent Theeten