bootstrap按钮

最新推荐文章于 2024-06-10 15:24:51 发布

原创最新推荐文章于 2024-06-10 15:24:51 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#按钮 #bootstrap

bootstrap 专栏收录该内容

26 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap</title>
	<style type="text/css">
		div{
			position: relative;
			left:100px;
			top:100px;
			width:800px;
		}
		div button{
			display:block;
			margin:10px;
		}
	</style>
</head>
<body>
	<script src="jquery.min.js"></script>
	<link href="bootstrap.min.css" rel="stylesheet">
	<script src="bootstrap.min.js"></script>
	<div>
		<button type="button" class="btn">原始样式按钮</button><br>
		<button class="btn btn-default">默认按钮</button><br>
		<button class="btn btn-primary">提交按钮</button><br>
		<button class="btn btn-success">成功按钮</button><br>
		<button class="btn btn-info">信息按钮</button><br>
		<button class="btn btn-warning">警告按钮</button><br>
		<button class="btn btn-danger">危险按钮</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>
		<button class="btn btn-block">宽屏按钮</button><br>
		<button class="btn active">激活状态按钮</button><br>
		<button class="btn disabled">无效状态按钮</button><br>
		<button class="btn btn-danger btn-sm disabled">发红包</button>
	</div>
</body>
</html>

在这里插入图片描述