BootStrap 按钮样式

骑着蜗牛赶火车

已于 2023-11-09 08:37:54 修改

阅读量391

点赞数

CC 4.0 BY-SA版权

文章标签： bootstrap 前端 html

于 2023-11-09 08:26:11 首次发布

本文链接：https://blog.csdn.net/m0_63649608/article/details/134302543

本文介绍了如何在HTML中使用Bootstrap创建不同样式和功能的按钮，包括success,default,danger等，以及按钮大小调整和状态控制。同时强调了在页面加载时的JQuery、CSS和JS文件加载顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!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>

		<title></title>
	</head>
	<body>
		<!-- 以下“成功”“默认”只是风格 -->
		<button class="btn btn-success">成功按钮</button><br><br>
		<button class="btn btn-default">默认按钮</button><br />
		<button class="btn btn-danger">危险按钮</button><br />
		<button class="btn btn-block">宽屏按钮</button><br />
		<button class="btn btn-group">我也不知道</button><br />
		<button class="btn btn-info">信息按钮</button><br />
		<button class="btn btn-primary">提交按钮</button><br />
		<button class="btn btn-warning">警告按钮</button><br />
		<button class="btn btn-link">链接按钮</button><br />
		<!-- 以下三个有点像衣服的大小号 -->
		<button class="btn btn-lg">大按钮</button><br />
		<button class="btn btn-sm">小按钮</button><br />
		<button class="btn btn-xs">小小按钮</button><br />
		<!-- 以下两个没有“btn-” -->
		<button class="btn active">激活按钮</button><br />
		<button class="btn disabled">无效按钮</button><br />
		<!-- 混用 -->
		<button type="button" class="btn disabled btn-danger btn-xs">发红包</button>
		
		
		
	</body>
</html>

链接: https://pan.baidu.com/s/1Vngp4q55G4FARFkF-xbPhQ

提取码: h657

下载后将BootStrap 与html放置同一目录下，而且加载也是有顺序的：

        首先是JQuery
        然后是Bootstrap css
        最后是Bootstrap js

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