boostrap按钮总结

按钮

样式 说明
btn 原始样式按钮
btn-default 默认按钮
btn-primary 提交按钮
btn-success 成功按钮
btn-info 信息按钮
btn-warning 警告按钮
btn-danger 危险按钮
btn-lg 大按钮
btn-sm 小按钮
btn-xs 最小按钮
btn-block 宽屏按钮
active 禁用按钮
disabled btn-danger btn-xs 多种按钮样式混用

下面案例代码:

 1
2<html>
3<head>
4<meta charset="utf-8"> 
5<script src="js/bootstrap/3.3.6/bootstrap.js">script>
6<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
7<script src="js/bootstrap/3.3.6/bootstrap.js">script>
8<p>
9<button type="button" class="btn">原始样式按钮button>
10p>
11<p>
12<button type="button" class="btn btn-default">默认按钮button>
13p>
14<p>
15<button type="button" class="btn btn-primary">提交按钮button>
16p>
17<p>
18<button type="button" class="btn btn-success">成功按钮button>
19p>
20<p>
21<button type="button" class="btn btn-info">信息按钮button>
22p>
23<p>
24<button type="button" class="btn  btn-warning">危险按钮button>
25p>
26<p>
27<button type="button" class="btn btn-link">表现为链接button>
28p>
29<p>
30<button type="button" class="btn btn-lg">大按钮button>
31p>
32<p>
33<button type="button" class="btn btn-sm ">小按钮button>
34p>
35<p>
36<button type="button" class="btn btn-xs">最小按钮button>
37p>
38<p>
39<button type="button" class="btn btn-block ">宽屏按钮button>
40p>
41<p>
42<button type="button" class="btn btn-active">激活状态按钮button>
43p>
44<p>
45<button type="button" class="btn btn-disabled">禁用按钮button>
46p>
47<p>
48<button type="button" class="btn disabled btn-danger btn-xs">多种按钮样式混用button>
49p>
50body>
51html>

boostrap按钮总结_第1张图片

你可能感兴趣的:(bootstrap)