bootstrap3的新增和修改的btn-*用法

最新推荐文章于 2025-01-22 22:37:51 发布

依然那么楞

最新推荐文章于 2025-01-22 22:37:51 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： btn-lg btn-xs btn-sm btn-group- btn btn-default

本文链接：https://blog.youkuaiyun.com/ling811/article/details/16920559

本文介绍了Bootstrap中按钮的样式及不同尺寸的实现方法，并通过示例代码展示了如何使用.btn-default和其他尺寸类如.btn-lg、.btn-xs等来调整按钮外观。

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

1、新增的btn-*按钮：btn-group-lg、btn-group-xs、btn-group-sm，这三个是按钮组的大小

修改后的按钮属性：

2.*版 3.0版

.btn .btn .btn-default

`.btn-mini`	`.btn-xs`
`.btn-small`	`.btn-sm`
`.btn-large`	`.btn-lg`

使用btn-default的时候要注意，必须要结合btn使用比如：<button type="button" class="btn btn-default"> 要不btn-default会不起效果。当然 btn 可单独用

2、实验代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.css" >
<script src="dist/js/bootstrap.js"></script>
<title>无标题文档</title>
</head>

<body style="margin:100px">
<div class="container">
	<button type="button" class="btn btn-default">
    	 btn btn-default
    </button>
    <button type="button" class="btn-lg">
    	  <span class="glyphicon glyphicon-star"></span> btn-lg
    </button>
    <button type="button" class="btn-xs">
    	  <span class="glyphicon glyphicon-star"></span> btn-xs
    </button>
    <button type="button" class="btn-sm">
    	  <span class="glyphicon glyphicon-star"></span> btn-sm
    </button>
    <button type="button" class="btn-group-lg">
    	  <span class="glyphicon glyphicon-star"></span> btn-group-lg
    </button>
    <button type="button" class="btn-group-xs">
    	  <span class="glyphicon glyphicon-star"></span> btn-group-xs
    </button>
    <button type="button" class="btn-group-sm">
    	  <span class="glyphicon glyphicon-star"></span> btn-group-sm
    </button>
</div>
</body>

3、效果图：