简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Explication détaillée des trois formats de création de formulaires avec les compétences Bootstrap (1)_javascript

Explication détaillée des trois formats de création de formulaires avec les compétences Bootstrap (1)_javascript

WBOY
WBOYoriginal
2016-05-16 15:22:031366parcourir

Dans ce chapitre, nous apprendrons comment créer des formulaires à l'aide de Bootstrap. Bootstrap peut créer différents styles de formulaires grâce à de simples balises HTML et des classes étendues.

Les types de formulaires Bootstrap sont divisés en trois formats : formulaire vertical ou de base, formulaire en ligne et formulaire horizontal.

Forme verticale ou basique (display:block;)

La structure de base du formulaire est fournie avec Bootstrap et les contrôles de formulaire individuels reçoivent automatiquement certains styles globaux. Voici les étapes pour créer un formulaire de base :

Ajoutez role="form" à l'élément parent ff9c23ada1bcecdd1a0fb5d5a0f18437

Placez les étiquettes et les contrôles dans un dc6dce4a544fdca2df29d5ac0ea9906b avec la classe .form-group. Ceci est nécessaire pour obtenir un espacement optimal.

Ajoutez la classe .form-control à tous les éléments de texte d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3 et 221f08282418e2996498697df914ce4e. 

<!doctype html> 
<html lang="en"> 
 <head> 
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一，关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">   
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
 </head> 
 <body style="padding: 20px;"> 
  <div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
   <form role = "form"> 
    <div class = "form-group"> 
     <label for = "name">姓名</label> 
     <input type = "text" class = "form-control" id = "name" 
       placeholder = "请输入姓名"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "tel">电话号码</label> 
     <input type="text" class="form-control" id = "tel" 
       placeholder = "请输入您的电话号码"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "idCard">请上传身份证</label> 
     <input type = "file" id = "idCard"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "profession">选择职业</label> 
     <select id = "profession" class = "form-control"> 
      <option>软件工程师</option> 
      <option>测试工程师</option> 
      <option>硬件工程师</option> 
      <option>质量分析师</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <button type = "submit" class="btn-info btn-lg">提交</button> 
    </div> 
   </form> 
  </div> 
 </body> 
</html>

L'effet est le suivant :

Si nous supprimons le contrôle de formulaire de select et ajoutons un contrôle de formulaire au type d'entrée = "fichier", voyons quel est l'effet.

Pouvez-vous voir la différence avec l’effet ci-dessus ? De cette façon, vous comprenez probablement le rôle du contrôle de forme, qui consiste à définir l'effet de bordure périphérique, y compris la largeur, la hauteur et obtenir
Le style du formulaire une fois focalisé.

Formulaire en ligne (le tout sur la même ligne, l'affichage est en bloc en ligne)

Si vous devez créer un formulaire avec tous ses éléments en ligne, alignés à gauche et ses étiquettes côte à côte, ajoutez la classe .form-inline à la balise ff9c23ada1bcecdd1a0fb5d5a0f18437.

Étant donné que le contenu de la partie tête est le même, nous répertorions uniquement le contenu de la partie corps. 

<body style="padding: 20px;"> 
 <form role = "form" class="form-inline"> 
  <div class = "form-group"> 
   <label for = "name">姓名</label> 
   <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "tel">电话号码</label> 
   <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "idCard">请上传身份证</label> 
   <input type = "file" id = "idCard"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "profession">选择职业</label> 
   <select id = "profession" class = "form-control"> 
    <option>软件工程师</option> 
    <option>测试工程师</option> 
    <option>硬件工程师</option> 
    <option>质量分析师</option> 
   </select> 
  </div> 
  <div class="form-group"> 
   <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div> 
 </form>   
</body>

Effet d'affichage :

Par défaut, les entrées, les sélections et les zones de texte dans Bootstrap ont une largeur de 100 %. Lorsque vous utilisez un formulaire horizontal, vous devez définir une largeur sur le contrôle du formulaire.

Utilisez la classe .sr uniquement pour masquer les balises de formulaire en ligne.

Remarque : sr-only est affiché sur les lecteurs d'écran, pas sur les lecteurs ordinaires.

Lorsque la classe de formulaire des autres éléments est form-inline, l'affichage est inLine-block ; mais l'entrée tyoe = "file" est toujours display:block. On peut voir qu'il y a un problème avec sa mise en page. heure, il peut être réglé séparément Son affichage est en ligne-bloc ;

Formulaire horizontal (les éléments du formulaire tels que l'étiquette et la saisie sont sur la même ligne)

Les formulaires horizontaux diffèrent des autres formulaires non seulement par le nombre de balises, mais également par la présentation du formulaire. Pour créer un formulaire de mise en page horizontale, veuillez suivre ces étapes :

1. Ajoutez la classe .form-horizontal à l'élément parent ff9c23ada1bcecdd1a0fb5d5a0f18437
2. Placez les étiquettes et les contrôles dans un dc6dce4a544fdca2df29d5ac0ea9906b avec la classe .form-group.
3. Ajoutez la classe .control-label à l'étiquette.
4. Définissez la largeur de l'étiquette et de son frère div (car la largeur par défaut de l'entrée, etc. est de 100 %). 

<body style="padding: 20px;"> 
 <form role = "form" class="form-horizontal"> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "name">姓名</label> 
   <div class="col-sm-2"> 
    <input type = "text" class = "form-control" id = "name" 
     placeholder = "请输入姓名"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "tel">电话号码</label> 
   <div class="col-sm-2"> 
    <input type="text" class="form-control" id = "tel" 
      placeholder = "请输入您的电话号码"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label> 
   <div class="col-sm-2"> 
    <input type = "file" id = "idCard" style="display:inline-block;"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "profession">选择职业</label> 
   <div class="col-sm-2"> 
    <select id = "profession" class = "form-control"> 
     <option>软件工程师</option> 
     <option>测试工程师</option> 
     <option>硬件工程师</option> 
     <option>质量分析师</option> 
    </select> 
   </div> 
  </div> 
  <div class="form-group"> 
   <div class="col-sm-2 col-sm-offset-2"> 
    <button type = "submit" class="btn-info btn-lg">提交</button> 
   </div>    
  </div> 
 </form> 
</body>

Effet :

Le contenu ci-dessus vous présente le contenu pertinent de la création de formulaires avec Bootstrap. J'espère qu'il vous plaira.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tutoriel pour apprendre à utiliser Grunt pour packager des programmes JavaScript et CSSArticle suivant：Tutoriel pour apprendre à utiliser Grunt pour packager des programmes JavaScript et CSS

Articles Liés

Voir plus