BootStrap系列教材（三）- 基本样式

工具版本兼容问题

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

纠

效果	说明	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn">原始样式按钮</button>	原始样式按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-default">默认按钮</button>	默认按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-primary">提交按钮</button>	提交按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-success">成功按钮</button>	成功按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-info">信息按钮</button>	信息按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-warning">警告按钮</button>	警告按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-danger">危险按钮</button>	危险按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-link">表现为链接</button>	表现为链接	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-lg">大一点的按钮</button>	大一点的按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-sm">小一点的按钮</button>	小一点的按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-xs">最小的按钮</button>	最小的按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-block">宽屏按钮</button>	宽屏按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn active">激活状态按钮</button>	激活状态按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn disabled">领红包</button>	无效按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn disabled btn-danger btn-xs">发红包</button>	多种按钮样式混用	示例代码

示例 1 : 原始样式按钮
示例 2 : 默认按钮
示例 3 : 提交按钮
示例 4 : 成功按钮
示例 5 : 信息按钮
示例 6 : 警告按钮
示例 7 : 危险按钮
示例 8 : 表现为链接
示例 9 : 大一点的按钮
示例 10 : 小一点的按钮
示例 11 : 最小的按钮
示例 12 : 宽屏按钮
示例 13 : 激活状态按钮
示例 14 : 无效按钮
示例 15 : 多种按钮样式混用

示例 1 :

原始样式按钮

edit 顶折

纠问

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

运行效果

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

<button type="button" class="btn">原始样式按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

默认按钮

edit 顶折

纠问

无色按钮

运行效果

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

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

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

提交按钮

edit 顶折

纠问

用于提交数据

运行效果

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

<button type="button" class="btn btn-primary">提交按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

成功按钮

edit 顶折

纠问

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

运行效果

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

<button type="button" class="btn btn-success">成功按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

信息按钮

edit 顶折

纠问

点击后，显示更多的信息

运行效果

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

<button type="button" class="btn btn-info">信息按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

警告按钮

edit 顶折

纠问

一般用于修改行为的按钮

运行效果

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

<button type="button" class="btn btn-warning">警告按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

危险按钮

edit 顶折

纠问

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

运行效果

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

<button type="button" class="btn btn-danger">危险按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 8 :

表现为链接

edit 顶折

纠问

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

运行效果

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

<button type="button" class="btn btn-link">表现为链接</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 9 :

大一点的按钮

edit 顶折

纠问

引起瞩目的按钮

运行效果

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

<button type="button" class="btn btn-lg">大一点的按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 10 :

小一点的按钮

edit 顶折

纠问

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

运行效果

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

<button type="button" class="btn btn-sm">小一点的按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 11 :

最小的按钮

edit 顶折

纠问

还放不下就用这个

运行效果

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

<button type="button" class="btn btn-xs">最小的按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 12 :

宽屏按钮

edit 顶折

纠问

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

运行效果

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

<button type="button" class="btn btn-block">宽屏按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 13 :

激活状态按钮

edit 顶折

纠问

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

运行效果

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

<button type="button" class="btn active">激活状态按钮</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 14 :

无效按钮

edit 顶折

纠问

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

运行效果

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

<button type="button" class="btn disabled">领红包</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 15 :

多种按钮样式混用

edit 顶折

纠问

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

运行效果

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

<button type="button" class="btn disabled btn-danger btn-xs">发红包</button>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

BootStrap系列教材（二）- 入门 - 如何使用

BootStrap系列教材（四）- 基本样式 - 表格

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2019-05-06 醉鸟，这一模块正好讲到 0.0 直接修改调用的参数名就行了嘛

菜鸟何时变老鸟

关于前端部分-BootStrap-按钮 -原始样式按钮的提问

哇靠，这么叼

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-06-03 button获得焦点时外面的轮廓框

QQ会员	关于前端部分-BootStrap-按钮的提问 button获得焦点时button外面的轮廓时一个蓝色的小框，我用 <style> button { outline: none; } </style> 为什么没有用呢？？？？？

1 个答案

FlatDice
答案时间：2019-01-30

button:focus {outline:none !important;} 尝试加了important后就可以去掉蓝色边框了。不知道还有没有其他更好的办法。

<style>
    button:focus {outline:none !important;}
</style>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-02-14 请问这些都要记忆吗?

枫叶	关于前端部分-BootStrap-按钮 -多种按钮样式混用的提问请问这些都要记忆吗?

8 个答案

12345678zZ
答案时间：2023-02-22

要知道，不知道用的时候就很蒙逼

青景
答案时间：2021-07-22

先有个印象，用到时候知道查，用多了就熟悉了

falomsc
答案时间：2021-07-21

没必要，工作又不是闭卷考试，用的时候能对着文档找到就行了

icoffee
答案时间：2019-04-28

我选择狗带............

dekuZ
答案时间：2019-01-26

看一眼就有个印象了

王小二
答案时间：2018-11-29

你是魔鬼吗？

Shrowl
答案时间：2018-08-29

这个……不是对应的单词看一眼就好了嘛

马鹿
答案时间：2018-03-25

需要使用的时候去查吧，全背下来太恐怖了吧

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-12-02 btn-lg无效 btn-success有效

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-BootStrap-按钮的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图