Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der drei Formate zum Erstellen von Formularen mit Bootstrap (1)_javascript-Kenntnissen

Ausführliche Erläuterung der drei Formate zum Erstellen von Formularen mit Bootstrap (1)_javascript-Kenntnissen

WBOYOriginal: 2016-05-16 15:22:031368Durchsuche

In diesem Kapitel erfahren Sie, wie Sie Formulare mit Bootstrap erstellen. Bootstrap kann über einige einfache HTML-Tags und erweiterte Klassen verschiedene Formularstile erstellen.

Bootstrap-Formulartypen sind in drei Formate unterteilt: vertikales oder einfaches Formular, Inline-Formular und horizontales Formular.

Vertikale oder Grundform (display:block;)

Die grundlegende Formularstruktur wird mit Bootstrap geliefert und einzelne Formularsteuerelemente erhalten automatisch einige globale Stile. Nachfolgend sind die Schritte zum Erstellen eines Basisformulars aufgeführt:

Rolle="form" zum übergeordneten ff9c23ada1bcecdd1a0fb5d5a0f18437-Element hinzufügen.

Platzieren Sie Beschriftungen und Steuerelemente in einem dc6dce4a544fdca2df29d5ac0ea9906b mit der Klasse .form-group. Dies ist notwendig, um einen optimalen Abstand zu erreichen.

Klasse .form-control zu allen Textelementen d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3 hinzufügen.

<!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>

Der Effekt ist wie folgt:

Wenn wir das Formularsteuerelement von „select“ entfernen und das Formularsteuerelement zum Eingabetyp = „Datei“ hinzufügen, sehen wir uns die Auswirkung an.

Können Sie den Unterschied zum obigen Effekt erkennen? Auf diese Weise verstehen Sie wahrscheinlich die Rolle der Formularsteuerung, die darin besteht, den peripheren Randeffekt festzulegen, einschließlich Breite, Höhe und Get
Der Stil des Formulars, wenn es fokussiert ist.

Inline-Formular (alles in derselben Zeile, Anzeige erfolgt im Inline-Block)

Wenn Sie ein Formular mit allen seinen Elementen inline, linksbündig und nebeneinander erstellen müssen, fügen Sie die Klasse .form-inline zum ff9c23ada1bcecdd1a0fb5d5a0f18437-Tag hinzu.

Da der Inhalt des Kopfteils derselbe ist, listen wir nur den Inhalt des Körperteils auf.

<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>

Anzeigeeffekt:

Standardmäßig haben Eingaben, Auswahlen und Textbereiche in Bootstrap eine Breite von 100 %. Wenn Sie ein horizontales Formular verwenden, müssen Sie im Formularsteuerelement eine Breite festlegen.

Verwenden Sie die Klasse .sr-only, um Inline-Formular-Tags auszublenden.

Hinweis: sr-only wird für Bildschirmlesegeräte angezeigt, nicht für normale Lesegeräte.

Wenn die Formularklasse anderer Elemente form-inline ist, ist die Eingabe tyoe = „file“ immer noch display:block. Es ist ersichtlich, dass hier ein Problem vorliegt Die Zeit kann separat eingestellt werden. Die Anzeige erfolgt im Inline-Block;

Horizontales Formular (Formularelemente wie Beschriftung und Eingabe befinden sich in derselben Zeile)

Horizontale Formulare unterscheiden sich von anderen Formularen nicht nur in der Anzahl der Tags, sondern auch in der Formulardarstellung. Um ein Formular mit horizontalem Layout zu erstellen, befolgen Sie bitte diese Schritte:

1. Fügen Sie die Klasse .form-horizontal zum übergeordneten ff9c23ada1bcecdd1a0fb5d5a0f18437-Element hinzu.
2. Platzieren Sie die Beschriftungen und Steuerelemente in einem dc6dce4a544fdca2df29d5ac0ea9906b mit der Klasse .form-group.
3. Fügen Sie der Beschriftung die Klasse .control-label hinzu.
4. Legen Sie die Breite des Labels und seines Bruder-Div fest (da die Standardbreite der Eingabe usw. 100 % beträgt).

<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>

Wirkung:

Der obige Inhalt führt Sie in die relevanten Inhalte zum Erstellen von Formularen mit Bootstrap ein. Ich hoffe, er gefällt Ihnen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tutorial zum Erlernen der Verwendung von Grunt zum Packen von JavaScript- und CSS-ProgrammenNächster Artikel：Tutorial zum Erlernen der Verwendung von Grunt zum Packen von JavaScript- und CSS-Programmen

In Verbindung stehende Artikel

Mehr sehen