-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (162 loc) · 7.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar-collapse-4">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Bootstrap 解析</a>
</div>
<div class="collapse navbar-collapse" id="my-navbar-collapse-4">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown">组件 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="lesson/lesson-1.html">栅格系统</a></li>
<li><a href="lesson/lesson-2.html">表单</a></li>
<li><a href="lesson/lesson-3.html">按钮</a></li>
<li><a href="lesson/lesson-4.html">导航</a></li>
<li><a href="lesson/lesson-5.html">分页</a></li>
<li><a href="lesson/lesson-6.html">标签</a></li>
<li><a href="lesson/lesson-7.html">徽章</a></li>
<li><a href="lesson/lesson-8.html">超大屏幕</a></li>
<li><a href="lesson/lesson-9.html">页面标题</a></li>
<li><a href="lesson/lesson-10.html">缩略图</a></li>
</ul>
</li>
<li><a href="#">DEMO</a></li>
<li><a href="#">定制</a></li>
</ul>
<div class="navbar-right">
<p class="navbar-text navbar-left"><a class="navbar-link" href="#">关于我们</a></p>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="关键字">
<span class="input-group-btn">
<button type="button" class="btn"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</form>
<button type="button" class="btn btn-default navbar-btn">注册</button>
<button type="button" class="btn btn-default navbar-btn">登陆</button>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Bootstrap 解析</h1>
<p>
<a class="btn btn-info" href="http://www.bootcss.com" target="_blank">Bootstrap 官网</a>
<a class="btn btn-info" href="http://www.w3cschool.cc/bootstrap/" target="_blank">Bootstrap 教程</a>
<a class="btn btn-info" href="https://github.com/OXOYO/Bootstrap-Tutorial" target="_blank">GitHub</a>
</p>
<p>
<a class="btn btn-primary btn-lg" role="button" href="#">学习更多</a>
</p>
</div>
<h2>规则</h2>
<div class="row row-block">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>class命名规则</h3>
<ol>
<li>所有class名称为小写，如果名称包含两个单词或多个单词，则用中横线“-”进行连接，而非驼峰命名法，如：<code>.col-lg-12</code></li>
<li>主class以英文单词全写或缩写命名，如：<code>.label</code> <code>.btn</code></li>
<li>从class以主class名称开头，以中横线“-”连接，之后是从class的有意义的名称，如：<code>.label-default</code> <code>.btn-default</code></li>
<li>组名称以主class开头，以中横线“-”连接，之后是group，如：<code>.btn-group</code> <code>.form-group</code></li>
<li>有不同状态的主class以颜色进行区分，这些颜色名称包括
<code>.*-default</code> <code>.*-primary</code> <code>.*-success</code> <code>.*-info</code> <code>.*-warning</code> <code>.*-danger</code>，
注意不是所有的有多状态的主class都包含以上所有的状态。如：<code>.alert</code>只有4个状态，没有<code>*-default</code>
</li>
<li>尺寸命名以主class开头，以中横线“-”连接，之后是相应的尺寸名称，这些尺寸名称包括
<code>*-lg</code> <code>*-md</code> <code>*-sm</code> <code>*-xs</code>,注意不是所有的有大小状态的主class都包含以上所有的状态。
如：<code>.btn</code>只有三个大小状态，没有<code>*-md</code>
</li>
</ol>
<h3>名称比对</h3>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>主Class</th>
<th>状态Class</th>
<th>尺寸Class</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>注意事项</h2>
<div class="row row-block">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<h2>Lesson</h2>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="">
<div class="ul-block">
<ul class="list-group">
<li>
<a href="lesson/lesson-1.html" target="_blank" class="list-group-item">
第一讲：栅格系统
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
</a>
</li>
<li>
<a href="lesson/lesson-2.html" target="_blank" class="list-group-item">
第二讲：表单
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
</a>
</li>
<li>
<a href="lesson/lesson-3.html" target="_blank" class="list-group-item">
第三讲：按钮
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
</a>
</li>
<li>
<a href="lesson/lesson-4.html" target="_blank" class="list-group-item">
第四讲：导航
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
<span class="glyphicon glyphicon-star text-danger pull-right"></span>
</a>
</li>
<li><a href="lesson/lesson-5.html" target="_blank" class="list-group-item">第五讲：分页</a></li>
<li><a href="lesson/lesson-6.html" target="_blank" class="list-group-item">第六讲：标签</a></li>
<li><a href="lesson/lesson-7.html" target="_blank" class="list-group-item">第七讲：徽章</a></li>
<li><a href="lesson/lesson-8.html" target="_blank" class="list-group-item">第八讲：超大屏幕</a></li>
<li><a href="lesson/lesson-9.html" target="_blank" class="list-group-item">第九讲：页面标题</a></li>
<li><a href="lesson/lesson-10.html" target="_blank" class="list-group-item">第十讲：缩略图</a></li>
<li><a href="lesson/lesson-11.html" target="_blank" class="list-group-item">第十一讲：警告</a></li>
<li><a href="lesson/lesson-12.html" target="_blank" class="list-group-item">第十二讲：进度条 <span class="badge pull-right">New</span></a></li>
<li><a href="lesson/lesson-13.html" target="_blank" class="list-group-item">第十三讲：字体图标 <span class="badge pull-right">New</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/jquery.js"></script>
<script src="scripts/bootstrap.js"></script>
</body>
</html>