Bootstrap 按钮

摘要：这篇笔记主要是关于bootstrap提供的定义按钮的不同样式 。

1.按钮样式总结

以下样式可以用在<a>、<button>、<input>元素上。

因为：<a role="button"  href="#">、<input type="button">、<input type="submit">等表现出来的是按钮的形状

不过还是建议在<button>元素上使用按钮class，避免跨浏览器的不一致问题。

用法：<button class="btn btn-default">按钮</button>

样式示例：

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

结果：

1.1 按钮大小

上表显示，.btn-lg、.btn-sm、 .btn-xs、.btn-md(正常大小)、.btn-block是用来调整按钮大小的类。

代码示例：

<div class="container">
    <div>
        <button class="btn btn-danger btn-lg">btn-lg</button>
        <button class="btn btn-primary btn-md">btn-md</button>
        <button class="btn btn-info btn-sm">btn-sm</button>
        <button class="btn btn-success btn-xs">btn-xs</button>
        <button class="btn btn-warning btn-block">btn-block(与父元素同宽)</button>
    </div>
</div>

显示如下：

1.2 按钮状态

　　bootstrap提供了按钮激活、禁用等状态的类。

　　按钮处于激活状态（active）时，其外观会发生变化，呈现深色的背景、边框和阴影，<a  href="#" class="btn btn-primary active" role="button">。

　　按钮处于禁用状态（disabled）时，按钮颜色会变淡50%，并失去渐变，点击时不会发生任何变化，<button class="btn btn-primary active">；

　　这两种状态都能用于按钮元素<button>和锚元素<a>

注意！

　　与表单输入框等禁用状态不同，锚元素的禁止状态是由类决定的，不是属性。例如，<a href="#" class="btn btn-primary disabled" role="button">。；

　　按钮元素的禁用状态是由disabled属性决定的。例如，。<button class="btn btn-primary" disabled="disabled">。

2.字体图标（glyphicons）

字体图标是在web项目中使用的图标字体，bootstrap捆绑了200多种字体格式的字形。

2.1 用法

代码：<span class="glyphicon glyphicon-search"></span>

字体图标经常和按钮元素搭配使用:

<button class="btn btn-primary">
    <span class="glyphicon glyphicon-search"></span>搜索
</button>
<button class="btn btn-primary">
    <span class="glyphicon glyphicon-user"></span>用户
</button>
<button class="btn btn-default">
    <span class="glyphicon glyphicon-home"></span>首页
</button>
<button class="btn btn-info">
    <span class="glyphicon glyphicon-shopping-cart"></span>购物
</button>

显示如下：

2.2 定制字体图标

通过改变字体的尺寸、颜色和应用文本阴影来进行定制图标。

 尺寸：

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg" style="font-size: 30px">
    <span class="glyphicon glyphicon-user"></span> User
</button>

颜色：

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg" style="color: black;">
    <span class="glyphicon glyphicon-user"></span> User
</button>

文本阴影：

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: red 9px 6px 6px;">
    <span class="glyphicon glyphicon-user"></span> User
</button>

 

 3.按钮组

3.1 基本的按钮组（.btn-group）

把带有类.btn 的按钮放在 .btn-group的容器中，形成按钮组。实例：

<div class="btn-group"> 
    <button type="button" class="btn btn-default">按钮 1</button> 
    <button type="button" class="btn btn-success">按钮 2</button> 
    <button type="button" class="btn btn-primary">按钮 3</button> 
    <button type="button" class="btn btn-default">按钮 4</button> 
</div>

显示：

3.2 按钮工具(.btn-toolbar)

把几组带有类 .btn-group 的组件放在带有 .btn-toolbar 的大容器中，形成更加复杂的组件。示例：

<div class="btn-toolbar" role="toolbar"> 
    <div class="btn-group"> 
        <button type="button" class="btn btn-default">按钮 1</button> 
        <button type="button" class="btn btn-default">按钮 2</button> 
        <button type="button" class="btn btn-default">按钮 3</button> 
    </div> 
    <div class="btn-group"> 
        <button type="button" class="btn btn-default">按钮 4</button> 
        <button type="button" class="btn btn-default">按钮 5</button> 
        <button type="button" class="btn btn-default">按钮 6</button> 
    </div> 
    <div class="btn-group"> 
        <button type="button" class="btn btn-default">按钮 7</button> 
        <button type="button" class="btn btn-default">按钮 8</button> 
        <button type="button" class="btn btn-default">按钮 9</button> 
    </div> 
</div>

显示：

3.3 按钮大小（.btn-group-lg、.btn-group-md、.btn-group-sm、.btn-group-xs）

在<div class=".btn-group">中添加类 .btn-group-* 来改变整组按钮的大小。 如<dic class=".btn-group btn-group-lg">。

在以上按钮工具中改变按钮大小。例如，在第2行、第7行、第12行分别添加类 .btn-group-lg、.btn-group-sm、btn-group-xs。结果如下：

3.4 嵌套

在一个 .btn-groug 组件中嵌套另一个 .btn-group 组件，经常与下拉菜单一块使用。代码示例：

<div class="btn-group"> 
    <button type="button" class="btn btn-default">按钮 1</button> 
    <button type="button" class="btn btn-default">按钮 2</button> 
    <div class="btn-group"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
            按钮3 <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu"> 
            <li><a href="#">下拉链接 1</a></li> 
            <li><a href="#">下拉链接 2</a></li> 
        </ul> 
    </div> 
</div>

显示:

3.5 按钮组垂直（.btn-group-vertical）

把上面的程序的第1行和第4行中的<div class="btn-group">替换成<div class="btn-group-vertical">即可。结果显示如下：

4 按钮下拉菜单

4.1 基本的按钮下拉菜单

把按钮与下拉菜单结合使用，只需要在一个.btn-group中放置按钮和下拉菜单即可。代码示例如3.4中的嵌套代码。

4.2 分割的按钮下拉菜单

形如：。其实是两个按钮组成，左边的按钮可以带有链接，也可以不带；右边的按钮与下拉菜单相结合，进而组成分割的按钮下拉菜单。

代码示例：

<div class="btn-group">
    <button class="btn btn-primary">按钮</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
        <span class="caret"></span>
        <span class="sr-only">下拉菜单触发器</span>
    </button> 
    <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">功能1</a></li> 
        <li><a href="#">功能2</a></li> 
        <li><a href="#">功能3</a></li> 
        <li class="divider"></li> 
        <li><a href="#">分离的链接</a></li> 
    </ul> 
</div> 

形如：

4.3 按钮下拉菜单的大小（.btn-lg、.btn-sm、.btn-xs）

向.btn-group中的<button>元素添加类 .btn-lg、.btn-sm、.btn-xs，即可改变 按钮下拉菜单的大小。形如：

4.4 按钮上拉菜单(dropup)向父容器 .btn-group 添加类 .dropup即可。代码示例;

<div class="btn-group dropup"> 
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
        按钮1<span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">功能1</a></li> 
        <li><a href="#">功能2</a></li> 
        <li><a href="#">功能3</a></li> 
        <li class="divider"></li> 
        <li><a href="#">分离的链接</a></li> 
    </ul> 
</div>

显示如下：