Bootstrap中的表單是什么

這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap中的表單是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

表單是用來與用戶做交流的一個(gè)網(wǎng)頁控件，良好的表單設(shè)計(jì)能夠讓網(wǎng)頁與用戶更好的溝通。表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、復(fù)選按鈕、文本域和按鈕等。其中每個(gè)控件所起的作用都各不相同，而且不同的瀏覽器對表單控件渲染的風(fēng)格都各有不同。

　　同樣，表單也是Bootstrap框架中的核心內(nèi)容，本文將詳細(xì)介紹Bootstrap的表單

基礎(chǔ)表單

　　對于基礎(chǔ)表單，Bootstrap并未對其做太多的定制性效果設(shè)計(jì)，僅僅對表單內(nèi)的fieldset、legend、label標(biāo)簽進(jìn)行了定制

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

　　主要將這些元素的margin、padding和border等進(jìn)行了細(xì)化設(shè)置

　　當(dāng)然表單除了這幾個(gè)元素之外，還有input、select、textarea等元素，在Bootstrap框架中，通過定制了一個(gè)類名`form-control`，也就是說，如果這幾個(gè)元素使用了類名“form-control”，將會(huì)實(shí)現(xiàn)一些設(shè)計(jì)上的定制效果

　　1、寬度變成了100%

　　2、設(shè)置了一個(gè)淺灰色（#ccc）的邊框

　　3、具有4px的圓角

　　4、設(shè)置陰影效果，并且元素得到焦點(diǎn)之時(shí)，陰影和邊框效果會(huì)有所變化

　　5、設(shè)置了placeholder的顏色為#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>

水平表單

　　Bootstrap框架默認(rèn)的表單是垂直顯示風(fēng)格，但很多時(shí)候我們需要的水平表單風(fēng)格

　　通過為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將 label 標(biāo)簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再額外添加 .row 了

　　在<form>元素上使用類名“form-horizontal”主要有以下幾個(gè)作用：

　　1、設(shè)置表單控件padding和margin值

　　2、改變“form-group”的表現(xiàn)形式，類似于網(wǎng)格系統(tǒng)的“row”

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

內(nèi)聯(lián)表單

　　有時(shí)候我們需要將表單的控件都在一行內(nèi)顯示。在Bootstrap框架中實(shí)現(xiàn)這樣的表單效果是輕而易舉的，只需要在<form>元素中添加類名“form-inline”即可。內(nèi)聯(lián)表單實(shí)現(xiàn)原理非常簡單，欲將表單控件在一行顯示，就需要將表單控件設(shè)置成內(nèi)聯(lián)塊元素（display:inline-block）

　　為 <form> 元素添加 .form-inline 類可使其內(nèi)容左對齊并且表現(xiàn)為 inline-block 級別的控件。只適用于視口（viewport）至少在 768px 寬度時(shí)（視口寬度再小的話就會(huì)使表單折疊）

　　在 Bootstrap 中，輸入框和單選/多選框控件默認(rèn)被設(shè)置為 width: 100%; 寬度。在內(nèi)聯(lián)表單，我們將這些元素的寬度設(shè)置為 width: auto;，因此，多個(gè)控件可以排列在同一行。根據(jù)布局需求，可能需要一些額外的定制化組件

　　如果沒有為每個(gè)輸入控件設(shè)置 label 標(biāo)簽，屏幕閱讀器將無法正確識(shí)別。對于這些內(nèi)聯(lián)表單，可以通過為 label 設(shè)置 .sr-only 類將其隱藏。還有一些輔助技術(shù)提供label標(biāo)簽的替代方案，比如 aria-label、aria-labelledby 或 title 屬性。如果這些都不存在，屏幕閱讀器可能會(huì)采取使用 placeholder 屬性，如果存在的話，使用占位符來替代其他的標(biāo)記，但要注意，這種方法是不妥當(dāng)?shù)?/p>

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

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

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

表單控件

　　每一個(gè)表單都是由表單控件組成。離開了控件，表單就失去了意義

【輸入框】

　　單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時(shí)也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因?yàn)锽ootstrap框架都是通過input[type=“?”](其中?號代表type類型，比如說text類型，對應(yīng)的是input[type=“text”])的形式來定義樣式的

　　包括大部分表單控件、文本輸入域控件，還支持所有 HTML5 類型的輸入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color

　　為了讓控件在各種表單風(fēng)格中樣式不出錯(cuò)，需要添加類名“form-control”

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

【下拉列表】

　　Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設(shè)置multiple屬性的值為multiple。Bootstrap框架會(huì)為這些元素提供統(tǒng)一的樣式風(fēng)格

　　[注意]許多原生選擇菜單 - 即在 Safari 和 Chrome 中 - 的圓角是無法通過修改 border-radius 屬性來改變的

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

【文本域】

　　文本域和原始使用方法一樣，設(shè)置rows可定義其高度，設(shè)置cols可以設(shè)置其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設(shè)置cols屬性。因?yàn)锽ootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。 當(dāng)然，也可以根據(jù)需要改變 rows 屬性

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

【多選和單選框】

　　多選框（checkbox）用于選擇列表中的一個(gè)或多個(gè)選項(xiàng)，而單選框（radio）用于從多個(gè)選項(xiàng)中只選擇一個(gè)

　　Bootstrap框架中checkbox和radio有點(diǎn)特殊，Bootstrap針對他們做了一些特殊化處理，主要是checkbox和radio與label標(biāo)簽配合使用會(huì)出現(xiàn)一些小問題（最頭痛的是對齊問題）

　　在Bootstrap框架中，主要借助“.checkbox”和“.radio”樣式，來處理復(fù)選框、單選按鈕與標(biāo)簽的對齊方式

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that—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—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>

　　通過將 .checkbox-inline 或 .radio-inline 類應(yīng)用到一系列的多選框（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>

【靜態(tài)控件】

　　如果需要在表單中將一行純文本和 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>

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

控件尺寸

　　前面看到的表單控件都正常的大小?？梢酝ㄟ^設(shè)置控件的height，line-height，padding和font-size等屬性來實(shí)現(xiàn)控件的高度設(shè)置。不過Bootstrap框架還提供了兩個(gè)不同的類名，用來控制表單控件的高度。這兩個(gè)類名是：

　　1、input-sm:讓控件比正常大小更小

　　2、input-lg:讓控件比正常大小更大

　　這兩個(gè)類適用于表單中的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>

　　通過添加 .form-group-lg 或 .form-group-sm 類，為 .form-horizontal 包裹的 label 元素和表單控件快速設(shè)置尺寸

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

　　用柵格系統(tǒng)中的列（column）包裹輸入框或其任何父元素，都可很容易的為其設(shè)置寬度

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

控件狀態(tài)

　　表單主要用來與用戶溝通，好的表單就能更好的與用戶進(jìn)行溝通，而好的表單一定離不開表單的控件狀態(tài)。

　　每一種表單狀態(tài)都能給用戶傳遞不同的信息，比如表單有焦點(diǎn)的狀態(tài)可以告訴用戶可以輸入或選擇東西，禁用狀態(tài)可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗(yàn)證狀態(tài)，可以告訴用戶的操作是否正確等。Bootstrap框架中的表單控件也具備這些狀態(tài)

【焦點(diǎn)狀態(tài)】

　　焦點(diǎn)狀態(tài)是通過偽類“:focus”來實(shí)現(xiàn)。Bootstrap框架中表單控件的焦點(diǎn)狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果box-shadow

<input class="form-control">

【禁用狀態(tài)】

　　Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實(shí)現(xiàn)方法是一樣的，在相應(yīng)的表單控件上添加屬性“disabled”。和其他表單的禁用狀態(tài)不同的是，Bootstrap框架做了一些樣式風(fēng)格的處理 ，被禁用的輸入框顏色更淺，并且還添加了 not-allowed 鼠標(biāo)狀態(tài)

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

<input class="form-control" disabled>

　　在Bootstrap框架中，如果fieldset設(shè)置了disabled屬性，整個(gè)域都將處于被禁用狀態(tài)

　　[注意]對于整個(gè)禁用的域中，如果legend中有輸入框的話，這個(gè)輸入框是無法被禁用的

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

【只讀狀態(tài)】

　　為輸入框設(shè)置 readonly 屬性可以禁止用戶修改輸入框中的內(nèi)容。處于只讀狀態(tài)的輸入框顏色更淺（就像被禁用的輸入框一樣），但是仍然保留標(biāo)準(zhǔn)的鼠標(biāo)狀態(tài)

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

【校驗(yàn)狀態(tài)】

　　在制作表單時(shí)，不免要做表單驗(yàn)證。同樣也需要提供驗(yàn)證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果

　　1、.has-warning:警告狀態(tài)（黃色）

　　2、.has-error：錯(cuò)誤狀態(tài)（紅色）

　　3、.has-success：成功狀態(tài)（綠色）

　　使用的時(shí)候只需要在form-group容器上或在其父級容器上對應(yīng)添加狀態(tài)類名

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

　　很多時(shí)候，在表單驗(yàn)證的時(shí)候，不同的狀態(tài)會(huì)提供不同的 icon，比如成功是一個(gè)對號（√），錯(cuò)誤是一個(gè)叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果想讓表單在對應(yīng)的狀態(tài)下顯示 icon 出來，只需要在對應(yīng)的狀態(tài)下添加類名“has-feedback”

　　[注意]此類名要與“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>

　　當(dāng)然，也可以為水平排列的表單和內(nèi)聯(lián)表單設(shè)置可選的圖標(biāo)

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

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

【提示信息】

　　在制作表單驗(yàn)證時(shí)，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個(gè)"help-block"樣式，將提示信息以塊狀顯示，并且顯示在控件底部。

<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
    <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">警告狀態(tài)</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態(tài)">
    <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">錯(cuò)誤狀態(tài)</label>
    <input type="text" class="form-control" id="inputError1" placeholder="錯(cuò)誤狀態(tài)">
    <span class="help-block">你輸入的信息是錯(cuò)誤的</span>
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
</form>

按鈕

　　按鈕是Bootstrap框架核心內(nèi)容之一。因?yàn)榘粹o是Web制作中不可缺少的東西。而且不同的Web頁面具有不同的按鈕風(fēng)格，甚至說同一個(gè)Web網(wǎng)站或應(yīng)用程序具有多種按鈕風(fēng)格，比如說不同的按鈕顏色、大小和狀態(tài)等

【基本按鈕】

　　Bootstrap框架的基本按鈕是通過類名“btn”來實(shí)現(xiàn)

<button class="btn" type="button">我是一個(gè)基本按鈕</button>

【默認(rèn)按鈕】

　　Bootstrap框架首先通過基礎(chǔ)類名“.btn”定義了一個(gè)基礎(chǔ)的按鈕風(fēng)格，然后通過“.btn-default”定義了一個(gè)默認(rèn)的按鈕風(fēng)格。默認(rèn)按鈕的風(fēng)格就是在基礎(chǔ)按鈕的風(fēng)格的基礎(chǔ)上修改了按鈕的背景顏色、邊框顏色和文本顏色

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

【按鈕元素】

　　可以為 <a>、<button> 或 <input> 元素添加按鈕類（button class）即可使用 Bootstrap 提供的樣式

　　制作按鈕通常使用下面代碼來實(shí)現(xiàn)：

　　當(dāng)然了，還可以使用在其他的標(biāo)簽元素上，如<p>，只要在制作按鈕的標(biāo)簽元素上添加類名“btn”即可

　　雖然按鈕類可以應(yīng)用到其他元素上，但是，導(dǎo)航和導(dǎo)航條組件只支持 <button> 元素。如果 <a> 元素被作為按鈕使用 -- 并用于在當(dāng)前頁面觸發(fā)某些功能 -- 而不是用于鏈接其他頁面或鏈接當(dāng)前頁面中的其他部分，那么，務(wù)必為其設(shè)置 role="button" 屬性。所以，最佳實(shí)踐是：強(qiáng)烈建議盡可能使用 <button> 元素來獲得在各個(gè)瀏覽器上獲得相匹配的繪制效果

<button class="btn btn-default" type="button">button標(biāo)簽按鈕</button>
<input type="submit" class="btn btn-default" value="input標(biāo)簽按鈕"/>
<a href="##" class="btn btn-default">a標(biāo)簽按鈕</a>
<span class="btn btn-default">span標(biāo)簽按鈕</span>
<div class="btn btn-default">div標(biāo)簽按鈕</div>

【按鈕風(fēng)格】

　　在Bootstrap框架中除了默認(rèn)的按鈕風(fēng)格之外，還有其他六種按鈕風(fēng)格，每種風(fēng)格的其實(shí)都一樣，不同之處就是按鈕的背景顏色、邊框顏色和文本顏色

　　使用起來就很簡單，就像前面介紹的默認(rèn)按鈕一樣的使用方法，只需要在基礎(chǔ)按鈕“.btn”基礎(chǔ)上追加對應(yīng)的類名，就可以得到需要的按鈕風(fēng)格

<button class="btn" type="button">基礎(chǔ)按鈕.btn</button>
<button class="btn btn-default" type="button">默認(rèn)按鈕.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">危險(xiǎn)按鈕.btn-danger</button>
<button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>

【按鈕尺寸】

　　使用 .btn-lg、.btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕

　　通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變?yōu)榱藟K級（block）元素，并且這個(gè)按鈕不會(huì)有任何的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">（默認(rèn)尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默認(rèn)尺寸）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>

【按鈕狀態(tài)】

　　Bootstrap框架針對按鈕的狀態(tài)做了一些特殊處理。在Bootstrap框架中針對按鈕的狀態(tài)效果主要分為兩種：活動(dòng)狀態(tài)和禁用狀態(tài)。

　　Bootstrap按鈕的活動(dòng)狀態(tài)主要包括按鈕的懸浮狀態(tài)(:hover)，點(diǎn)擊狀態(tài)(:active)和焦點(diǎn)狀態(tài)（:focus）幾種

　　當(dāng)按鈕處于激活狀態(tài)時(shí)，其表現(xiàn)為被按壓下去（底色更深、邊框夜色更深、向內(nèi)投射陰影）。對于 <button> 元素，是通過:active狀態(tài)實(shí)現(xiàn)的。對于<a>元素，是通過.active類實(shí)現(xiàn)的。然而，還可以將.active 應(yīng)用到<button>上（包含 aria-pressed="true"屬性)），并通過編程的方式使其處于激活狀態(tài)

　　由于 :active 是偽狀態(tài)，因此無需額外添加，但是在需要讓其表現(xiàn)出同樣外觀的時(shí)候可以添加 .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>

　　和input等表單控件一樣，在Bootstrap框架的按鈕中也具有禁用狀態(tài)的設(shè)置。禁用狀態(tài)與其他狀態(tài)按鈕相比，就是背景顏色的透明度做了一定的處理，opcity的值從100%調(diào)整為65%。

　　在Bootstrap框架中，要禁用按鈕有兩種實(shí)現(xiàn)方式：

　　方法1：在標(biāo)簽中添加disabled屬性

　　方法2：在元素標(biāo)簽中添加類名“disabled”

　　兩者的主要區(qū)別是：

　　“.disabled”樣式不會(huì)禁止按鈕的默認(rèn)行為，比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認(rèn)行為，則需要通過JavaScript這樣的語言來處理

　　對于<a>標(biāo)簽來說，它并不支持使用disable屬性，只支持通過類名“.disable”來禁用按鈕，可以禁止元素的鏈接跳轉(zhuǎn)行為

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

關(guān)于“Bootstrap中的表單是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。