BootstrapBootsrtap表单

眼前的语句

  表单是故来跟用户做交流的一个网页控件,良好的表单设计能给网页和用户更好的联络。表单中广的要素主要概括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所从底意向都各不相同,而且不同的浏览器对表单控件渲染的作风都各有不同。

  同样,表单也是Bootstrap框架中之核心内容,本文将详细介绍Bootstrap的表单

 

基础表单

  对于基础表单,Bootstrap并未对那举行顶多之定制性效果设计,仅仅针对表单内的fieldset、legend、label标签进行了定制

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等展开了细化设置

  当然表单除了就几乎单元素之外,还有input、select、textarea等因素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果及时几只因素运用了类名“form-control”,将会落实部分规划上之定制效果

  1、宽度变成了100%

  2、设置了一个浅灰色(#ccc)的边框

  3、具有4px的圆角

  4、设置阴影效果,并且元素得到问题之常,阴影和边框效果会具备转

  5、设置了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框架默认的表单是垂直显示风格,但许多时节咱们要之程度表单风格

  通过为表单上加 .form-horizontal 类,并一起使用 Bootstrap
预置的栅格类,可以用 label 标签以及控件组水平并清除布局。这样做将改变
.form-group
的行事,使该表现吗栅格系统受到的行(row),因此即便无需更额外上加 .row

  以<form>元素上使类名“form-horizontal”主要有以下几独作用:

  1、设置表单控件padding和margin值

  2、改变“form-group”的表现形式,类似于网格系统的“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>

 

内联表单

  有时候我们用拿表单的控件都当一行内展示。在Bootstrap框架中贯彻这样的表单效果是容易的,只待以<form>元素被补充加类名“form-inline”即可。内联表单实现原理非常简单,欲将表单控件在一行显示,就待以表单控件设置成内联块元素(display:inline-block)

  也 <form> 元素添加 .form-inline 类可要其情节失实对齐并且表现也
inline-block 级别的控件。只适用于视口(viewport)至少在 768px
宽度时(视口宽度再小的讲话虽会使表单折叠)

  于 Bootstrap
中,输入框和单选/多选框控件默认为装也 width: 100%; 宽度。在内联表单,我们用这些要素的增长率设置为 width: auto;,因此,多单控件可以排在同一行。根据布局需求,可能用有的额外的定制化组件

  如果没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,可以经也 label 设置 .sr-only 类将那个藏。还有有增援技术提供label标签的代方案,比如 aria-labelaria-labelledby 或 title 属性。如果这些还不有,屏幕阅读器可能会见动用用 placeholder 属性,如果有的话,使用占位符来替代其他的标记,但如小心,这种办法是勿妥当之

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

 

表单控件

  每一个表单都是出于表单控件组成。离开了控件,表单就失去了意义

【输入框】

  单行输入框,常见的公文输入框,也即是input的type属性值为text。在Bootstrap中动用input时为非得上加type类型,如果没有点名type类型,将无法获得正确的体裁,因为Bootstrap框架都是由此input[type=“?”](其中?号表示type类型,比如说text类型,对应之是input[type=“text”])的款型来定义样式的

  包括大部分表单控件、文本输入域控件,还支持具备 HTML5
类型的输入控件:
textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtel
color

  为了为控件在各种表单风格中样式不离谱,需要加加类名“form-control”

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

【下拉列表】

  Bootstrap框架中之下拉捎框使用及原始的等同,多行选设置multiple属性的价为multiple。Bootstrap框架会为这些元素供合之样式风格 

  [注意]有的是原生选择菜单 – 即以 Safari 和 Chrome 中 –
的圆角是无能为力通过改 border-radius 属性来改变之

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

【文本域】

  文本域和旧使用方法一致,设置rows可定义其入骨,设置cols可以装其宽度。但假如textarea元素中上加了类名“form-control”类名,则无论需安装cols属性。因为Bootstrap框架中之“form-control”样式的表单控件宽度为100%还是auto。 当然,也得以依据需要改
rows 属性

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

【多选和单选框】

  多选框(checkbox)用于选择列表中的一个还是多个选项,而单选框(radio)用于从多单挑选中单选取一个

  Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们开了片特殊化处理,主要是checkbox和radio与label标签配合使用会面世一些有些问题(最头痛的是对准一头问题) 

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

  通过将 .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>

【静态控件】

  如果需要以表单中拿一如既往履纯文本和 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>

 

控件尺寸

  前面看到底表单控件都例行的大大小小。可以经安装控件的height,line-height,padding和font-size等属性来落实控件的莫大设置。不过Bootstrap框架还提供了零星个不同之类名,用来决定表单控件的冲天。这片只类名是:

  1、input-sm:让控件比正常尺寸更粗

  2、input-lg:让控件比常规尺寸更特别

  这片只类似适用于表单中的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 元素和表单控件快速设置尺寸

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

  用栅格系统被的排列(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>

 

控件状态

  表单主要用来和用户沟通,好之表单就能够更好的与用户展开关联,而好之表单一定距离不上马表单的控件状态。

  每一样栽表单状态且能够叫用户传递不同之信息,比如表单有热点的状态可以告诉用户可以输入或选择东西,禁用状态好告诉用户不可以输入或选择东西,还有就是是表单控件验证状态,可以告诉用户的操作是否对等。Bootstrap框架中之表单控件也负有这些状态

【焦点状态】

  焦点状态是由此伪类“:focus”来促成。Bootstrap框架中表单控件的问题状态去了outline的默认样式,重新长阴影效果box-shadow

<input class="form-control">

【禁用状态】

  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>

  于Bootstrap框架中,如果fieldset设置了disabled属性,整个域都拿远在被剥夺状态 

  [注意]对此整个禁用的域中,如果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>

【只读状态】

  也输入框设置 readonly
属性可以禁止用户改输入框中的情。处于只读状态的输入框颜色更浅(就比如于剥夺的输入框一样),但是还保留标准的鼠标状态

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

【校验状态】

   于制造表单时,不免要举行表单验证。同样也待提供验证状态样式,在Bootstrap框架中平等提供及时几乎栽效应

  1、.has-warning:警告状态(黄色)

  2、.has-error:错误状态(红色)

  3、.has-success:成功状态(绿色)

  使用的下偏偏需要在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">
  A block of help text that breaks onto a new line and may extend beyond one line.
</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>

  很多上,在表单验证的当儿,不同的状态会提供不同之
icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中呢供了如此的功力。如果想为表单在对应之状态下显得
icon 出来,只需要在相应之状态下加加类名“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">

  (success)
</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">

  (warning)
</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">

  (error)
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    @
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>

  (success)
</div>

  当然,也堪呢水平排列的表单和内联表单设置可摘的图标

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

      (success)
    </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">
        @
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>

      (success)
    </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">

    (success)
  </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">
      @
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>

    (success)
  </div>
</form>

【提示信息】

  以制表单验证时,要供不同之提示信息。在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="成功状态" >
    你输入的信息是正确的

  </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="警告状态">
    请输入正确信息

  </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="错误状态">
    你输入的信息是错误的

  </div>
</form>  

 

按钮

  按钮是Bootstrap框架核心内容之一。因为按钮是Web制作中不得缺失的东西。而且不同的Web页面具有不同的按钮风格,甚至说跟一个Web网站或应用程序具有强按钮风格,比如说不同的按钮颜色、大小以及状态等

【基本按钮】

  Bootstrap框架的骨干按钮是经过类名“btn”来兑现

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

【默认按钮】

  Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后经“.btn-default”定义了一个默认的按钮风格。默认按钮的风骨就是于基础按钮的品格的底蕴及改了按钮的背景颜色、边框颜色和文件颜色

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

【按钮元素】

  可以为 <a><button> 或 <input> 元素添加依钮类(button
class)即可使用 Bootstrap 提供的体

  制作按钮通常采取下代码来实现:

  ☑ input[type=“submit”]

  ☑ input[type=“button”]

  ☑ input[type=“reset”]

  ☑ <button>

  ☑ <a>

  当然了,还得下于另外的竹签元素上,如<div>,只要在打造按钮的标签元素上上加类名“btn”即可

  虽然据钮类可以采用到另外因素上,但是,导航和导航漫长组件只支持 <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标签按钮
<div class="btn btn-default">div标签按钮</div>

【按钮风格】

  在Bootstrap框架中除了默认的按钮风格之外,还生另外六栽按钮风格,每种风格的实际上都同一,不同之处就是按钮的背景颜色、边框颜色跟文件颜色

Bootstrap 1

  使用起来就那个简短,就如前介绍的默认按钮一样的应用方法,只待以基础按钮“.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>

【按钮尺寸】

  使用 .btn-lg.btn-sm 或 .btn-xs 就可以获取不同尺寸的按钮

  通过让按钮上加 .btn-block 类可以拿其拉扯伸到父元素100%底增幅,而且按钮也变为了块级(block)元素,并且这按钮无会见出其它的padding和margin值

Bootstrap 2

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

【按钮状态】

  Bootstrap框架针对按钮的状态做了有些非常处理。在Bootstrap框架中针对按钮的状态效果主要分为两种:活动状态和剥夺状态。

  Bootstrap按钮的活动状态主要概括按钮的漂浮状态(:hover),点击状态(:active)和症结状态(:focus)几种植

  当按钮处于激活状态时,其展现也给按压下去(底色更怪、边框夜色更特别、向内投阴影)。对于 <button> 元素,是通过:active状态实现的。对于<a>元素,是通过.active仿佛实现之。然而,还可以.active 应用到<button>上(包含 aria-pressed="true"特性)),并经过编程的章程如该处于激活状态

  由于 :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>

  和input等表单控件一样,在Bootstrap框架的按钮中呢不无禁用状态的安装。禁用状态和另状态按钮相比,就是背景颜色之透明度做了肯定的拍卖,opcity的价值由100%调动呢65%。

  于Bootstrap框架中,要禁用按钮有一定量栽实现方式:

  方法1:在标签中上加disabled属性

  方法2:在要素标签中上加类名“disabled”

  两者的主要区别是:

  “.disabled”样式不会见禁止按钮的默认行为,比如说提交和重置行为相当。如果想要于这样的剥夺按钮也会禁止按钮的默认行为,则用经JavaScript这样的语言来拍卖

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

 

相关文章