Bootstrap 按钮

最新推荐文章于 2023-12-07 14:42:12 发布

boonyaxnn

最新推荐文章于 2023-12-07 14:42:12 发布

阅读量451

点赞数 2

分类专栏： Bootstrap 文章标签： bootstrap 按钮

本文链接：https://blog.csdn.net/boonyaxnn/article/details/61938641

版权

Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观

按钮大小

hrml代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap 实例 - 按钮选项</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
		button{
			height: 36px;
			width: 156px;
		}
	</style>
	</head>
	<body>
	 <div class="container">
		<!-- 标准的按钮 -->
		<button type="button" class="btn btn-default">  
		</button><!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
		<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><!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
		<button type="button" class="btn btn-link">
			链接按钮
		</button>
	</div>
		<script src="jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

效果图

boonyaxnn

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观按钮大小hrml代码 Bootstrap 实例 - 按钮选项 button{ height: 36px; width: 156px; } 原始按钮成功按钮信息按钮
复制链接

扫一扫