Bootstrap表单之按钮专题

按钮:Bootstrap框架的按钮也是一个独立部分,我们同样在不同的版本之中能找到对应的代码:

LESS版本:查看源文件buttons.less        Sass版本:查看源文件_buttons.scss         已编译版本:查看源文件bootstrap.css文件第1992行~第2353行

各种按钮代码如下:

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

1.基本按钮

类(.btn)

<button class="btn" type="button">基本按钮</button>

2.默认按钮
在按钮的基础上增加类(.btn-default)

<button class="btn btn-default" type="button">默认按钮</button>

3.多标签支持制作按钮

<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 class="btn btn-default">span标签按钮</span>  
<div class="btn btn-default">div标签按钮</div>  

4.定制按钮风格

   <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-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> 
   <button class="btn btn-info" type="button">信息按钮.btn-info</button>

5.按钮的大小

    <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
    <button class="btn btn-primary" type="button">正常按钮</button>
    <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
    <button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

6.块状按钮(btn-block)

    <button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> 
    <button class="btn btn-primary btn-block" type="button">正常按钮</button>
    <button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
    <button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>   

7.按钮状态:活动状态(悬浮状态:hover,点击状态:active,焦点状态:focus)

8.按钮状态:禁用状态

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

 

posted @ 2016-01-22 18:59  璇烨  阅读(314)  评论(0编辑  收藏  举报