Bootsrtap表单

前面的话

  表单是用来与用户做交换的一个网页控件,非凡的表单设计可以让网页与用户更好的互换。表单中普遍的要素紧要概括:文本输入框、下拉选用框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的意义都各不相同,而且不同的浏览器对表单控件渲染的品格都各有不同。

  同样,表单也是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框架中除去默认的按钮风格之外,还有此外六种按钮风格,每种风格的实在都一模一样,不同之处就是按钮的背景颜色、边框颜色和文书颜色

图片 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值

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

 

相关文章