您的位置：首页 > Web前端 > BootStrap

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

2013-11-24 16:00 232 查看

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、效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航