how2j.cn

效果 样式(悬停可选中) 说明 示例代码 
<!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>
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>
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>
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>
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>
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>
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>
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-link">表现为链接</button>
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>
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>
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>
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-block">宽屏按钮</button>
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>
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">领红包</button>
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>
edit
多种按钮样式混用
示例代码
示例 1 : 原始样式按钮   
示例 2 : 默认按钮   
示例 3 : 提交按钮   
示例 4 : 成功按钮   
示例 5 : 信息按钮   
示例 6 : 警告按钮   
示例 7 : 危险按钮   
示例 8 : 表现为链接   
示例 9 : 大一点的按钮   
示例 10 : 小一点的按钮   
示例 11 : 最小的按钮   
示例 12 : 宽屏按钮   
示例 13 : 激活状态按钮   
示例 14 : 无效按钮   
示例 15 : 多种按钮样式混用   

示例 1 :

原始样式按钮

edit 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 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> 
<!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 全屏编辑，再次点击恢复
渲染中 渲染完成
效果


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


提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
关于 前端部分-BootStrap-按钮 的提问

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

上传截图