Chapitre 4 : Formulaires BootStrap et compétences images_javascript

Bootstrap, de Twitter, est actuellement le framework front-end le plus populaire. Bootstrap est basé sur HTML, CSS et JAVASCRIPT. Il est simple et flexible, ce qui accélère le développement Web.

Points d'apprentissage :

1. Formulaire
2. Photos

Dans cette leçon, nous apprendrons principalement les fonctions de formulaire et d'image Bootstrap, et afficherons divers effets riches grâce aux définitions CSS intégrées.

1. Formulaire

Bootstrap fournit des styles de formulaire riches que les développeurs peuvent utiliser.

1.Format de base

//实现基本的表单样式
<form>
　　<div class="form-group">
　　　　<label>电子邮件</label>
　　　　<input type="email" class="form-control" placeholder="请输入您的电子邮件">
　　</div>
　　<div class="form-group">
　　　　<label>密码</label>
　　　　<input type="password" class="form-control" placeholder="请输入您的密码">
　　</div>
</form> 

Remarque : Ce n'est que lorsque le type de zone de saisie est défini correctement que le style correct peut lui être attribué. Les contrôles de zone de saisie pris en charge incluent : texte, mot de passe, dateheure, dateheure-locale, date, mois, heure, semaine, numéro, e-mail, URL, recherche, numéro de téléphone et couleur.

2. Formulaire en ligne

//让表单左对齐浮动，并表现为 inline-block 内联块结构
<form class="form-inline"> 

Remarque : Quand il fait moins de 768px, le style exclusif sera restauré

3. Combinaison de formulaires

//前后增加片段
<div class="input-group">
　　<div class="input-group-addon">￥</div>
　　<input type="text" class="form-control">
　　<div class="input-group-addon">.00</div>
</div> 

4. Disposition horizontale

//让表单内的元素保持水平排列
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
</div>
</form>

Remarque : Le système de grille col-sm est utilisé ici, qui sera expliqué dans les chapitres suivants, et control-label signifie synchronisation avec le style de l'élément parent.

5. Cases à cocher et boutons radio

//设置复选框，在一行
<div class="checkbox">
<label> <input type="checkbox">体育
</label>
</div>
<div class="checkbox">
<label> <input type="checkbox">音乐
</label>
</div> 
//设置禁用的复选框
<div class="checkbox disabled">
<label> <input type="checkbox" disabled>音乐
</label>
</div> 
//设置内联一行显示的复选框
<label class="checkbox-inline"> <input type="checkbox">体育</label>
<label class="checkbox-inline disabled"> <input type="checkbox" disabled>音乐</label> 
//设置单选框
<div class="radio disabled">
<label> <input type="radio" name="sex" disabled>男</label>
</div> 

6. Liste déroulante

//设置下拉列表
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 

7. Statut de vérification

//设置为错误状态
<div class="form-group has-error"> 

Remarque : Il existe d'autres statuts comme suit :

　　样式说明
　　has-error错误状态
　　has-success成功状态
　　has-warning警告状态
//label 标签同步相应状态
<label class="control-label">Input with success</label> 

8. Ajouter des icônes supplémentaires

//文本框右侧内置文本图标
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div> 

Remarque : En plus du glyphicon-ok, il y en a plusieurs autres dans le tableau suivant :

　样式说明
　　glyphicon-ok成功状态
　　glyphicon-warning-sign警告状态
　　glyphicon-remove错误状态

9. Taille du contrôle

//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm"> 

Remarque : Vous pouvez également définir les éléments parents form-group-lg et form-group-sm à ajuster.

2. Photo

Bootstrap fournit des styles d'image riches que les développeurs peuvent utiliser.

1. Forme de l'image

//三种形状
<img class="img-rounded lazy"  src="/static/imghwm/default1.png"  data-src="img/pic.png"  alt="图片">
<img class="img-circle lazy"  src="/static/imghwm/default1.png"  data-src="img/pic.png"  alt="图片">
<img class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="img/pic.png"  alt="图片"> 
//响应式图片
<img class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="img/pic.png"  alt="图片">

Ce qui précède est le contenu pertinent des formulaires et des images Bootstrap présentés par l'éditeur. J'espère qu'il vous sera utile !