Bootstrap 基本样式-按钮

最新推荐文章于 2024-05-30 15:01:09 发布

litengbin

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量2.8w

点赞数 4

分类专栏：前端-Bootstrap

前端-Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

按钮样式可以用于
按钮元素<button>
超链元素<a>
按钮类型的input元素 <input type="button">
提交类型的input元素 <input type="submit">
重置类型的input元素 <input type="reset">

原始样式按钮

把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-primary">提交按钮</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>

大一点的按钮

引起瞩目的按钮

<!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%

<!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>

litengbin

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap 基本样式-按钮

按钮样式可以用于按钮元素超链元素按钮类型的input元素提交类型的input元素重置类型的input元素原始样式按钮把button标签变成了平面的，一般不使用原始样式按钮默认按钮无色按钮默认按钮提交按钮用于提交数据提交按钮成功按钮一般用于
复制链接

扫一扫