<form role="form"> <div> <label for="inputSuccess1">成功状态</label> <div> <div> <input type="text" placeholder="成功状态" > </div> <span>你输入的信息是正确的</span> </div> </div> </form>
结束语:有关于Bootstrap框架中表单的运用除了按钮部分,到此就算是介绍完了。如果你觉得这样的表单效果并不是你需要的,你完全可以通过forms.less或者_forms.scss文件进行定制,然后重新编译就可以得到你需要的表单效果。在接下来的一节中,我们Bootstrap框架中另一个核心内容——按钮。
按钮
按钮也是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。而且不同的Web页面具有不同的按钮风格,甚至说同一个Web网站或应用程序具有多种按钮风格,比如说不同的按钮颜色、大小和状态等。那么Bootstrap框架也考虑了这些因素,接下来的内容我们一起来探讨Bootstrap框架中的另一核心部分内容——按钮。
<button type="button">基础按钮.btn</button> <button type="button">默认按钮.btn-default</button> <button type="button">主要按钮.btn-primary</button> <button type="button">成功按钮.btn-success</button> <button type="button">信息按钮.btn-info</button> <button type="button">警告按钮.btn-warning</button> <button type="button">危险按钮.btn-danger</button> <button type="button">链接按钮.btn-link</button>
基本按钮
Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样,都是通过类名“btn”来实现。不同的是在V3.x版本要简约很多,去除了V2.x版本中的大量的CSS3中的部分特效,比如说文本阴影(text-shadow)、渐变背景(background-image)、边框阴影(box-shadow)等。
难能可贵的是,Bootstrap框架中的考虑了不同浏览器的解析差异,进行了比较安全的兼容性处理,使按钮效果在不同的浏览器中所呈现的效果基本相同。
Bootstrap框架的按钮使用非常的简单,使用方式如下:
<button type="button">我是一个基本按钮</button>
默认按钮
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
使用默认按钮风格也非常的简单,只需要在基础按钮“btn”的基础上增加类名“btn-default”即可:
<button type="button">默认按钮</button>
多标签支持
一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。
我们一起来看看其他标签制作的基本按钮效果:
<button type="button">button标签按钮</button> <input type="submit" value="input标签按钮"/> <a href="##">a标签按钮</a> <span>span标签按钮</span> <div>div标签按钮</div>
注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮。
定制风格
在介绍按钮开篇就说过,Web页面可能会有不同的按钮风格。那么在Bootstrap框架也考虑了。在Bootstrap框架中除了默认的按钮风格之外,还有其他六种按钮风格,每种风格的其实都一样,不同之处就是按钮的背景颜色、边框颜色和文本颜色。
在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,在使用过程中,开发者只需要选择不同的类名即可: