基本按钮

通过将button标签中的class设置为对应的类，可以将button设置为不同的css格式，首先设置类为btn，不设置情况下为默认的html按钮格式，设置后变为bootstrap的基本按钮样式，之后根据需求，再继续添加对应的类，常用的类有：

使用后效果如图：

从上到下为：默认html按钮、bootstrap按钮基本样式、默认状态、原始按钮（蓝色）、成功（绿色）、弹出信息（蓝色）、提示（橙色）、警告（红色）、连接（内部白色，字体为超链接样式），其中涉及颜色的都有鼠标放上去改变颜色的效果。

按钮大小

通过在class中继续引入大小控制类，可以在前面提到的按钮样式的基础上继续控制大小，主要类有：

其中btn-block需要注意一下，设置了这个类的按钮会占据父类元素的整个宽度，效果如图：

按钮状态

所谓按钮状态，主要有激活、禁用，即对应给按钮不同的样式来提示用户这个按钮的状态。

激活状态通过在类中添加active来设置，设置后变现为颜色更深、边框更粗且有阴影，效果如图：

其中上面的是设置了激活的按钮，所谓激活，实际上就是用css模拟按钮按下的样子。

同理禁用状态时表现为颜色变淡并失去渐变效果，直接在属性中添加disabled属性即可或者在类中添加disabled类，可以获得同样的效果。设置后按钮处于不可按的状态。

按钮组

即将一部分按钮放在一个div中构成的一个组，通过将div的类设置为btn-group来实现按钮组的设置，仅设置类为btn-group没有效果，需要添加其他的类来实现效果，使用 .btn-group-lg|sm|xs 来控制按钮组的大小，此外还可以设置类为btn-group-vertical将按钮组内部的按钮变成竖向排列

自适应大小的按钮组

自适应指的是将自动平分父类元素的宽度，如果是用超链接代替按钮来设置按钮组，那么只需要将这个按钮组内的超链接平分这个按钮组的父类的宽度：

<div class="btn-group btn-group-justified"><a href="#" class="btn btn-primary">Apple</a><a href="#" class="btn btn-primary">Samsung</a><a href="#" class="btn btn-primary">Sony</a>
</div>

如果是直接用按钮放入按钮组内的话，需要在每个按钮外再套一个按钮组div，在最外层的div中设置btn-group-justified，不设置的话会让按钮记在一起，达不到应有的效果。

<div class="btn-group btn-group-justified"><div class="btn-group"><button type="button" class="btn btn-primary">Apple</button></div><div class="btn-group"><button type="button" class="btn btn-primary">Samsung</button></div><div class="btn-group"><button type="button" class="btn btn-primary">Sony</button></div>
</div>

内嵌下拉菜单的按钮组

内嵌式即那种点击显示全部菜单的按钮，这种效果实际上是由js来实现的而不是css，所以需要引入

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

由于下载的jquery可能和网站用的不一样，所以显示不出效果，需要引入网上的。

此外，对按钮的理解要到位，按钮标签中包裹的就是按钮中的内容，之后将整个按钮作为一个整体显示效果，内联即在按钮内部添加一个span，从而达到更好的提示效果。将设置了内嵌的按钮单独放在一个btu-group中，代码如下：

<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony <span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">Tablet</a></li><li><a href="#">Smartphone</a></li></ul></div></div>
</div>

还有一种比较有趣的组合式分割按钮，即将两个按钮当成一个按钮来用，第一个小按钮放提示性内容，第二个只设置一个箭头，点击箭头时列表展开，设置方法与内嵌式类似：

<div class="container"><h2>分隔按钮</h2><div class="btn-group"><button type="button" class="btn btn-primary">Sony</button><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">Tablet</a></li><li><a href="#">Smartphone</a></li></ul></div>
</div>

Bootstrap 按钮相关推荐

bootstrap 按钮颜色属性
bootstrap 按钮颜色属性有几种转载于:https://www.cnblogs.com/HUIWANG/p/11027889.html
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件添加可选的 JavaScript 单选框和复选框样式行为. ...
Bootstrap 按钮状态提示
按钮 Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件. Bootstrap ...
Bootstrap 按钮菜单的尺寸
定义按钮菜单时,只需为按钮提供表示尺寸的类 .btn-large..btn-small 或 .btn-mini,就可以制作不同尺寸的按钮.如图 4‑14所示: 图4-14 Bootstrap按钮菜单的 ...
Bootstrap 按钮下拉菜单
按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...
Bootstrap 按钮的外观
Bootstrap提供了 .btn 类,用来定义默认的按钮效果.默认按钮是灰色背景,并带有圆角.可以为页面上的任何元素(如,<a>.<button>.<input> ...
Bootstrap按钮样式
Bootstrap按钮样式 1.新建一个web项目ch07. 2.在ch07中新建一个demo01.html,将css文件模版导入进来. 3.将移动设备优先拷贝到demo01的头文件中. <me ...
WEB前端网页设计-Bootstrap 按钮下拉菜单
目录 Bootstrap 按钮下拉菜单分割的按钮下拉菜单按钮下拉菜单的大小按钮上拉菜单 Bootstrap 按钮下拉菜单本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...
Bootstrap按钮元素使用方法
Bootstrap按钮元素样式 Bootstrap中,总共提供了六种按钮样式,分别是默认.主要.成功.信息.警告以及危险这几个样式,它们对应的类分别是btn-default.btn-primary.b ...

Bootstrap 按钮