bootstrap基础知识（四）－－按钮

按钮

1）按钮组

如果需要多个按钮组合

可以是一个div并且添加类名“”btn－group“

例如：

</button>

…

扫描二维码关注公众号，回复： 1898856 查看本文章

</button>

</div>

效果：

可以使用其他标签如a标签

但是不管什么标签，都要在“btn－group”容器中的标签元素添加类名“btn”

2）按钮工具栏

将“btn－group”放到类名为“btn－toolbar”的div中，可以实现文本编辑器

原理：将多个分组“btn－group”元素进行浮动，并且每组保持5px的左外距

添加类名“btn-group-lg”,”btn-group-sm”,”btn-group-xs”得到不同大小的按钮组

3）按钮（嵌套分组）

将下拉菜单和按钮组合实现导航效果

使用方法：

将下拉菜单的“dropdown”类名改成“btn－group”，和普通按钮放在同一级别

代码如下：

</ul>

</div>

4）按钮垂直分组

需要按钮垂直效果，需要将类名“btn-group”改成“btn-group-vertical”

与水平分组不同的是：

水平分组左上左下，右上右下为圆角

垂直分组左上右上，左下右下为圆角

5）等分按钮（自适应分组按钮）

整个按钮占容器百分之百，其次例如按钮有五个，自动分为每个按钮占百分之20

使用方法：在类名”btn-group”后添加类名“btn-group-justified”

原理：将按钮组拟成表格的形式

注意：此处尽可能使用<a>标签，因为有的<button>标签在某些浏览器不支持

</div>

6）按钮下拉菜单

外观效果与普通下拉菜单相同，不同的是在下拉菜单基础上封装了按钮的效果

使用方法：把曾经的名为“dropdown”的div改成了“btn－group”

7）按钮的向上向下三角以及向上弹起的下拉菜单

向下三角：在button标签中添加一个名为caret的span

如：

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class=“caret"></span></button>

需要向上三角：

在“btn－group”类名后追加类名“dropup”

效果：

实现向上弹起：

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

<li><a href="##">按钮下拉菜单项</a></li>

</ul>

</div>

实现向上弹起菜单的同时，三角自动转变为向上三角

bootstrap基础知识（四）－－按钮

猜你喜欢