Bootstrap -- 按钮样式与使用
1. 可用于<a>, <button>, 或 <input> 元素的按钮样式
![\"\"](\"/images/cnblogs/1544335151gr15443z3q5151.png\")
按钮样式使用：
![\"\"](\"/images/cnblogs/15443351511544x33h5cc151.gif\")
![\"\"](\"/images/cnblogs/1544335151R1544335sm1o51.gif\")
<!DOCTYPE html> <html> <head> < http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/> < >My Test bootstrap</ > < rel=\"stylesheet\" href=\"./css/bootstrap.min.css\"> < type=\"text/ \" src=\"./js/bootstrap.min.js\"></ > </head> <body> <button type=\"button\" class=\"btn btn-primary\">原始按钮</button> <button type=\"button\" class=\"btn btn-success\">成功按钮</button> <button type=\"button\" class=\"btn btn-info\">信息按钮</button> <button type=\"button\" class=\"btn btn-warning\">警告按钮</button> <button type=\"button\" class=\"btn btn-danger\">危险按钮</button> </body> </html>
实现效果：
![\"\"](\"/images/cnblogs/154433515115kA4e43351551.png\")
2. 各种大小按钮的样式
![\"\"](\"/images/cnblogs/15443351515fz154433515B1.png\")
按钮大小样式的使用：
<!DOCTYPE html> <html> <head> < http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/> < >My Test bootstrap</ > < rel=\"stylesheet\" href=\"./css/bootstrap.min.css\"> < type=\"text/ \" src=\"./js/bootstrap.min.js\"></ > </head> <body> <button type=\"button\" class=\"btn btn-success\">默认大小的按钮</button> <button type=\"button\" class=\"btn btn-success btn-lg\">大的按钮</button> <button type=\"button\" class=\"btn btn-success btn-sm\">小的按钮</button> <button type=\"button\" class=\"btn btn-success btn-xs\">特别小的按钮</button> </body> </html>
实现效果：
![\"\"](\"/images/cnblogs/1544335151154j43rQ35m151.png\")
3. 按钮状态：激活状态（.active）、禁用状态（disabled）
<!DOCTYPE html> <html> <head> < http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/> < >My Test bootstrap</ > < rel=\"stylesheet\" href=\"./css/bootstrap.min.css\"> < type=\"text/ \" src=\"./js/bootstrap.min.js\"></ > </head> <body> <button type=\"button\" class=\"btn btn-success\">默认按钮</button> <button type=\"button\" class=\"btn btn-success active\">激活状态按钮</button> <button type=\"button\" class=\"btn btn-success disabled\">禁用状态按钮</button> </body> </html>
实现效果：
![\"\"](\"/images/cnblogs/1544335151154433C515iRG1.png\")
4. 按钮组：使用 .btn-group 可以创建按钮组
使用按钮组：
<!DOCTYPE html> <html> <head> < http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/> < >My Test bootstrap</ > < rel=\"stylesheet\" href=\"./css/bootstrap.min.css\"> < type=\"text/ \" src=\"./js/bootstrap.min.js\"></ > </head> <body> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-primary\">小胡子</button> <button type=\"button\" class=\"btn btn-primary\">大胡子</button> <button type=\"button\" class=\"btn btn-primary\">小朋友</button> </div> </body> </html>
实现效果：
![\"\"](\"/images/cnblogs/15443351520154O43351f5I2.png\")
5. 按钮自适应样式
自适应样式使用：
<!DOCTYPE html> <html> <head> < http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/> < >My Test bootstrap</ > < rel=\"stylesheet\" href=\"./css/bootstrap.min.css\"> < type=\"text/ \" src=\"./js/bootstrap.min.js\"></ > </head> <body> <div class=\"btn-group btn-group-justified\"> <a href=\"https://www.baidu.com\" class=\"btn btn-primary\">百度</a> <a href=\"https://www.taobao.com\" class=\"btn btn-primary\">淘宝</a> <a href=\"https://www.qq.com\" class=\"btn btn-primary\">腾讯</a> </div> </body> </html>
实现效果：
![\"\"](\"/images/cnblogs/1544335152154433nPdY5152.png\")
继续阅读与本文标签相同的文章
上一篇 :
不可忽视的前端安全问题——XSS攻击
下一篇 :
前端性能优化指南——网络篇
-
Linux rsyslog 简记
2026-05-19栏目： 教程
-
Oracle 左连接(left join) 排序问题
2026-05-19栏目： 教程
-
Java同步：synchronized解析
2026-05-19栏目： 教程
-
Oracle查询结果集无法被redis缓存序列化问题
2026-05-19栏目： 教程
-
Knative Serving 进阶: Knative Serving SDK 开发实践
2026-05-19栏目： 教程