废话不多说了，直接给大家贴代码了，具体代码如下所示：
复制代码
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>首页菜单</title> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <style type="text/css"> body{ padding-top: 50px; padding-bottom: 50px; } .carousel{/* 滚动图片样式 */ height: 500px; background-color: #000; margin-bottom: 60px; } .carousel .item{ height: 500px; background-color: #000; } .carousel img{ width: 100%; } .carousel-caption p{ margin-bottom:20px; font-size: 20px; line-height: 1.8; } #summary-container .col-md-4{ text-align:center;/*居中对齐*/ } hr.divder{ margin:40px 0; } .feature{ padding: 30px 0; } .feature-heading{ font-size:50px; color:#2a6496; margin-top:120px; } .feature-heading .text-muted{ font-size: 28px; color:#999; } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> <div class="containe"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar"> <span class="sr-only">Toggle navigation</span><!-- Toggle navigation不能缺少 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >现代浏览器博物馆</a> </div> <!-- 导航栏 --> <div class="collapse navbar-collapse" id="demo-navbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >综述</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >简述</a></li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab-chrome" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Chrome</a></li> <li><a href="#tab-firefox" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Firefox</a></li> <li><a href="#tab-safari" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Safari</a></li> <!-- <li class="divider"></li> //divider:分隔符 --> <li><a href="#tab-opera" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Opera</a></li> <li><a href="#tab-ie" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >IE9</a></li> </ul> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="modal" data-target="#about">关于</a></li> <li> </ul> </div> </div> </nav> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> <li data-target="#carousel-example-generic" data-slide-to="4"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/chrome-big.jpg" alt="1 slide"> <div class="carousel-caption"> <h1>Chrome</h1> <p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" role="button" target="_blank">点击下载</a></p> </div> </div> <div class="item"> <img src="images/firefox-big.jpg" alt="2 slide" > <div class="carousel-caption"> <h1>Firefox</h1> <p>Mozilla Firefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" role="button" target="_blank">点击下载</a></p> </div> </div> <div class="item"> <img src="images/safari-big.jpg" alt="3 slide" > <div class="carousel-caption"> <h1>Safari</h1> <p>Safari,是苹果计算机的最新操作系统Mas OS X中的浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" role="button" target="_blank">点击下载</a></p> </div> </div> <div class="item"> <img src="images/opera-big.jpg" alt="4 slide" > <div class="carousel-caption"> <h1>Opera</h1> <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式的网络浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" role="button" target="_blank">点击下载</a></p> </div> </div> <div class="item"> <img src="images/ie-logo.jpg" alt="5 slide" > <div class="carousel-caption"> <h1>IE</h1> <p>Internet Explorer,简称IE，是微软公司推出的一款网页浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.microsoft.com/zh-cn/download/" role="button" target="_blank">点击下载</a></p> </div> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">上一页</span> </a> <a class="right carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">下一页</span> </a> </div> <div class="container" id="summary-container"> <div class="row"> <div class="col-md-4"> <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome"> <h2>Chrome</h2> <p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p> <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p> </div> <div class="col-md-4"> <img class="img-circle" src="images/firefox-logo-small.jpg" alt="chrome"> <h2>Firefox</h2> <p>Mozilla Firefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p> <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p> </div> <div class="col-md-4"> <img class="img-circle" src="images/safari-logo-small.jpg" alt="chrome"> <h2>Safari</h2> <p>Safari,是苹果计算机的最新操作系统Mas OS X中的浏览器</p> <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p> </div> </div> <hr class="divder"> <ul class="nav nav-tabs" role="tablist" id="tab-list"> <li class="active"><a href="#tab-chrome" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">Chrome</a></li> <li><a href="#tab-firefox" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">Firefox</a></li> <li><a href="#tab-safari" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">Safari</a></li> <li><a href="#tab-opera" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">Opera</a></li> <li><a href="#tab-ie" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">IE</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab-chrome"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Google Chrome <span class="text-muted">使用最广泛的浏览器</span></h2> <p class="lead">Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 该浏览器是基于其他开源软件撰写，包括Webkit,目标是提升稳定性，速度和安全性，并创造出简单且有效率的使用这界面 </p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/chrome-logo.jpg"> </div> </div> </div> <div class="tab-pane" id="tab-firefox"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Mozilla Firefox<span class="text-muted">燃烧的狐狸</span></h2> <p class="lead">Mozilla Firefox,中文名称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎(非ie内核)，支持多种操作系统如window、Mac和linux。</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/firefox-logo.jpg"> </div> </div> </div> <div class="tab-pane" id="tab-safari"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Safari<span class="text-muted">Mac用户首先</span></h2> <p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与TPAD和iPod touch的指定浏览器。</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/safari-logo.jpg"> </div> </div> </div> <div class="tab-pane" id="tab-opera"> <div class="row feature"> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/opera-logo.jpg"> </div> <div class="col-md-7"> <h2 class="feature-heading">Opera<span class="text-muted">小众但易用</span></h2> <p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多也页面标签式浏览的网络浏览器。是跨平台浏览器可以在windowns，Mac和Linux三个操作系统平台上运行。</p> </div> </div> </div> <div class="tab-pane" id="tab-ie"> <div class="row feature"> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/ie-logo.jpg"> </div> <div class="col-md-7"> <h2 class="feature-heading">IE<span class="text-muted">老招牌</span></h2> <p class="lead">Internet Explorer,原称Microsoft Internet Explorer(7,8,9,10版本)，简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(内核)为Trident</p> </div> </div> </div> </div> <hr class="divider"> <footer> <p class="pull-right"><a href="#top" rel="external nofollow" rel="external nofollow" >回到顶部</a></p> <div id="time"></div> </footer> </div> <!-- 弹框 --> <div class="modal fade" id="about"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><!-- 头部 --> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title">关于</h4> </div> <div class="modal-body"><!-- 内容 --> <p>网站基于Bootstrap开发；设计风格简单清爽！内容是关于当今主流浏览器介绍，并附有下载资源。</p> </div> <div class="modal-footer"><!-- 底部 --> <button type="button" class="btn btn-default" data-dismiss="modal">了解</button> <!-- <button type="button" class="btn btn-primary">Save changes</button> --> </div> </div> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> <script> document.getElementById('time').innerHTML=new Date().toLocaleString(); setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString();",1000); $(document).ready(function(){ $("#demo-navbar .dropdown-menu a").click(function(){ var href=$(this).attr("href"); $("#tab-list a[href='"+href+"']").tab("show"); }); }); </script> </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<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> <div class="containe"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar"> <span class="sr-only">Toggle navigation</span><!-- Toggle navigation不能缺少 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >现代浏览器博物馆</a> </div> <!-- 导航栏 --> <div class="collapse navbar-collapse" id="demo-navbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >综述</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >简述</a></li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab-chrome" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Chrome</a></li> <li><a href="#tab-firefox" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Firefox</a></li> <li><a href="#tab-safari" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Safari</a></li> <!-- <li class="divider"></li> //divider:分隔符 --> <li><a href="#tab-opera" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Opera</a></li> <li><a href="#tab-ie" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >IE9</a></li> </ul> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="modal" data-target="#about">关于</a></li> <li> </ul> </div> </div> </nav>
滚动图片广告
复制代码
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<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> <li data-target="#carousel-example-generic" data-slide-to="4"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/chrome-big.jpg" alt="1 slide"> <div class="carousel-caption"> <h1>Chrome</h1> <p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" role="button" target="_blank">点击下载</a></p> </div> </div> <div class="item"> <img src="images/firefox-big.jpg" alt="2 slide" > <div class="carousel-caption"> <h1>Firefox</h1> <p>Mozilla Firefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" role="button" target="_blank">点击下载</a></p> </div> </div> <div class="item"> <img src="images/safari-big.jpg" alt="3 slide" > <div class="carousel-caption"> <h1>Safari</h1> <p>Safari,是苹果计算机的最新操作系统Mas OS X中的浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" role="button" target="_blank">点击下载</a></p> </div> </div> <div class="item"> <img src="images/opera-big.jpg" alt="4 slide" > <div class="carousel-caption"> <h1>Opera</h1> <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式的网络浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" role="button" target="_blank">点击下载</a></p> </div> </div> <div class="item"> <img src="images/ie-logo.jpg" alt="5 slide" > <div class="carousel-caption"> <h1>IE</h1> <p>Internet Explorer,简称IE，是微软公司推出的一款网页浏览器</p> <p><a class="btn btn-lg btn-primary" href="http://www.microsoft.com/zh-cn/download/" role="button" target="_blank">点击下载</a></p> </div> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">上一页</span> </a> <a class="right carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">下一页</span> </a> </div>
栅格布局
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<div class="row"> <div class="col-md-4"> <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome"> <h2>Chrome</h2> <p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p> <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p> </div> <div class="col-md-4"> <img class="img-circle" src="images/firefox-logo-small.jpg" alt="chrome"> <h2>Firefox</h2> <p>Mozilla Firefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p> <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p> </div> <div class="col-md-4"> <img class="img-circle" src="images/safari-logo-small.jpg" alt="chrome"> <h2>Safari</h2> <p>Safari,是苹果计算机的最新操作系统Mas OS X中的浏览器</p> <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p> </div> </div>
标签页
复制代码
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<div class="tab-content"> <div class="tab-pane active" id="tab-chrome"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Google Chrome <span class="text-muted">使用最广泛的浏览器</span></h2> <p class="lead">Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 该浏览器是基于其他开源软件撰写，包括Webkit,目标是提升稳定性，速度和安全性，并创造出简单且有效率的使用这界面 </p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/chrome-logo.jpg"> </div> </div> </div> <div class="tab-pane" id="tab-firefox"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Mozilla Firefox<span class="text-muted">燃烧的狐狸</span></h2> <p class="lead">Mozilla Firefox,中文名称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎(非ie内核)，支持多种操作系统如window、Mac和linux。</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/firefox-logo.jpg"> </div> </div> </div> <div class="tab-pane" id="tab-safari"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Safari<span class="text-muted">Mac用户首先</span></h2> <p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与TPAD和iPod touch的指定浏览器。</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/safari-logo.jpg"> </div> </div> </div> <div class="tab-pane" id="tab-opera"> <div class="row feature"> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/opera-logo.jpg"> </div> <div class="col-md-7"> <h2 class="feature-heading">Opera<span class="text-muted">小众但易用</span></h2> <p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多也页面标签式浏览的网络浏览器。是跨平台浏览器可以在windowns，Mac和Linux三个操作系统平台上运行。</p> </div> </div> </div> <div class="tab-pane" id="tab-ie"> <div class="row feature"> <div class="col-md-5"> <img class="feature-image img-responsive" src="images/ie-logo.jpg"> </div> <div class="col-md-7"> <h2 class="feature-heading">IE<span class="text-muted">老招牌</span></h2> <p class="lead">Internet Explorer,原称Microsoft Internet Explorer(7,8,9,10版本)，简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(内核)为Trident</p> </div> </div> </div> </div>
弹出框制作
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<div class="modal fade" id="about"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><!-- 头部 --> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title">关于</h4> </div> <div class="modal-body"><!-- 内容 --> <p>网站基于Bootstrap开发；设计风格简单清爽！内容是关于当今主流浏览器介绍，并附有下载资源。</p> </div> <div class="modal-footer"><!-- 底部 --> <button type="button" class="btn btn-default" data-dismiss="modal">了解</button> <!-- <button type="button" class="btn btn-primary">Save changes</button> --> </div> </div> </div> </div>
底部设计
复制代码
1
2
3
4<footer> <p class="pull-right"><a href="#top" rel="external nofollow" rel="external nofollow" >回到顶部</a></p> <div id="time"></div> <footer>
JS脚本
复制代码
1
2
3
4
5
6
7
8
9
10
11<script> document.getElementById('time').innerHTML=new Date().toLocaleString(); setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString();",1000); $(document).ready(function(){ $("#demo-navbar .dropdown-menu a").click(function(){ var href=$(this).attr("href"); $("#tab-list a[href='"+href+"']").tab("show"); }); }); </script>
复制代码
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<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> <div class="containe"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar"> <span class="sr-only">Toggle navigation</span><!-- Toggle navigation不能缺少 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >现代浏览器博物馆</a> </div> <!-- 导航栏 --> <div class="collapse navbar-collapse" id="demo-navbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >综述</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >简述</a></li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab-chrome" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Chrome</a></li> <li><a href="#tab-firefox" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Firefox</a></li> <li><a href="#tab-safari" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Safari</a></li> <!-- <li class="divider"></li> //divider:分隔符 --> <li><a href="#tab-opera" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Opera</a></li> <li><a href="#tab-ie" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >IE9</a></li> </ul> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="modal" data-target="#about">关于</a></li> <li> </ul> </div> </div> </nav>
以上所述是小编给大家介绍的基于Bootstrap的网页设计实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
最后
以上就是懦弱蜡烛最近收集整理的关于基于Bootstrap的网页设计实例的全部内容，更多相关基于Bootstrap内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复