bootstrap有哪些按钮样式?

Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。

bootstrap有哪些按钮样式?

按钮样式 可以用于

  • 按钮元素<button>

  • 超链元素<a>

  • 按钮类型的input元素 <input type="button">

  • 提交类型的input元素 <input type="submit">

  • 重置类型的input元素 <input type="reset">

1.jpg

2.jpg

3.jpg

原始样式按钮

4.jpg

把button标签变成了平面的,一般不使用

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn">原始样式按钮</button>

默认按钮

无色按钮

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

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

提交按钮

用于提交数据

成功按钮

一般用于一系列操作的最后一步,比如购物车的最后付款一步

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-success">成功按钮</button>

信息按钮

点击后,显示更多的信息

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-info">信息按钮</button>

警告按钮

一般用于修改行为的按钮

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-warning">警告按钮</button>

危险按钮

一般用于严重行为的按钮,比如删除

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-danger">危险按钮</button>

表现为连接

button标签会表现为一个超链,但是依然是一个button标签

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-link">表现为链接</button>

大一点的按钮

引起瞩目的按钮

12.jpg

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-lg">大一点的按钮</button>

小一点的按钮

放不下的时候,就用小一点的按钮

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-sm">小一点的按钮</button>

最小的按钮

还放不下就用这个

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-xs">最小的按钮</button>

宽屏按钮

水平方向占用父容器的100%

15.jpg

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-block">宽屏按钮</button>

激活状态按钮

按钮处于正在被按下状态,一般用于显示一个需要消耗较多时间的操作,比如上传一个图片

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn active">激活状态按钮</button>

无效按钮

按钮处于无效状态,不可点击,比如发了2秒钟后的红包

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn disabled">领红包</button>

多种按钮样式混用

多种按钮样式可以用在一起

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn disabled btn-danger btn-xs">发红包</button>

更多web前端知识,请查阅 HTML中文网 !!

以上就是bootstrap有哪些按钮样式?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Bootstrap 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏