<!DOCTYPE html>
<html>
<head>
<meta charst="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- user-scalable=no 在移动设备浏览器上，禁止用户缩放（zooming） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<title>Bootstrap基础练习</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除 -->
<!-- 注意：Respond.js不支持 file:// 方式的访问 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 标准按钮 -->
<p>
<button type="button" class="btn btn-default">Defaul（默认按钮）</button>
<!-- 提供视觉加重，表示在一组button中，该按钮是最主要的button -->
<button type="button" class="btn btn-primary">Primary（加重按钮）</button>
<!-- 表示成功或正使用的button -->
<button type="button" class="btn btn-success">Success（成功或正使用按钮）</button>
<!-- 表示信息的button -->
<button type="button" class="btn btn-info">Info（信息按钮）</button>
<!-- 表示要进行某种行为的button -->
<button type="button" class="btn btn-warning">Warning（进行某种行为按钮）</button>
<!-- 表示危险或错误行为的button -->
<button type="button" class="btn btn-danger">Danger（危险或错误行为按钮）</button>
<!-- 让button的行为看起来像链接一样 -->
<button type="button" class="btn btn-link">Link（链接按钮）</button>
</p>
<!-- 按钮大小 .btn-lg、.btn-sm、.btn=xs -->
<p>
<button type="button" class="btn btn-default btn-lg">大型Button</button>
<button type="button" class="btn btn-primary btn-lg">大型Button</button>
</p>
<p>
<button type="button" class="btn btn-success">正常Button</button>
<button type="button" class="btn btn-info">正常Button</button>
</p>
<p>
<button type="button" class="btn btn-warning btn-sm">小型Button</button>
<button type="button" class="btn btn-danger btn-sm">小型Button</button>
</p>
<p>
<button type="button" class="btn btn-default btn-xs">超小Button</button>
<button type="button" class="btn btn-primary btn-xs">超小Button</button>
</p>
<!-- .btn-block不根据文本的长短，充满父容器100%宽度的按钮 -->
<p>
<button type="button" class="btn btn-primary btn-block">充满父容器的100%宽度的按钮</button>
</p>
<!-- 多标签支持 -->
<p>
<a class="btn btn-default" href="#">链接</a>
<button class="btn btn-primary" type="submit">按钮</button>
<input class="btn btn-success" type="button" value="输入框">
<input class="btn btn-warning" type="submit" value="提交">
</p>
<!-- 按钮状态：活动状态、禁用状态 -->
<!-- 活动状态 -->
<p>
<button type="button" class="btn btn-primary btn-lg active">Active Button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Active Link Button</a>
</p>
<!-- 禁用状态 -->
<!-- 禁用状态按钮，主要实现将按钮的背景色做65%的透明处理。方法两种：1、使用原始disable属性。2、使用.disable样式。两者区别：.disable不禁止按钮的默认行为。 -->
<p>
方法一：<button type="button" class="btn btn-danger" disable="disable">Active Button</button>
方法二：<button type="button" class="btn btn-danger" disable>Active Button</button>
</p>
</body>
</html>转载于:https://my.oschina.net/JeeChou/blog/375300
扫一扫
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
