-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path10.巨幕页头缩略图和警告框组件
149 lines (136 loc) · 3.94 KB
/
10.巨幕页头缩略图和警告框组件
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
1,巨幕组件
1,巨幕组件固定的范围内有圆角
<div class="container">
<h2>Code Manager System</h2>
<p>这是一个代码管理系统</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
2,100% 全屏,没有圆角
<div class="jumbotron">
<h2>Code Manager System</h2>
<p>这是一个代码管理系统</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
3,页头组件
1,增加一些空间
<div class="page-header">
<h1>大标题
<small>小标题</small>
</h1>
</div>
2,缩略图配合响应式
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
</div>
</div>
</div>
</div>
3,自定义内容
<div class="jumbotron">
<div class="row">
<div class="col-xs-6 col-md- col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
<div class="caption">
<h3>小狗狗</h3>
<p>这是一个小狗狗</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md- col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
<div class="caption">
<h3>小狗狗</h3>
<p>这是一个小狗狗</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md- col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
<div class="caption">
<h3>小狗狗</h3>
<p>这是一个小狗狗</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md- col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
<div class="caption">
<h3>小狗狗</h3>
<p>这是一个小狗狗</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md- col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
<div class="caption">
<h3>小狗狗</h3>
<p>这是一个小狗狗</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md- col-sm-4">
<div class="thumbnail">
<img src="../img/狗狗.jpg"/>
<div class="caption">
<h3>小狗狗</h3>
<p>这是一个小狗狗</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
</div>
</div>
4,警告框组件之基本警告框
<div class="alert alert-danger">基本的警告框之danger
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
5,带关闭的警告框
<div class="alert alert-success">基本的警告框之success
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
<div class="alert alert-warning">基本的警告框之warning
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
<div class="alert alert-info">基本的警告框之info
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
6,自动适配的超链接
<div class="alert alert-success">
有新版本，点击这里<a href="#" class="alert-link">更新</a>
</div>