boostrap按钮总结
程序员文章站
2022-04-27 14:59:00
...
按钮
| 样式 | 说明 |
|---|---|
| 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<!DOCTYPE html>
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>
10</p>
11<p>
12<button type="button" class="btn btn-default">默认按钮</button>
13</p>
14<p>
15<button type="button" class="btn btn-primary">提交按钮</button>
16</p>
17<p>
18<button type="button" class="btn btn-success">成功按钮</button>
19</p>
20<p>
21<button type="button" class="btn btn-info">信息按钮</button>
22</p>
23<p>
24<button type="button" class="btn btn-warning">危险按钮</button>
25</p>
26<p>
27<button type="button" class="btn btn-link">表现为链接</button>
28</p>
29<p>
30<button type="button" class="btn btn-lg">大按钮</button>
31</p>
32<p>
33<button type="button" class="btn btn-sm ">小按钮</button>
34</p>
35<p>
36<button type="button" class="btn btn-xs">最小按钮</button>
37</p>
38<p>
39<button type="button" class="btn btn-block ">宽屏按钮</button>
40</p>
41<p>
42<button type="button" class="btn btn-active">**状态按钮</button>
43</p>
44<p>
45<button type="button" class="btn btn-disabled">禁用按钮</button>
46</p>
47<p>
48<button type="button" class="btn disabled btn-danger btn-xs">多种按钮样式混用</button>
49</p>
50</body>
51</html>
上一篇： Objective-C学习笔记三：基本数据类型和表达式
下一篇： 循环创建按钮并且间距一至