bootstrap:按钮,下拉菜单

本文详细介绍了使用CSS为按钮设置不同样式的方法,包括调整按钮大小、风格等,并展示了如何创建按钮组及带有下拉菜单的按钮。

 

'btn':加按钮样式

btn-small btn-large:调整按钮大小

btn-primary....:调整按钮风格

btn-group:声明这是一个按钮组

<span class='caret'></span>:上图的三角形图标元素

按钮、按钮大小、按钮风格<br>

<div class=''>

<a class='btn' href='javascript:;'>常规按钮</a>

<a class='btn btn-small' href='javascript:;'>小按钮</a>

<a class='btn btn-large' href='javascript:;'>主要按钮</a>

<a class='btn btn-primary' href='javascript:;'>primary</a>

<a class='btn btn-danger' href='javascript:;'>danger</a>

<a class='btn btn-warning' href='javascript:;'>warning</a>

<a class='btn btn-success' href='javascript:;'>success</a>

<a class='btn btn-info' href='javascript:;'>info</a>

<a class='btn btn-inverse' href='javascript:;'>inverse</a>

</div>

<br>

按钮组<br>

<div class='btn-group'>

<a class='btn ' href='javascript:;'>按钮1</a>

<a class='btn ' href='javascript:;'>按钮2</a>

<a class='btn ' href='javascript:;'>按钮3</a>

</div>

下拉菜单

<div class='btn-group'>

  <a class='btn'>按钮4</a>

  <a class='btn dropdown-toggle' data-toggle='dropdown' href='javascript:;'>

    <span class='caret'></span>

  </a>

  <ul class='dropdown-menu'>

    <li><a href='javascript:;'>item1</a></li>

    <li><a href='javascript:;'>item2</a></li>

    <li><a href='javascript:;'>item3</a></li>

  </ul>

</div>

 

转载于:https://www.cnblogs.com/carolina/p/5623071.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值