-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
617 lines (612 loc) · 33 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
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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
<!DOCTYPE html>
<!-- language网站的语言 -->
<html lang="zh-cn">
<head>
<!-- 网页字符编码 -->
<meta charset="utf-8">
<!-- Compatible 兼容性 设置IE兼容性 让IE浏览器使用最新的渲染引擎渲染页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 兼容360浏览器让双核浏览器使用webkit内核渲染页面 -->
<meta name="renderer" content="webkit">
<!-- 视口 设置浏览器的可视窗口 让视口宽度就和设备宽度一致 防止视口宽度和设备宽度不一致导致缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>微金所的项目主页</title>
<!-- 引入bootstrap的css -->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- 注意引入自己的less文件需要放到bootstrap后面 方便我们去覆盖bootstrap的样式 -->
<!-- 1. 引包引入生成的字体的css文件 font.css -->
<link rel="stylesheet" type="text/css" href="css/font.css">
<!-- 1. 引入主页的index.less -->
<link rel="stylesheet/less" href="less/index.less">
<!-- 2. 引入less.js编译器文件 编译less文件的编译器 -->
<script src="lib/less/less.js"></script>
<!-- HTML5 shiv 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 写页面的骨架结构 -->
<!-- 外面的容器都使用id选择器 id样式优先级高 方便覆盖框架的样式 方便JS去获取元素 -->
<!-- 头部区域 -->
<header id="header" class="hidden-xs hidden-sm">
<div class="container">
<div class="row text-center">
<div class="col-md-2">
<a href="#">
<!-- 2. 使用图标的类名 -->
<i class="icon-mobilephone"></i> 手机微金所
<i class="glyphicon glyphicon-chevron-up"></i>
<img src="img/c_06.jpg" alt="">
</a>
</div>
<div class="col-md-5">
4006-89-4006(服务时间:9:00-21:00)
</div>
<div class="col-md-2">
<a href="#">常见问题</a>
<a href="#">财富登录</a>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger btn-sm">免费注册</button>
<a href="#" class="btn btn-link" data-toggle="modal" data-target="#myModal">登录</a>
</div>
</div>
</div>
</header>
<!-- 导航条区域 -->
<!-- 组件里面的导航条组件 -->
<!-- affix JS插件 用来实现吸顶效果 -->
<!-- data-spy="affix" 初始化吸顶效果 -->
<!-- data-offset-top="40" 距离定位多少的时候 开始吸顶 -->
<!-- data-offset-bottom="200" 距离底部多少的取消吸顶 不建议取消有bug-->
<nav id="nav" class="navbar navbar-default" data-spy="affix" data-offset-top="40">
<div class="container">
<!-- 导航条的头部 在移动端的默认显示头部 -->
<div class="navbar-header">
<!-- 移动端显示的按钮 -->
<!-- data-toggle="collapse" 开关是否开启折叠菜单的功能 -->
<!-- data-target="#bs-example-navbar-collapse-1" 目标控制折叠的元素的选择器 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 品牌logo -->
<a href="#" class="navbar-brand">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<!-- 导航条的身体 在移动端的默认不显示 点击了头部里面的按钮才会显示 -->
<!-- collapse 在超小屏幕隐藏 其他屏幕显示 -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<!-- 导航条左边的ul -->
<ul class="nav navbar-nav">
<li class="active"><a href="#">我要投资</a></li>
<li><a href="#">我要借款</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">微论坛</a></li>
</ul>
<!-- 导航右边的ul -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">个人中心</a></li>
</ul>
</div>
</div>
</nav>
<!-- 轮播图区域 -->
<section id="slide">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 指示器小圆点 -->
<ol class="carousel-indicators">
<!-- 小圆点的data-slide-to指定要切换的轮播图第几项的索引 -->
<!-- data-target="#carousel-example-generic" 目标指定当前小圆点控制哪个轮播图切换 值是轮播图大容器选择器推荐id选择器 -->
<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>
</ol>
<!-- 所有轮播图所有项 -->
<div class="carousel-inner" role="listbox">
<!-- item是轮播图的每一项 复制是item不是img标签 -->
<!-- active 默认显示的轮播图项 有且只有一个active -->
<div class="item active">
<!-- 大图想用图片标签去定位 注意吧默认max-width覆盖 -->
<!-- <img src="./img/slide_01_2000x410.jpg" alt="" style="width:2000px;max-width: 2000px;"> -->
<!-- 大图在 超小屏幕隐藏 -->
<div class="large-image hidden-xs" style="background-image: url(./img/slide_01_2000x410.jpg)">
</div>
<!-- 小图 在 小 中 大屏幕隐藏 -->
<div class="small-image hidden-sm hidden-md hidden-lg">
<img src="./img/slide_01_640x340.jpg" alt="">
</div>
</div>
<div class="item">
<div class="large-image hidden-xs" style="background-image: url(./img/slide_02_2000x410.jpg)">
</div>
<div class="small-image hidden-sm hidden-md hidden-lg">
<img src="./img/slide_02_640x340.jpg" alt="">
</div>
</div>
<div class="item">
<div class="large-image hidden-xs" style="background-image: url(./img/slide_03_2000x410.jpg)">
</div>
<div class="small-image hidden-sm hidden-md hidden-lg">
<img src="./img/slide_03_640x340.jpg" alt="">
</div>
</div>
<div class="item">
<div class="large-image hidden-xs" style="background-image: url(./img/slide_04_2000x410.jpg)">
</div>
<div class="small-image hidden-sm hidden-md hidden-lg">
<img src="./img/slide_04_640x340.jpg" alt="">
</div>
</div>
</div>
<!-- 控制器 -->
<!-- data-slide="prev" 切换到上一张 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- data-slide="next" 切换到下一张 -->
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- 特色介绍区域 -->
<section id="feature" class="hidden-xs">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="media">
<a href="#">
<div class="media-left">
<i class="icon-meiyuan"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障财产安全</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="media">
<a href="#">
<div class="media-left">
<i class="icon-meiyuan"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障财产安全</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="media">
<a href="#">
<div class="media-left">
<i class="icon-meiyuan"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障财产安全</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="media">
<a href="#">
<div class="media-left">
<i class="icon-meiyuan"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障财产安全</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="media">
<a href="#">
<div class="media-left">
<i class="icon-meiyuan"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障财产安全</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="media">
<a href="#">
<div class="media-left">
<i class="icon-meiyuan"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障财产安全</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 立即预约区域 -->
<section id="booking">
<div class="container">
<div class="pull-left">
<i class="icon-naozhong"></i> 现在有 <span class="text-danger">458</span> 人在排队,
累计预约交易成功 <span class="text-danger">7409</span> 次。 什么是预约投标? <a href="#" class="text-danger">立即预约</a>
</div>
<div class="pull-right">
<a href="#"><i class="icon-video"></i> 微金所企业宣传片</a>
</div>
</div>
</section>
<!-- 商品推荐区域 -->
<section id="products">
<div class="container">
<!-- tab导航 标题 -->
<ul class="nav nav-tabs">
<li class="active">
<!-- href控制内容切换选择器 指定要控制的tab栏内容的id -->
<!-- data-toggle="tab" 开关 是否开启tab切换的功能(初始化) -->
<!-- 所有bootstrap data-属性 都是用来实现JS交互 一定要保留 -->
<a href="#product1" data-toggle="tab">特别推荐</a>
</li>
<li>
<a href="#product2" data-toggle="tab">微投资</a>
</li>
<li>
<a href="#product3" data-toggle="tab">微小宝</a>
</li>
<li>
<a href="#product4" data-toggle="tab">微消费</a>
</li>
<li>
<a href="#product5" data-toggle="tab">微增利</a>
</li>
<li>
<a href="#product6" data-toggle="tab">微金宝</a>
</li>
<li>
<a href="#product7" data-toggle="tab">微转让</a>
</li>
</ul>
<!-- tab栏的内容 -->
<div class="tab-content">
<!-- div#prudct$.tab-pane.fade{$}*7 -->
<div id="product1" class="tab-pane fade in active">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="product active">
<div class="product-left">
<h4>新手体验标008期</h4>
<div class="row">
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
</div>
</div>
<div class="product-right">
<p><strong>8</strong><sub>%</sub> </p>
<p>年利率</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="product">
<div class="product-left">
<h4>新手体验标008期</h4>
<div class="row">
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
</div>
</div>
<div class="product-right">
<!-- 注意千万不能使用tooltip类名 动态添加的div就是tootip类名 默认隐藏的 -->
<div class="tooltips">
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="东哥">东</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="奶茶妹妹">奶</button>
</div>
<p><strong>8</strong><sub>%</sub> </p>
<p>年利率</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="product">
<div class="product-left">
<h4>新手体验标008期</h4>
<div class="row">
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
</div>
</div>
<div class="product-right">
<p><strong>8</strong><sub>%</sub> </p>
<p>年利率</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="product">
<div class="product-left">
<h4>新手体验标008期</h4>
<div class="row">
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
</div>
</div>
<div class="product-right">
<p><strong>8</strong><sub>%</sub> </p>
<p>年利率</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="product">
<div class="product-left">
<h4>新手体验标008期</h4>
<div class="row">
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
<div class="col-xs-6">
<p>起步价</p>
<p><strong>1000.00</strong> <sub>万</sub> </p>
</div>
</div>
</div>
<div class="product-right">
<p><strong>8</strong><sub>%</sub> </p>
<p>年利率</p>
</div>
</div>
</div>
</div>
</div>
<div id="product2" class="tab-pane fade">1</div>
<div id="product3" class="tab-pane fade">2</div>
<div id="product4" class="tab-pane fade">3</div>
<div id="product5" class="tab-pane fade">4</div>
<div id="product6" class="tab-pane fade">5</div>
<div id="product7" class="tab-pane fade">6</div>
</div>
</div>
</section>
<!-- 新闻区域 -->
<section id="news">
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-2">
<h4>全部新闻</h4>
</div>
<div class="col-md-1">
<!-- 在一份的栅格放标签页的标题 -->
<ul class="nav nav-tabs">
<li class="active"><a href="#news1" data-toggle="tab">
<i class="icon-news01"></i>
</a></li>
<li><a href="#news2" data-toggle="tab">
<i class="icon-news02"></i>
</a></li>
<li><a href="#news3" data-toggle="tab">
<i class="icon-news03"></i>
</a></li>
<li><a href="#news4" data-toggle="tab">
<i class="icon-news04"></i>
</a></li>
</ul>
</div>
<div class="col-md-7">
<!-- 在7份的栅格放标签页内容 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="news1">
<ul class="list-group">
<li class="list-group-item">【微新闻】 1宋喆获刑6年新 46万</li>
<li class="list-group-item">【微新闻】 1宋喆获刑6年新 46万</li>
<li class="list-group-item">【微新闻】 1宋喆获刑6年新 46万</li>
<li class="list-group-item">【微新闻】 1宋喆获刑6年新 46万</li>
<li class="list-group-item">【微新闻】 1宋喆获刑6年新 46万</li>
<li class="list-group-item">【微新闻】 1宋喆获刑6年新 46万</li>
<li class="list-group-item">【微新闻】 1宋喆获刑6年新 46万</li>
<li class="list-group-item">【微新闻】 1宋喆获刑6年新 46万</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" id="news2">
<ul class="list-group">
<li class="list-group-item">【微新闻】 东哥没有被美方起诉无罪释放</li>
<li class="list-group-item">【微新闻】 东哥没有被美方起诉无罪释放</li>
<li class="list-group-item">【微新闻】 东哥没有被美方起诉无罪释放</li>
<li class="list-group-item">【微新闻】 东哥没有被美方起诉无罪释放</li>
<li class="list-group-item">【微新闻】 东哥没有被美方起诉无罪释放</li>
<li class="list-group-item">【微新闻】 东哥没有被美方起诉无罪释放</li>
<li class="list-group-item">【微新闻】 东哥没有被美方起诉无罪释放</li>
<li class="list-group-item">【微新闻】 东哥没有被美方起诉无罪释放</li>
<li class="list-group-item">【微新闻】 东哥没有被美方起诉无罪释放</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" id="news3">4</div>
<div role="tabpanel" class="tab-pane fade" id="news4">
5
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 合作伙伴区域 -->
<footer id="partner">
<div class="container">
<h3>合作伙伴</h3>
<div class="row">
<!-- .col-md-4.col-sm-6*3>.row>.col-xs-4*3>a[href="#"]>i.icon-partner$ -->
<div class="col-md-4 col-sm-6">
<div class="row">
<div class="col-xs-4"><a href="#"><i class="icon-partner1"></i></a></div>
<div class="col-xs-4"><a href="#"><i class="icon-partner2"></i></a></div>
<div class="col-xs-4"><a href="#"><i class="icon-partner3"></i></a></div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="row">
<div class="col-xs-4"><a href="#"><i class="icon-partner4"></i></a></div>
<div class="col-xs-4"><a href="#"><i class="icon-partner5"></i></a></div>
<div class="col-xs-4"><a href="#"><i class="icon-partner6"></i></a></div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="row">
<div class="col-xs-4"><a href="#"><i class="icon-partner7"></i></a></div>
<div class="col-xs-4"><a href="#"><i class="icon-partner8"></i></a></div>
<div class="col-xs-4"><a href="#"><i class="icon-partner9"></i></a></div>
</div>
</div>
</div>
</div>
</footer>
<!-- Button trigger modal JS 插件不是和类名有关 和属性有关 -->
<!-- data-toggle="modal" 开关切换 控制modal效果是否开启(初始化)
data-target="#myModal" 目标 控制弹出目标框框 值#myModal id选择器 建议使用id选择器-->
<!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button> -->
<!-- role 角色
aria 盲人设备使用的 了解即可 中国不会考虑盲人的 -->
<!-- 弹出来的框框 一般放到网页底部和网页内容没关系 -->
<div class="modal fade text-left" id="myModal">
<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></button>
<h4 class="modal-title" id="myModalLabel">模态框的标题</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!-- data-dismiss="modal" 关闭模态框 -->
<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="lib/jquery/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- 引入自己的JS文件 -->
<script src="js/index.js"></script>
</body>
</html>