Introduction aux styles de boutons et aux styles d'image dans Bootstrap

Cet article vous présentera les styles et styles d'image qui combinent des boutons et des formulaires dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. Si vous souhaitez apprendre et obtenir plus de didacticiels vidéo sur le bootstrap, vous pouvez également visiter : tutoriel bootstrap !

Style de bouton Bootstrap

1. Groupe de formulaires

.form-group : mettez le form Combine

.form-control : définissez le style sur une largeur de 100 %, une bordure arrondie, une ombre bleue appropriée...

Format :

<form>
   <p class="form-group">
   <label></label>
   <input type="text" class="form-control"/>
   </p>
</form>

Remarque : uniquement lorsque le type de la zone de saisie est défini correctement, peut-on lui attribuer le style correct.

2. Formulaire en ligne

.form-inline : Alignez le formulaire à gauche et faites-le flotter dans une rangée

Format :

<form class="form-inline">
   <input type="text" class="form-control"/>
   <input type="text" class="form-control"/>
</form>

3. Form group

.input-group : a la même fonction que form-group, utilisez

.input-group- lors du regroupement addon : un élément à combiner

Format :

<form>
   <p class="input-group">
   <p class="input-group-addon">合组</p>
   <input type="text" class="form-control"/>
   </p>
</form>

4 Disposition horizontale

.form-horizontal : formulaire disposé horizontalement En ajoutant. la classe .form-horizontal au formulaire et en utilisant la classe de grille prédéfinie de Bootstrap, les étiquettes d'étiquette et les groupes de contrôle peuvent être disposés horizontalement côte à côte. Cela modifiera le comportement de .form-group afin qu'il se comporte comme une ligne dans un système de grille, il n'est donc pas nécessaire d'ajouter un .row supplémentaire

Format :

<form class="form-horizontal">
   <p class="form-group">
   <label></label>
   <input.../>
   </p>
</form>

5. Case à cocher Radio

.checkbox : Utilisé comme élément parent de la case à cocher, transformant la case à cocher en un élément de niveau bloc

.checkbox- inline : Utilisé comme élément parent de la case à cocher, transformez les cases à cocher en une ligne

.radio : Utilisé comme élément parent du bouton radio, transformez le bouton radio en un élément de niveau bloc

.radio-inline : Utilisé comme élément parent de la boîte de boutons radio, placez la boîte de boutons radio dans une ligne

Format :

<form>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择1
   </label>
   </p>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择2
   </label>
   </p>
</form>

6. -down list

.from-control : Définissez le style sur une largeur de 100 %, une bordure arrondie, une ombre bleue appropriée...

Format :

<form>
   <select class="form-control">
   <option>下拉列表1</option>
   <option>下拉列表2</option>
   </select>
</form>

7. Statut de vérification

Changer la couleur de la bordure et de l'ombre lors de l'obtention du focus

.has-error : mauvais rouge

.has- succès : succès Vert

.has-warning : Avertissement jaune

.control-label : Statut correspondant de la synchronisation des étiquettes

Format :

<form>
   <p class="form-group has-warning">
   <label for="user" class="control-label">用户</label>
   <input type="text" class="form-control" id="user" placeholder="请输入用户名"/>
   </p>
</form>

contrôle - label Cette classe est le statut correspondant à la synchronisation des étiquettes

8. Ajouter des icônes supplémentaires

.has-feedback : Définir une position

.form-control-feedback : Définir une position. Élément, positionné par rapport aux éléments avec la classe has-feedback

.glyphicon glyphicon-ok : icône de coche

.glyphicon-warning-sign : icône d'avertissement

glyphicon-remove : icône d'erreur

....

Format :

<p class="form-group has-feedback">
   <input type="text" class="form-control">
   <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</p>

给 span 设置 form-control-feedback 这个类，让它相对于 has-feedback 进行定位，定位到input 框里面的右侧

9. 控制输入框大小

.input-lg : 大输入框

.input-small : 小输入框

.form-group-lg : 大输入框

.form-group-sm : 小输入框

格式 ：

<input type="text" class="form-control input-sm">

或者直接给父元素设置

<p class="form-group-lg"></p>

响应式图片：

.img-responive : 图片会跟随屏幕的缩放而缩放

.img-rounded : 圆角矩形图片

.img-circle : 圆形图片

.img-thumbnail : 给图片加一个边框

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!