码迷,mamicode.com
首页 > 其他好文 > 详细

Boostrap入门+样式学习--叁--

时间:2015-08-15 23:07:36      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:

11. 基础表单

  • 类名form-control
    1、宽度变成了100%
    2、设置了一个浅灰色(#ccc)的边框
    3、具有4px的圆角
    4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
    5、设置了placeholder的颜色为#999

  • 类名 form-horizontal
    水平表单风格(标签居左,表单控件居右)

  • 类名form-inline
    将表单的控件都在一行内显示

  • 表单控件(输入框input)
    单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”

  • 表单控件(下拉选择框select)
    多行选择设置multiple属性的值为multiple<select multiple class="form-control">

  • 表单控件(文本域textarea)
    文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>
  • 表单控件(复选框checkbox和单选择按钮radio)
    1、不管是checkbox还是radio都使用label包起来了
    2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
    3、radio连同label标签放置在一个名为“.radio”的容器内
    在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。

  • 表单控件(复选框和单选按钮水平排列)
    1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
    2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

  • 表单控件(按钮)
    技术分享

  • 表单控件大小
    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="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">
  • 表单控件状态(焦点状态)
    焦点状态是通过伪类“:focus”来实现

  • 表单控件状态(禁用状态)
    只需要在需要禁用的表单控件上加上“disabled”即可

<input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>

在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。如果legend中有输入框的话,这个输入框是无法被禁用的。

  • 表单控件状态(验证状态)
    1、.has-warning:警告状态(黄色)
    2、.has-error:错误状态(红色)
    3、.has-success:成功状态(绿色)
    使用的时候只需要在form-group容器上对应添加状态类名。
    很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:
<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="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="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="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

   <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">email地址</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

</form>

在 Bootstrap 的小图标都是使用@font-face来制作(后面的内容中将会着重用一节内容来介绍)。而且必须在表单中添加了一个 span 元素

  • 表单提示信息
    平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个help-block样式,将提示信息以块状显示,并且显示在控件底部。help-inline让提示信息显示在控件的后面,也就是同一水平显示

    12.按钮

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

- 按钮大小
技术分享

  • 块状按钮
    Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。

  • 按钮状态——禁用状态
    方法1:在标签中添加disabled属性
    方法2:在元素标签中添加类名“disabled”

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>

版权声明:本文为博主原创文章,谢谢参考!有问题的地方,欢迎纠正,一起进步。

Boostrap入门+样式学习--叁--

标签:

原文地址:http://blog.csdn.net/emilyrr/article/details/47680583

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!