1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>导航条和轮播图</title>
7 <!-- 核心 CSS 文件 -->
8 <link rel="stylesheet" href="../css/bootstrap.css" />
9 <!-- 主题文件（一般不用引入） -->
10 <!-- JQuery文件 -->
11 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
12 <!-- 核心 JavaScript 文件 -->
13 <script type="text/javascript" src="../js/bootstrap.js"></script>
14 <!--viewport元数据标签-->
15 <meta name="viewport" content="width=device-width, initial-scale=1">
16 </head>
17
18 <body>
19 <div class="container">
20 <nav class="navbar navbar-inverse">
21 <div class="container-fluid">
22 <!-- Brand and toggle get grouped for better mobile display -->
23 <div class="navbar-header">
24 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
25 <span class="sr-only">Toggle navigation</span>
26 <span class="icon-bar"></span>
27 <span class="icon-bar"></span>
28 <span class="icon-bar"></span>
29 </button>
30 <a class="navbar-brand" href="#">首页</a>
31 </div>
32
33 <!-- Collect the nav links, forms, and other content for toggling -->
34 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
35 <ul class="nav navbar-nav">
36 <!-- <li class="active">表示该项常亮 -->
37 <li class="active">
38 <!-- <span class="sr-only">(current)</span>用于方便残障人士使用，不会影响正常显示效果 -->
39 <a href="#">手机数码 <span class="sr-only">(current)</span></a>
40 </li>
41 <li>
42 <a href="#">电脑办公</a>
43 </li>
44 <li>
45 <a href="#">鞋靴箱包</a>
46 </li>
47 <li>
48 <a href="#">香烟酒水</a>
49 </li>
50 <li class="dropdown">
51 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全部分类 <span class="caret"></span></a>
52 <ul class="dropdown-menu">
53 <li>
54 <a href="#">手机数码</a>
55 </li>
56 <li>
57 <a href="#">电脑办公</a>
58 </li>
59 <li>
60 <a href="#">鞋靴箱包</a>
61 </li>
62 <li>
63 <a href="#">香烟酒水</a>
64 </li>
65 <li role="separator" class="divider"></li>
66 <li>
67 <a href="#">其它分类</a>
68 </li>
69 </ul>
70 </li>
71 </ul>
72 <form class="navbar-form navbar-right" role="search">
73 <div class="form-group">
74 <input type="text" class="form-control" placeholder="Search">
75 </div>
76 <button type="submit" class="btn btn-default">Submit</button>
77 </form>
78 </div>
79 <!-- /.navbar-collapse（坍塌，折叠） -->
80 </div>
81 <!-- /.container-fluid -->
82 </nav>
83
84 <div>
85 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
86 <!-- Indicators -->
87 <ol class="carousel-indicators">
88 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
89 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
90 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
91 </ol>
92
93 <!-- Wrapper for slides -->
94 <div class="carousel-inner" role="listbox">
95 <div class="item active">
96 <img src="../img/1.jpg" alt="...">
97 <div class="carousel-caption">
98 测试数据
99 </div>
100 </div>
101 <div class="item">
102 <img src="../img/2.jpg" alt="...">
103 <div class="carousel-caption">
104 测试数据
105 </div>
106 </div>
107 <div class="item">
108 <img src="../img/3.jpg" alt="...">
109 <div class="carousel-caption">
110 测试数据
111 </div>
112 </div>
113 测试数据
114 </div>
115
116 <!-- Controls -->
117 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
118 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
119 <span class="sr-only">Previous</span>
120 </a>
121 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
122 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
123 <span class="sr-only">Next</span>
124 </a>
125 </div>
126 </div>
127
128 <div class="row">
129 <div class="col-md-4">
130 <h3>测试数据</h3>
131 <p>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</p>
132 <a href="#" class="btn btn-danger">测试数据</a>
133 </div>
134 <div class="col-md-4">
135 <h3>测试数据</h3>
136 <p>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</p>
137 <a href="#" class="btn btn-info">测试数据</a>
138 </div>
139 <div class="col-md-4">
140 <h3>测试数据</h3>
141 <p>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</p>
142 <a href="#" class="btn btn-primary">测试数据</a>
143 </div>
144 </div>
145 </div>
146 </body>
147 </html>
![]()
浙公网安备 33010602011771号