1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
8 <title>Bootstrap 101 Template</title>
9
10 <!-- Bootstrap -->
11 <link href="./css/bootstrap.css" rel="stylesheet">
12
13 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
14 <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
15 <!--[if lt IE 9]>
16 <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
17 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
18 <![endif]-->
19
20 <style>
21 .ttt {
22 background-color: red;
23 }
24 .badge{
25 position: relative;
26 top:-5px;
27 background-color: yellow;
28 }
29
30 </style>
31 </head>
32 <body>
33 <nav class="navbar navbar-default">
34 <div class="container-fluid">
35 <!-- Brand and toggle get grouped for better mobile display -->
36 <div class="navbar-header">
37 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
38 data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
39 <span class="sr-only">Toggle navigation</span>
40 <!--<span class="icon-bar"></span>-->
41 <span class="icon-bar"></span>
42 <span class="icon-bar"></span>
43 </button>
44 <a class="navbar-brand" href="#">路飞</a>
45 </div>
46
47 <!-- Collect the nav links, forms, and other content for toggling -->
48 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
49 <ul class="nav navbar-nav">
50 <li class="active">
51 <a href="#">
52 首页
53 <span class="sr-only">(current)</span>
54 </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
66 </ul>
67 <form class="navbar-form navbar-right">
68 <div class="form-group">
69 <input type="text" class="form-control" placeholder="请输入课程">
70 </div>
71 <button type="submit" class="btn btn-primary">搜索</button>
72 </form>
73
74 </div><!-- /.navbar-collapse -->
75 </div><!-- /.container-fluid -->
76 </nav>
77 <div class="container">
78 <div class="row">
79 <div class="col-md-4">
80 <div class="panel panel-default">
81 <div class="panel-heading">
82 <h3 class="panel-title">表单</h3>
83 </div>
84 <div class="panel-body">
85 <form class="form-inline">
86 <div class="form-group">
87 <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
88 <div class="input-group">
89 <div class="input-group-addon">
90 <span class="glyphicon glyphicon-home"></span>
91 </div>
92 <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
93 <div class="input-group-addon">.00</div>
94 </div>
95 </div>
96 <button type="submit" class="btn btn-primary">Transfer cash</button>
97 </form>
98 </div>
99 </div>
100 </div>
101
102 <div class="col-md-4">
103 <div class="panel panel-default">
104 <div class="panel-heading">
105 <h3 class="panel-title">下拉菜单</h3>
106 </div>
107 <div class="panel-body">
108 <div class="dropdown">
109 <!--data-toggle='xxxxx' 表示与js的插件有很大标签-->
110 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
111 data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
112 Dropdown
113 <!--三角符号-->
114 <span class="caret"></span>
115 </button>
116 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
117 <li><a href="#">Action</a></li>
118 <li><a href="#">Another action</a></li>
119 <li><a href="#">Something else here</a></li>
120 <li role="separator" class="divider ttt"></li>
121 <li><a href="#">Separated link</a></li>
122 </ul>
123 </div>
124
125 <div class="btn-group">
126 <button type="button" class="btn btn-danger">Action</button>
127 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
128 aria-haspopup="true" aria-expanded="false">
129 <span class="caret"></span>
130 <!--隐藏当前元素-->
131 <span class="sr-only">Toggle Dropdown</span>
132 </button>
133 <ul class="dropdown-menu">
134 <li><a href="#">Action</a></li>
135 <li><a href="#">Another action</a></li>
136 <li><a href="#">Something else here</a></li>
137 <!--分割线-->
138 <li role="separator" class="divider"></li>
139 <li><a href="#">Separated link</a></li>
140 </ul>
141 </div>
142
143 </div>
144 </div>
145 </div>
146
147
148 </div>
149
150 <div class="row">
151 <div class="col-md-12">
152
153 <div class="panel panel-default">
154 <div class="panel-heading">
155 <h3 class="panel-title">标签页</h3>
156 </div>
157 <div class="panel-body">
158 <ul class="nav nav-tabs nav-pills nav-justified">
159 <li role="presentation" class="active"><a href="#">首页</a></li>
160 <li role="presentation" class=""><a href="#">Music</a></li>
161 <li role="presentation"><a href="#">抖音</a></li>
162 </ul>
163 </div>
164
165 </div>
166 </div>
167 </div>
168 <div class="row">
169 <div class="col-md-4">
170 <div class="panel panel-default">
171 <div class="panel-heading">
172 <h3 class="panel-title">分页</h3>
173 </div>
174 <div class="panel-body">
175 <nav aria-label="Page navigation">
176 <ul class="pagination">
177 <li>
178 <a href="#" aria-label="Previous">
179 <span aria-hidden="true">«</span>
180 </a>
181 </li>
182 <li><a href="#">1</a></li>
183 <li><a href="#">2</a></li>
184 <li><a href="#">3</a></li>
185 <li><a href="#">4</a></li>
186 <li><a href="#">5</a></li>
187 <li>
188 <a href="#" aria-label="Next">
189 <span aria-hidden="true">»</span>
190 </a>
191 </li>
192 </ul>
193 </nav>
194
195 <h3>Example heading <span class="label label-default">New</span></h3>
196 <!--右上消息栏-->
197 <a href="#">Inbox <span class="badge">42</span></a>
198 </div>
199 </div>
200
201
202 <div class="progress" id="jindutiao">
203 <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style=" 0%;">
204 <!--<span class="">40% Complete</span>-->
205 0%
206 </div>
207 </div>
208 </div>
209 </div>
210
211 <div class="row">
212 <div class="col-md-4">
213 哈哈哈哈哈哈哈
214 </div>
215 <div class="col-md-4 col-md-offset-3">
216 哈哈哈哈哈哈哈
217 </div>
218 </div>
219 </div>
220
221 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
222 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
223 <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
224 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
225
226 <script>
227
228 $(function () {
229
230 // var count = 0;
231 // var sum = 100;
232 //
233 // setInterval(function () {
234 // count++;
235 // var bi = `${count}%`;
236 // $('#jindutiao>div').css({
237 // bi
238 // }).html(bi);
239 //
240 //// 逻辑自己写
241 //
242 //
243 //
244 //
245 // },200)
246 });
247
248
249 </script>
250 </body>
251 </html>
