Einführung und Anwendung des Bootsrtap-Formulars

Die vorherigen Wörter

<p> Ein Formular ist ein Websteuerelement, das zur Kommunikation mit Benutzern verwendet wird. Ein gutes Formulardesign kann eine bessere Kommunikation zwischen Webseiten und Benutzern ermöglichen. Zu den gängigen Elementen in Formularen gehören hauptsächlich: Texteingabefelder, Dropdown-Auswahlfelder, Optionsfelder, Kontrollkästchen, Textfelder und Schaltflächen usw. Jedes Steuerelement spielt eine andere Rolle und verschiedene Browser haben unterschiedliche Darstellungsstile für Formularsteuerelemente.

<p> Ebenso sind Formulare auch der Kerninhalt im Bootstrap-Framework. In diesem Artikel werden die Formulare von Bootstrap im Detail vorgestellt.

Grundlegende Formulare

<p> Für Grundformulare hat Bootstrap nicht viel getan Mit ihnen. Das benutzerdefinierte Effektdesign hat nur die Feldersatz-, Legenden- und Beschriftungs-Tags in der Form

fieldset 
{　　min-width: 0;　　padding: 0;　　margin: 0;　　border: 0;
}legend 
{　　display: block;　　width: 100%;　　padding: 0;　　margin-bottom: 20px;　　font-size: 21px;　　line-height: inherit;　　color: #333;　　border: 0;　　border-bottom: 1px solid #e5e5e5;
}label 
{　　display: inline-block;　　margin-bottom: 5px;　　font-weight: bold;
}

<p> angepasst, hauptsächlich den Rand, den Abstand und den Rand dieser Elemente

<p> Zusätzlich zu diesen Elementen verfügt das Formular natürlich auch über Eingabe-, Auswahl-, Textbereich- und andere Elemente. Im Bootstrap-Framework wird ein Klassenname „form-control“ angepasst, wenn dies der Fall ist Mehrere Elemente verwenden den Klassennamen „form-control“, wodurch einige Designanpassungseffekte erzielt werden

<p> 1. Die Breite wird 100 %

<p> 2. Ein hellgrauer Rand wird festgelegt ( #ccc).

<p> 3. Mit 4 Pixel abgerundeten Ecken

<p> 4. Legen Sie den Schatteneffekt fest. Wenn das Element den Fokus erhält, ändern sich die Schatten- und Randeffekte

<p> 5. Legen Sie den Platzhalter fest Farbe zu #999

<form>
  <div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox"><label>  <input type="checkbox"> Check me out</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button></form>

Horizontale Form

<p> Die Standardform des Bootstrap-Frameworks ist ein vertikaler Anzeigestil, aber oft benötigen wir einen horizontalen Formstil

<p> Durch Hinzufügen der Klasse .form-horizontal zum Formular und Verwendung der voreingestellten Rasterklasse von Bootstrap können die Bezeichnung label und die Kontrollgruppe horizontal nebeneinander angeordnet werden. Dadurch wird das Verhalten von .form-group geändert, sodass es sich wie eine Zeile in einem Rastersystem verhält, sodass kein zusätzliches .row

<p> hinzugefügt werden muss. Verwenden Sie den Klassennamen im

Das Element „form-horizontal“ hat hauptsächlich die folgenden Funktionen:

<p> 1. Legen Sie die Abstands- und Randwerte der Formularsteuerung fest

<p> 2. Ändern Sie den Ausdruck von „form-group“, ähnlich wie das Rastersystem Die „Zeile“

<form class="form-horizontal">
  <div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10">  <input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div>
  </div>
  <div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10">  <input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div>
  </div>
  <div class="form-group"><div class="col-sm-offset-2 col-sm-10">  <div class="checkbox"><label>  <input type="checkbox"> Remember me</label>  </div></div>
  </div>
  <div class="form-group"><div class="col-sm-offset-2 col-sm-10">  <button type="submit" class="btn btn-default">Sign in</button></div>
  </div></form>

<p>

<p>

Inline-Formular

<p> Manchmal brauchen wir Kontrollen werden in einer Zeile angezeigt. Es ist einfach, einen solchen Formulareffekt im Bootstrap-Framework zu implementieren. Sie müssen lediglich den Klassennamen „form-inline“ zum Element hinzufügen. Das Implementierungsprinzip des Inline-Formulars ist sehr einfach. Wenn Sie das Formularsteuerelement in einer Zeile anzeigen möchten, müssen Sie das Formularsteuerelement als Inline-Blockelement festlegen (display:inline-block)

<p> .form hinzufügen - zum -Element Die Inline-Klasse ermöglicht die Linksbündigung ihres Inhalts und verhält sich wie ein Steuerelement auf Inline-Blockebene. Gilt nur, wenn das Ansichtsfenster mindestens 768 Pixel breit ist (jede kleinere Breite des Ansichtsfensters führt dazu, dass das Formular ausgeblendet wird).

<p> In Bootstrap sind das Eingabefeld und die Steuerelemente für Options-/Mehrfachauswahlfelder auf width: 100%; Breite eingestellt. Im Inline-Formular legen wir die Breite dieser Elemente auf width: auto; fest, sodass mehrere Steuerelemente in derselben Zeile angeordnet werden können. Abhängig von den Layoutanforderungen sind möglicherweise einige zusätzliche benutzerdefinierte Komponenten erforderlich.

<p> Wenn das label-Tag nicht für jedes Eingabesteuerelement festgelegt ist, wird es von Bildschirmleseprogrammen nicht richtig erkannt. Diese Inline-Formulare können ausgeblendet werden, indem die Klasse label für .sr-only festgelegt wird. Es gibt auch unterstützende Technologien, die Alternativen zu Label-Tags bieten, beispielsweise die Attribute aria-label, aria-labelledby oder title. Wenn keines davon vorhanden ist, greifen Screenreader möglicherweise auf die Verwendung des Attributs placeholder und, sofern vorhanden, auf die Verwendung von Platzhaltern anstelle anderer Markups zurück. Beachten Sie jedoch, dass dieser Ansatz unangemessen ist

<form class="form-inline">
  <div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button></form>

<p>

<form class="form-inline">
  <div class="form-group"><label class="sr-only" for="exampleInputEmail3">Email address</label><input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group"><label class="sr-only" for="exampleInputPassword3">Password</label><input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox"><label>  <input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button></form>

<p>

<form class="form-inline">
  <div class="form-group"><label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label><div class="input-group">  <div class="input-group-addon">$</div>  <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">  <div class="input-group-addon">.00</div></div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button></form>

<p>表单控件

<p>　　每一个表单都是由表单控件组成。离开了控件，表单就失去了意义

<p>【输入框】

<p>　　单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的

<p>　　包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color

<p>　　为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”

<input type="text" class="form-control" placeholder="Text input">

<p>【下拉列表】

<p>　　Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格 

<p>　　[注意]许多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option></select>

<p>【文本域】

<p>　　文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。 当然，也可以根据需要改变 rows 属性

<textarea class="form-control" rows="3"></textarea>

<p>【多选和单选框】

<p>　　多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个

<p>　　Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题） 

<p>　　在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式

<div class="checkbox">
  <label><input type="checkbox" value="">Option one is this and that&mdash;be sure to include why it's great  </label></div><div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Option two is disabled  </label></div><div class="radio">
  <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that&mdash;be sure to include why it's great  </label></div><div class="radio">
  <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one  </label></div><div class="radio disabled">
  <label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>Option three is disabled  </label></div>

<p>　　通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行 

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label><label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label><label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label><label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1</label><label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label>

<p>

<p>【静态控件】

<p>　　如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可

<form class="form-horizontal">
  <div class="form-group"><label class="col-sm-2 control-label">Email</label><div class="col-sm-10">  <p class="form-control-static">email@example.com</p></div>
  </div>
  <div class="form-group"><label for="inputPassword" class="col-sm-2 control-label">Password</label><div class="col-sm-10">  <input type="password" class="form-control" id="inputPassword" placeholder="Password"></div>
  </div></form>

<p>

<form class="form-inline">
  <div class="form-group"><label class="sr-only">Email</label><p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group"><label for="inputPassword2" class="sr-only">Password</label><input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button></form>

控件尺寸

<p>　　前面看到的表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：

<p>　　1、input-sm:让控件比正常大小更小

<p>　　2、input-lg:让控件比正常大小更大

<p>　　这两个类适用于表单中的input，textarea和select控件

<input class="form-control input-lg" type="text" placeholder=".input-lg"><input class="form-control" type="text" placeholder="Default input"><input class="form-control input-sm" type="text" placeholder=".input-sm"><select class="form-control input-lg">...</select><select class="form-control">...</select><select class="form-control input-sm">...</select>

<p>

<p>　　通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸

<form class="form-horizontal">
  <div class="form-group form-group-lg"><label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label><div class="col-sm-10">  <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"></div>
  </div>
  <div class="form-group form-group-sm"><label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label><div class="col-sm-10">  <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"></div>
  </div></form>

<p>

<p>　　用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度

<div class="row">
  <div class="col-xs-2"><input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3"><input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4"><input type="text" class="form-control" placeholder=".col-xs-4">
  </div></div>

<p>

<p> 

控件状态

<p>　　表单主要用来与用户沟通，好的表单就能更好的与用户进行沟通，而好的表单一定离不开表单的控件状态。

<p>　　每一种表单状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否正确等。Bootstrap框架中的表单控件也具备这些状态

<p>【焦点状态】

<p>　　焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果box-shadow

<input class="form-control">

<p>

<p>【禁用状态】

<p>　　Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是，Bootstrap框架做了一些样式风格的处理 ，被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}

<input class="form-control" disabled>

<p>

<p>　　在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态 

<p>　　[注意]对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的

  <fieldset disabled><legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend><div class="form-group">  <label for="disabledTextInput">Disabled input</label>  <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"></div><div class="form-group">  <label for="disabledSelect">Disabled select menu</label>  <select id="disabledSelect" class="form-control"><option>Disabled select</option>  </select></div><div class="checkbox">  <label><input type="checkbox"> Can't check this      </label></div><button type="submit" class="btn btn-primary">Submit</button>
  </fieldset></form>

<p>

<p>【只读状态】

<p>　　为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

<p>

<p>【校验状态】

<p> 　　在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果

<p>　　1、.has-warning:警告状态（黄色）

<p>　　2、.has-error：错误状态（红色）

<p>　　3、.has-success：成功状态（绿色）

<p>　　使用的时候只需要在form-group容器上或在其父级容器上对应添加状态类名

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div><div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1"></div><div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1"></div><div class="has-success">
  <div class="checkbox"><label>  <input type="checkbox" id="checkboxSuccess" value="option1">  Checkbox with success</label>
  </div></div><div class="has-warning">
  <div class="checkbox"><label>  <input type="checkbox" id="checkboxWarning" value="option1">  Checkbox with warning</label>
  </div></div><div class="has-error">
  <div class="checkbox"><label>  <input type="checkbox" id="checkboxError" value="option1">  Checkbox with error</label>
  </div></div>

<p>

<p>　　很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”

<p>　　[注意]此类名要与“has-error”、“has-warning”和“has-success”在一起使用，且只能使用在文本输入框 <input class="form-control"> 元素上

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span></div><div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span></div><div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span></div><div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span></div>

<p>

<p>　　当然，也可以为水平排列的表单和内联表单设置可选的图标

<form class="form-horizontal">
  <div class="form-group has-success has-feedback"><label class="control-label col-sm-3" for="inputSuccess3">Input with success</label><div class="col-sm-9">  <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>  <span id="inputSuccess3Status" class="sr-only">(success)</span></div>
  </div>
  <div class="form-group has-success has-feedback"><label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label><div class="col-sm-9">  <div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">  </div>  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>  <span id="inputGroupSuccess2Status" class="sr-only">(success)</span></div>
  </div></form>

<p>

<form class="form-inline">
  <div class="form-group has-success has-feedback"><label class="control-label" for="inputSuccess4">Input with success</label><input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status"><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div></form><form class="form-inline">
  <div class="form-group has-success has-feedback"><label class="control-label" for="inputGroupSuccess3">Input group with success</label><div class="input-group">  <span class="input-group-addon">@</span>  <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status"></div><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div></form>

<p>

<p>【提示信息】

<p>　　在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。

<form role="form">
  <div class="form-group has-success has-feedback"><label class="control-label" for="inputSuccess1">成功状态</label><input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" ><span class="help-block">你输入的信息是正确的</span><span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback"><label class="control-label" for="inputWarning1">警告状态</label><input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"><span class="help-block">请输入正确信息</span><span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback"><label class="control-label" for="inputError1">错误状态</label><input type="text" class="form-control" id="inputError1" placeholder="错误状态"><span class="help-block">你输入的信息是错误的</span><span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div></form>

<p>

<p> 

按钮

<p>　　按钮是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。而且不同的Web页面具有不同的按钮风格，甚至说同一个Web网站或应用程序具有多种按钮风格，比如说不同的按钮颜色、大小和状态等

<p>【基本按钮】

<p>　　Bootstrap框架的基本按钮是通过类名“btn”来实现

<button class="btn" type="button">我是一个基本按钮</button>

<p>

<p>【默认按钮】

<p>　　Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色

.btn-default {
　　color: #333;
　　background-color: #fff;
　　border-color: #ccc;
}

<p>

<p>【按钮元素】

<p>　　可以为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

<p>　　制作按钮通常使用下面代码来实现：

<p>　　☑ input[type=“submit”]

<p>　　☑ input[type=“button”]

<p>　　☑ input[type=“reset”]

<p>　　☑ <button>

<p>　　☑ <a>

<p>　　当然了，还可以使用在其他的标签元素上，如

，只要在制作按钮的标签元素上添加类名“btn”即可

<p>　　虽然按钮类可以应用到其他元素上，但是，导航和导航条组件只支持 <button> 元素。如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。所以，最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果

<button class="btn btn-default" type="button">button标签按钮</button><input type="submit" class="btn btn-default" value="input标签按钮"/><a href="##" class="btn btn-default">a标签按钮</a><span class="btn btn-default">span标签按钮</span><div class="btn btn-default">div标签按钮</div>

<p>

<p>【按钮风格】

<p>　　在Bootstrap框架中除了默认的按钮风格之外，还有其他六种按钮风格，每种风格的其实都一样，不同之处就是按钮的背景颜色、边框颜色和文本颜色

<p>　　使用起来就很简单，就像前面介绍的默认按钮一样的使用方法，只需要在基础按钮“.btn”基础上追加对应的类名，就可以得到需要的按钮风格

<button class="btn" type="button">基础按钮.btn</button><button class="btn btn-default" type="button">默认按钮.btn-default</button><button class="btn btn-primary" type="button">主要按钮.btn-primary</button><button class="btn btn-success" type="button">成功按钮.btn-success</button><button class="btn btn-info" type="button">信息按钮.btn-info</button><button class="btn btn-warning" type="button">警告按钮.btn-warning</button><button class="btn btn-danger" type="button">危险按钮.btn-danger</button><button class="btn btn-link" type="button">链接按钮.btn-link</button>

<p>

<p>【按钮尺寸】

<p>　　使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

<p>　　通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素，并且这个按钮不会有任何的padding和margin值

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button></p><p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button></p><p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button></p><p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button></p><button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button><button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

<p>

<p>【按钮状态】

　　Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。

<p>　　Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种

<p>　　当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过:active状态实现的。对于<a>元素，是通过.active类实现的。然而，还可以将.active 应用到<button>上（包含 aria-pressed="true"属性)），并通过编程的方式使其处于激活状态

<p>　　由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类

<button type="button" class="btn btn-default btn-lg active">Button1</button><button type="button" class="btn btn-default btn-lg">Button2</button><a href="#" class="btn btn-default btn-lg active" role="button">Link1</a><a href="#" class="btn btn-default btn-lg" role="button">Link2</a>

<p>

<p>　　和input等表单控件一样，在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。

<p>　　在Bootstrap框架中，要禁用按钮有两种实现方式：

<p>　　方法1：在标签中添加disabled属性

<p>　　方法2：在元素标签中添加类名“disabled”

<p>　　两者的主要区别是：

<p>　　“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理

<p>　　对于<a>标签来说，它并不支持使用disable属性，只支持通过类名“.disable”来禁用按钮，可以禁止元素的链接跳转行为

<form action="#">
<button class="btn" disabled>通过disabled属性禁用按钮
</button> <button class="btn disabled">通过添加类名disabled禁用按钮</button>
<button class="btn">未禁用的按钮</button>
</form><div><a href="#" class="btn" disabled>通过disabled属性禁用按钮</a> 
<a href="#" class="btn disabled">通过添加类名disabled禁用按钮
</a><a href="#" class="btn">未禁用的按钮</a>
</div>

Das obige ist der detaillierte Inhalt vonEinführung und Anwendung des Bootsrtap-Formulars. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

表单

Quelle：php.cn

Vorheriger Artikel：Ausführliche Erläuterung der neuen Attribute start und reverse des ol-Tags in HTML5 Nächster Artikel：Detaillierte Erläuterung der Pfadprobleme in Angular

Erklärung dieser Website

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

Neueste Artikel des Autors

• Beispiel-Tutorial zur Übergabe von Parametern mithilfe der NameValuePair-Methode
  1970-01-01 08:00:00
• Verwenden Sie dom4j, um ein Beispiel für ein XML-Dokument zu analysieren
  1970-01-01 08:00:00
• Katalogdienst – Analyse des Beispielcodes für die Microsoft-Microservice-Architektur
  1970-01-01 08:00:00
• Ausführliche Erläuterung der ersten Schritte mit Beispielen für .net Elasticsearch
  1970-01-01 08:00:00
• Detaillierte Einführung in Spring Boot mit Konfigurationsbeispielen für die JSP-Unterstützung
  1970-01-01 08:00:00
• Wie erkennt JS, ob das von window.open geöffnete Fenster geschlossen ist?
  1970-01-01 08:00:00
• Teilen Sie ein verstümmeltes Problem in sqlyog beim Herstellen einer Verbindung zur Datenbank und dessen Lösung
  1970-01-01 08:00:00
• Beispiele für die Verwendung von Parametern variabler Länge in Java
  1970-01-01 08:00:00
• Das neueste Beispiel-Tutorial für die Amap API WEB-Entwicklung
  1970-01-01 08:00:00
• Vor- und Nachteile von AJAX
  1970-01-01 08:00:00

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

2

2026

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2188

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1845

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1736

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1758

verwandte Themen

Mehr>

• Wo ist der Login-Zugang für Gmail-E-Mail?
• Der aktuelle Preis des ETH-Marktes
• So verwenden Sie das Anhängen in Python
• So lesen Sie eine Spalte in Excel in Python
• So funktioniert der Temperatursensor
• Einführung in SEO-Diagnosemethoden
• Was zeigt die andere Partei, nachdem sie auf WeChat blockiert wurde?
• Wie kaufe und verkaufe ich Bitcoin? Tutorial zum Bitcoin-Handel