BootStrap的基本使用
bootstrap
现成的css样式，直接调用类
作用是快速写出页面
又称UI框架
Bootstrap中文网
LESS是预处理器
CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。
下载bootstrap3.3.7
bootstrap自带响应式布局==》手机 电脑呈现不同的样式
渲染分辨率:
物理分辨率:
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ==》让手机浏览器不缩放
content:内容 自适应宽度
媒体查询 @media
需要再自定义css 当符合一个条件，需要重新定义该条件的css。
栅格系统把父元素分成12份 col-xs-6占一半
类名重复会覆盖 可以重新定义
class = "" 里面没有语义，只是单纯的设置格式如颜色等。
表单
label 获取焦点
class = "form-control"
class = "form-group"
class = control-label 控制向右对齐
span (current) 给阅读器看的。人文关怀，
-
包含 CSS、JS特效插件 的工具集，快速开发网页
-
经典的UI框架： BootStrap、JQueryUI、MeiziUI(AmazeUI)......
2 BootStrap
2.1 版本
-
用于生产环境 (CSS\JavaScript)
-
源码(LESS) (LESS是CSS预处理器)
-
SASS （SASS也是CSS预处理）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <title>Bootstrap演示</title>
8 <link rel="stylesheet" href="dist/css/bootstrap.css">
9 <style>
10 /*[class*="col-"]
11 选择所有类名中含有"col-"的元素*/
12 [class*='col-'] {
13 border:1px solid #ccc;
14 background: #f5f5f5;
15 }
16 </style>
17 </head>
18 <body>
19
20 <div class="container">
21 <div class="page-header">
22 <h1>同志交友 <small>全国最大的交友平台</small> </h1>
23 </div>
24
25 <nav class="navbar navbar-default">
26 <div class="container-fluid">
27 <!-- Brand and toggle get grouped for better mobile display -->
28 <div class="navbar-header">
29 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
30 <span class="sr-only">Toggle navigation</span>
31 <span class="icon-bar"></span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 </button>
35 <a class="navbar-brand" href="#">Brand</a>
36 </div>
37
38 <!-- Collect the nav links, forms, and other content for toggling -->
39 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
40 <ul class="nav navbar-nav">
41 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
42 <li><a href="#">Link</a></li>
43 <li class="dropdown">
44 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
45 <ul class="dropdown-menu">
46 <li><a href="#">Action</a></li>
47 <li><a href="#">Another action</a></li>
48 <li><a href="#">Something else here</a></li>
49 <li role="separator" class="divider"></li>
50 <li><a href="#">Separated link</a></li>
51 <li role="separator" class="divider"></li>
52 <li><a href="#">One more separated link</a></li>
53 </ul>
54 </li>
55 </ul>
56 <form class="navbar-form navbar-left">
57 <div class="form-group">
58 <input type="text" class="form-control" placeholder="Search">
59 </div>
60 <button type="submit" class="btn btn-default">Submit</button>
61 </form>
62 <ul class="nav navbar-nav navbar-right">
63 <li><a href="#">Link</a></li>
64 <li class="dropdown">
65 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
66 <ul class="dropdown-menu">
67 <li><a href="#">Action</a></li>
68 <li><a href="#">Another action</a></li>
69 <li><a href="#">Something else here</a></li>
70 <li role="separator" class="divider"></li>
71 <li><a href="#">Separated link</a></li>
72 </ul>
73 </li>
74 </ul>
75 </div><!-- /.navbar-collapse -->
76 </div><!-- /.container-fluid -->
77 </nav>
78 <!-- -->
79 <div class="row">
80 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
81 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
82 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
83 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
84 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
85 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
86 </div>
87
88 </div>
89
90
91 <!--导入jquery-->
92 <script src="dist/js/jquery-3.3.1.js"></script>
93 <script src="dist/js/bootstrap.js"></script>
94 </body>
95 </html>
3 响应式布局
3.1 手机屏幕的分辨率
-
现在绝大部分 手机 视网膜屏幕， 有物理分辨率，和 渲染分辨率。 iphone8
750*1334渲染分辨率：375*667 -
手机浏览器 为了让 没有做响应式处理的网页能够正常显示， 自动进行缩放。视口的大小通常会设置为 980px
3.2 媒体查询
@media (min-width:) {
选择器 {
}
选择器 {
}
}
媒体特效：
min-width
min-height
max-width
max-height
width
height
.........
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 <title>媒体查询</title>
7 <style>
8 body {
9 margin:0;
10 }
11
12 /*默认 <768px 手机 */
13 .container {
14 margin:0 auto;
15 width:100%;
16 height:400px;
17 text-align: center;
18 background: pink;
19 }
20
21 /*媒体查询*/
22
23 /* >= 768 < 992 小屏幕 平板 */
24 @media (min-width:768px) {
25 .container {
26 width:750px;
27 }
28 .row {
29
30 }
31 }
32
33 /* >=992 <1200 中等屏幕 */
34 @media (min-width:992px) {
35 .container {
36 width: 970px;
37 }
38 }
39
40 /*>=1200 大屏幕*/
41 @media (min-width:1200px) {
42 .container {
43 width: 1170px;
44 }
45 }
46 </style>
47 </head>
48 <body>
49 <div class="container">
50 <h1>媒体查询</h1>
51 </div>
52 </body>
53 </html>
3.3 视口
<meta name="viewport" content="width=device-width,initial-scale=1.0">
4 布局
4.1 栅格系统
.container
<768px 100% 超小屏幕 xs
>=768px <992px 750px 小屏幕 sm
>=992px < 1200px 970px 中等屏幕 md
>=1200px 1170px 大屏幕 lg
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 <title>Bootstrap演示</title>
7 <link rel="stylesheet" href="dist/css/bootstrap.css">
8 <style>
9 [class*='col-'] {
10 border:1px solid #ccc;
11 background: #f5f5f5;
12 padding:20px;
13 }
14 .row {
15 margin-bottom:20px;
16 }
17 </style>
18 </head>
19 <body>
20 <!-- 固定布局样式 class = 'container' -->
21 <div class="container">
22 <div class="page-header">
23 <h1>栅格系统</h1>
24 </div>
25
26 <div class="row">
27 <div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, nihil dolore eveniet eaque itaque asperiores natus nostrum velit nisi similique inventore nesciunt impedit voluptates officia, perferendis omnis alias, hic harum?</div>
28
29 <div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, illo quia delectus tempore eius officiis facilis nihil veritatis culpa et blanditiis ducimus adipisci deserunt perferendis, magni officia quidem, fugit tempora!</div>
30 </div>
31
32
33 <div class="row">
34 <div class="col-md-4">Lorem ipsum dolor sit amet.</div>
35 <div class="col-md-8">HELLO</div>
36 </div>
37
38 <div class="row">
39 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
40 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
41 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
42 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
43 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
44 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>
45 </div>
46
47
48 <div class="row">
49 <div class="col-sm-6 col-md-3">Lorem ipsum dolor sit amet.</div>
50 <div class="col-sm-6 col-md-3">Lorem ipsum dolor sit amet.</div>
51 <div class="col-sm-6 col-md-3">Lorem ipsum dolor sit amet.</div>
52 <div class="col-sm-6 col-md-3">Lorem ipsum dolor sit amet.</div>
53 </div>
54
55
56 <div class="row">
57 <div class="col-md-6"></div>
58 <div class="col-md-6">
59 <div class="col-md-2">Lorem ipsum dolor sit amet.</div>
60 <div class="col-md-2">Lorem ipsum dolor sit amet.</div>
61 <div class="col-md-2">Lorem ipsum dolor sit amet.</div>
62 <div class="col-md-2">Lorem ipsum dolor sit amet.</div>
63 <div class="col-md-2">Lorem ipsum dolor sit amet.</div>
64 <div class="col-md-2">Lorem ipsum dolor sit amet.</div>
65 </div>
66 </div>
67
68
69 <div class="row">
70 <div class="col-md-4 col-md-offset-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae blanditiis, commodi! Sit corporis aliquid tempora, hic illum. Eaque recusandae aspernatur deserunt necessitatibus minima eligendi, sapiente nihil, eos deleniti modi ea?</div>
71 </div>
72
73 <div class="row">
74 <div class="col-md-6">
75 <pre>Lorem ipsum dolor sit amet,
76 consectetur adipisicing elit. Numquam quasi modi totam deleniti hic debitis quisquam saepe, nulla fugit,
77 porro rem obcaecati fugiat magnam,
78 repellendus! Accusantium veritatis dolore qui aperiam.</pre>
79 </div>
80 </div>
81
82
83 </div>
84
85 <!--导入jquery-->
86 <script src="dist/js/jquery-3.3.1.js"></script>
87 <script src="dist/js/bootstrap.js"></script>
88 </body>
89 </html>
行和列
行 .row
列 col-xs-* col-sm-* col-md-* col-lg-*
把父元素分成12份，指定几份
4.2 表格
.table
.table-striped
.table-bordered
.table-hover
.table-condensed
.success .info .danger .warning .active
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 <title>Bootstrap演示</title>
7 <link rel="stylesheet" href="dist/css/bootstrap.css">
8 <style>
9
10 </style>
11 </head>
12 <body>
13
14 <div class="container-fluid">
15 <div class="page-header">
16 <h1>表格</h1>
17 </div>
18 <div class="row">
19 <div class="col-md-6">
20 <table class="table table-bordered table-hover ">
21 <thead>
22 <tr class="success">
23 <th>序号</th>
24 <th>姓名</th>
25 <th>年龄</th>
26 <th>性别</th>
27 <th>爱好</th>
28 </tr>
29 </thead>
30 <tbody>
31 <tr>
32 <td>1</td>
33 <td>曹操</td>
34 <td>18</td>
35 <td>男</td>
36 <td>人妻</td>
37 </tr>
38 <!-- 控制不同的背景颜色 -->
39 <tr class="active">
40 <td>1</td>
41 <td>曹操</td>
42 <td>18</td>
43 <td class="danger">男</td>
44 <td>人妻</td>
45 </tr>
46 <tr class="danger">
47 <td>1</td>
48 <td>曹操</td>
49 <td>18</td>
50 <td>男</td>
51 <td>人妻</td>
52 </tr>
53 <tr class="warning">
54 <td>1</td>
55 <td>曹操</td>
56 <td>18</td>
57 <td>男</td>
58 <td>人妻</td>
59 </tr>
60 <tr class="info">
61 <td>1</td>
62 <td>曹操</td>
63 <td>18</td>
64 <td>男</td>
65 <td>人妻</td>
66 </tr>
67 <tr>
68 <td>1</td>
69 <td>曹操</td>
70 <td>18</td>
71 <td>男</td>
72 <td>人妻</td>
73 </tr>
74 <tr>
75 <td>1</td>
76 <td>曹操</td>
77 <td>18</td>
78 <td>男</td>
79 <td>人妻</td>
80 </tr>
81 <!-- 只识别第一个 -->
82 <tr class = "danger warning info">
83 <td>1</td>
84 <td>曹操</td>
85 <td>18</td>
86 <td>男</td>
87 <td>人妻</td>
88 </tr>
89 <tr>
90 <td>1</td>
91 <td>曹操</td>
92 <td>18</td>
93 <td>男</td>
94 <td>人妻</td>
95 </tr>
96 </tbody>
97 </table>
98 </div>
99 </div>
100 </div>
101
102 </body>
103 </html>
4.3 表单
.form-horizontal
.from-group
.form-control
.control-label
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 <title>Bootstrap演示</title>
7 <!-- 导入bootstrap css样式 -->
8 <link rel="stylesheet" href="dist/css/bootstrap.css">
9 <style>
10
11 </style>
12 </head>
13 <body>
14
15 <div class="container-fluid">
16 <div class="page-header">
17 <h1 class="text-center">表单</h1>
18 </div>
19
20 <div class="row">
21 <div class="col-md-4 col-md-offset-4">
22 <form action="#" class="">
23 <div class="form-group">
24 <!-- lable for 仅仅是为了点在文字上获得焦点 -->
25 <label for="userInput">用户名：</label>
26 <input type="text" class="form-control" name="username" id="userInput">
27 </div>
28
29 <div class="form-group">
30 <label for="">密码：</label>
31 <input type="password" name="pwd" id="pwdInput" class="form-control">
32 </div>
33
34 <div class="checkbox">
35 <label>
36 <input type="checkbox" name="" id=""> 记住我
37 </label>
38 </div>
39
40 <button class="btn btn-default btn-block">登 录</button>
41 </form>
42 </div>
43 </div>
44
45 <hr>
46
47 <div class="row">
48 <div class="col-md-4 col-md-offset-4">
49 <form action="#" class="form-horizontal">
50 <div class="form-group">
51 <label for="userInput" class="col-md-4 control-label">用户名：</label>
52 <div class="col-md-8">
53 <input type="text" class="form-control" name="username" id="userInput">
54 </div>
55 </div>
56
57 <div class="form-group">
58 <label for="" class="col-md-4 control-label">密码：</label>
59 <div class="col-md-8">
60 <input type="password" name="pwd" id="pwdInput" class="form-control">
61 </div>
62
63 </div>
64
65 <div class="form-group">
66 <div class="col-md-8 col-md-offset-4">
67 <div class="checkbox">
68 <label>
69 <input type="checkbox" name="" id=""> 记住我
70 </label>
71 </div>
72 </div>
73 </div>
74
75 <div class="form-group">
76 <div class="col-md-8 col-md-offset-4">
77 <button class="btn btn-default">登 录</button>
78 </div>
79 </div>
80
81 </form>
82 </div>
83 </div>
84 </div>
85
86 </body>
87 </html>
4.4 其他
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 <title>Bootstrap演示</title>
7 <link rel="stylesheet" href="dist/css/bootstrap.css">
8 <style>
9 .row {
10 margin-bottom: 40px;
11 }
12 img {
13 border:1px solid #ccc;
14 }
15 </style>
16 </head>
17 <body>
18
19 <div class="container-fluid">
20 <div class="page-header">
21 <h1>按钮</h1>
22 </div>
23
24 <div class="row">
25 <div class="col-md-12">
26 <button class="btn btn-default">按钮</button>
27 <button class="btn btn-info">按钮</button>
28 <button class="btn btn-success">按钮</button>
29 <button class="btn btn-warning">按钮</button>
30 <button class="btn btn-danger">按钮</button>
31 <button class="btn btn-primary">按钮</button>
32 </div>
33
34 <div class="col-md-4">
35
36 <button class="btn btn-primary btn-lg">按钮</button>
37 <button class="btn btn-primary">按钮</button>
38 <button class="btn btn-primary btn-sm">按钮</button>
39
40 <button class="btn btn-primary btn-block">按钮</button>
41 </div>
42 </div>
43
44 <div class="row">
45 <img src="images/product01.jpg" alt="">
46 <img src="images/product01.jpg" alt="" class="img-rounded">
47 <img src="images/product01.jpg" alt="" class="img-circle">
48 <img src="images/product01.jpg" alt="" class="img-thumbnail">
49 </div>
50
51
52 </div>
53
54 </body>
55 </html>
5 组件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 <title>Bootstrap演示</title>
7 <link rel="stylesheet" href="dist/css/bootstrap.css">
8 <style>
9 .row {
10 margin-bottom:40px;
11 }
12 </style>
13 </head>
14 <body>
15
16 <div class="container-fluid">
17 <div class="page-header">
18 <h1 class="text-center">表单</h1>
19 </div>
20
21 <div class="row">
22 <div class="col-md-12">
23 <p class="text-danger">
24 <i class="glyphicon glyphicon-home"></i>
25 </p>
26
27 <p class="" style="color:red;font-size:100px">
28 <i class="glyphicon glyphicon-home"></i>
29 </p>
30
31 <button class="btn btn-default">
32 <i class="glyphicon glyphicon-ok"></i>
33 </button>
34
35 <a href="#" class="btn btn-primary">
36 <i class="glyphicon glyphicon-lock"></i>
37 </a>
38 </div>
39 </div>
40 </div>
41
42 </body>
43 </html>
6 插件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 <title>Bootstrap演示</title>
7 <link rel="stylesheet" href="dist/css/bootstrap.css">
8 <style>
9 .navbar-tongzhi {
10 margin-bottom: 0;
11 }
12 .jumbotron-tongzhi {
13 background: url('../../dist/images_one/meinv02.jpg') no-repeat 0 0/cover;
14 color:#fff;
15 }
16 .footer-tongzhi {
17 padding: 40px 0px 20px;
18 background: #333;
19 color: #eee;
20 }
21 .footer-links {
22 margin-bottom:20px;
23 }
24 .footer-links a {
25 margin-right:20px;
26 color: #fff;
27 }
28 .carousel-tongzhi img{
29 width:100%;
30 }
31 </style>
32 </head>
33 <body>
34 <nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-tongzhi">
35 <div class="container">
36 <!-- Brand and toggle get grouped for better mobile display -->
37 <div class="navbar-header">
38 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 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"><a href="#">主页</a></li>
51 <li><a href="#">同志介绍</a></li>
52 <li class="dropdown">
53 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">同志课程 <span class="caret"></span></a>
54 <ul class="dropdown-menu">
55 <li><a href="#">HTML</a></li>
56 <li><a href="#">CSS</a></li>
57 <li><a href="#">JavaScript</a></li>
58 <!-- 分割线 -->
59 <li role="separator" class="divider"></li>
60 <li><a href="#">Python</a></li>
61 <li role="separator" class="divider"></li>
62 <li><a href="#">Linux</a></li>
63 </ul>
64 </li>
65 </ul>
66 <form class="navbar-form navbar-left">
67 <div class="input-group">
68 <input type="text" class="form-control" placeholder="搜索">
69 <span class="input-group-btn">
70 <button class="btn btn-default">
71 <i class="glyphicon glyphicon-search"></i>
72 </button>
73 </span>
74 </div>
75
76 </form>
77 <a href="#" class="btn btn-primary navbar-btn navbar-right">
78 <i class="glyphicon glyphicon-shopping-cart"></i>
79 <span class="badge">42</span>
80 </a>
81 <ul class="nav navbar-nav navbar-right">
82 <li><a href="JavaScript:void(0)" data-toggle="modal" data-target="#myModal">登录</a></li>
83 <li><a>注册</a></li>
84 </ul>
85 </div><!-- /.navbar-collapse -->
86 </div><!-- /.container-fluid -->
87 </nav>
88
89
90
91 <!-- <div class="jumbotron jumbotron-tongzhi">
92 <div class="container">
93 <h1>Hello, 同志!</h1>
94 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, ducimus provident laborum. Ullam maiores, illum blanditiis odit ratione natus deleniti dolorem veniam, nobis voluptas pariatur aut iste quam soluta recusandae?</p>
95 <p><a class="btn btn-primary btn-lg" href="#" role="button">更多同志</a></p>
96 </div>
97 </div> -->
98
99 <div id="carousel-example-generic" class="carousel slide carousel-tongzhi">
100 <!-- Indicators -->
101 <ol class="carousel-indicators">
102 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
103 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
104 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
105 <li data-target="#carousel-example-generic" data-slide-to="3"></li>
106 </ol>
107
108 <!-- Wrapper for slides -->
109 <div class="carousel-inner" role="listbox">
110 <div class="item active">
111 <img src="images/play01.jpg" alt="...">
112 <div class="carousel-caption">
113 <h3>最好的同志手机</h3>
114 <p>
115 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nostrum impedit deserunt illo reprehenderit aspernatur atque mollitia voluptatibus iure nobis commodi, dolorem molestias nisi optio tenetur tempora facere consequatur ratione.
116 </p>
117 </div>
118 </div>
119 <div class="item">
120 <img src="images/play02.jpg" alt="...">
121 <div class="carousel-caption">
122
123 </div>
124 </div>
125
126 <div class="item">
127 <img src="images/play03.jpg" alt="...">
128 <div class="carousel-caption">
129
130 </div>
131 </div>
132
133 <div class="item">
134 <img src="images/play04.jpg" alt="...">
135 <div class="carousel-caption">
136
137 </div>
138 </div>
139
140 </div>
141
142 <!-- Controls -->
143 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
144 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
145 <span class="sr-only">Previous</span>
146 </a>
147 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
148 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
149 <span class="sr-only">Next</span>
150 </a>
151 </div>
152
153
154 <div class="container">
155 <ol class="breadcrumb">
156 <li><a href="#">首页</a></li>
157 <li><a href="#">同志商城</a></li>
158 <li class="active">商品列表</li>
159 </ol>
160 </div>
161
162
163 <div class="product-wrapper">
164 <div class="container">
165 <div class="row">
166 <div class="col-xs-6 col-sm-4 col-md-3">
167 <div class="thumbnail">
168 <img src="images/product01.jpg" alt="">
169 <div class="caption">
170 <h3>同志手机</h3>
171 <p>1800万像素，高清无码，双拍双摄</p>
172 <p>
173 <span>1800元</span>
174 </p>
175 <p>
176 <a href="#" class="btn btn-primary" role="button">立即购买</a>
177 <a href="#" class="btn btn-default" role="button">加入购物车</a>
178 </p>
179 </div>
180 </div>
181 </div>
182
183 <div class="col-xs-6 col-sm-4 col-md-3">
184 <div class="thumbnail">
185 <img src="images/product01.jpg" alt="">
186 <div class="caption">
187 <h3>同志手机</h3>
188 <p>1800万像素，高清无码，双拍双摄</p>
189 <p>
190 <span>1800元</span>
191 </p>
192 <p>
193 <a href="#" class="btn btn-primary" role="button">立即购买</a>
194 <a href="#" class="btn btn-default" role="button">加入购物车</a>
195 </p>
196 </div>
197 </div>
198 </div>
199
200
201 <div class="col-xs-6 col-sm-4 col-md-3">
202 <div class="thumbnail">
203 <img src="images/product01.jpg" alt="">
204 <div class="caption">
205 <h3>同志手机</h3>
206 <p>1800万像素，高清无码，双拍双摄</p>
207 <p>
208 <span>1800元</span>
209 </p>
210 <p>
211 <a href="#" class="btn btn-primary" role="button">立即购买</a>
212 <a href="#" class="btn btn-default" role="button">加入购物车</a>
213 </p>
214 </div>
215 </div>
216 </div>
217
218 <div class="col-xs-6 col-sm-4 col-md-3">
219 <div class="thumbnail">
220 <img src="images/product01.jpg" alt="">
221 <div class="caption">
222 <h3>同志手机</h3>
223 <p>1800万像素，高清无码，双拍双摄</p>
224 <p>
225 <span>1800元</span>
226 </p>
227 <p>
228 <a href="#" class="btn btn-primary" role="button">立即购买</a>
229 <a href="#" class="btn btn-default" role="button">加入购物车</a>
230 </p>
231 </div>
232 </div>
233 </div>
234
235
236 <div class="col-xs-6 col-sm-4 col-md-3">
237 <div class="thumbnail">
238 <img src="images/product01.jpg" alt="">
239 <div class="caption">
240 <h3>同志手机</h3>
241 <p>1800万像素，高清无码，双拍双摄</p>
242 <p>
243 <span>1800元</span>
244 </p>
245 <p>
246 <a href="#" class="btn btn-primary" role="button">立即购买</a>
247 <a href="#" class="btn btn-default" role="button">加入购物车</a>
248 </p>
249 </div>
250 </div>
251 </div>
252
253 <div class="col-xs-6 col-sm-4 col-md-3">
254 <div class="thumbnail">
255 <img src="images/product01.jpg" alt="">
256 <div class="caption">
257 <h3>同志手机</h3>
258 <p>1800万像素，高清无码，双拍双摄</p>
259 <p>
260 <span>1800元</span>
261 </p>
262 <p>
263 <a href="#" class="btn btn-primary" role="button">立即购买</a>
264 <a href="#" class="btn btn-default" role="button">加入购物车</a>
265 </p>
266 </div>
267 </div>
268 </div>
269
270 <div class="col-xs-6 col-sm-4 col-md-3">
271 <div class="thumbnail">
272 <img src="images/product01.jpg" alt="">
273 <div class="caption">
274 <h3>同志手机</h3>
275 <p>1800万像素，高清无码，双拍双摄</p>
276 <p>
277 <span>1800元</span>
278 </p>
279 <p>
280 <a href="#" class="btn btn-primary" role="button">立即购买</a>
281 <a href="#" class="btn btn-default" role="button">加入购物车</a>
282 </p>
283 </div>
284 </div>
285 </div>
286
287 <div class="col-xs-6 col-sm-4 col-md-3">
288 <div class="thumbnail">
289 <img src="images/product01.jpg" alt="">
290 <div class="caption">
291 <h3>同志手机</h3>
292 <p>1800万像素，高清无码，双拍双摄</p>
293 <p>
294 <span>1800元</span>
295 </p>
296 <p>
297 <a href="#" class="btn btn-primary" role="button">立即购买</a>
298 <a href="#" class="btn btn-default" role="button">加入购物车</a>
299 </p>
300 </div>
301 </div>
302 </div>
303 </div>
304
305 <nav aria-label="Page navigation">
306 <ul class="pagination">
307 <li>
308 <a href="#" aria-label="Previous">
309 <span aria-hidden="true">上一页</span>
310 </a>
311 </li>
312 <li><a href="#">1</a></li>
313 <li><a href="#">2</a></li>
314 <li><a href="#">3</a></li>
315 <li><a href="#">4</a></li>
316 <li><a href="#">5</a></li>
317 <li>
318 <a href="#" aria-label="Next">
319 <span aria-hidden="true">下一页</span>
320 </a>
321 </li>
322 </ul>
323 </nav>
324 </div>
325 </div>
326
327
328 <div class="footer-tongzhi">
329 <div class="container">
330 <div class="row footer-links">
331 <div class="col-md-12">
332 <a href="#">GitHub</a>
333 <a href="#">GitHub</a>
334 <a href="#">同志 交友</a>
335 <a href="#">GitHub</a>
336 <a href="#">GitHub</a>
337 </div>
338 </div>
339
340 <div class="row">
341 <div class="col-md-12">
342 <p>Designed and built with all the love in the world by @mdo and @fat. Maintained by the core team with the help of our contributors.</p>
343 <p>本项目源码受 MIT开源协议保护，文档受 CC BY 3.0 开源协议保护。</p>
344 </div>
345 </div>
346 </div>
347 </div>
348
349
350
351 <!-- Modal -->
352 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
353 <div class="modal-dialog modal-sm" role="document">
354 <div class="modal-content">
355 <div class="modal-header">
356 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
357 <h4 class="modal-title" id="myModalLabel">登录同志交友平台</h4>
358 </div>
359 <div class="modal-body">
360 <form action="#" class="">
361 <div class="form-group">
362 <label for="userInput">用户名：</label>
363 <input type="text" class="form-control" name="username" id="userInput">
364 </div>
365
366 <div class="form-group">
367 <label for="">密码：</label>
368 <input type="password" name="pwd" id="pwdInput" class="form-control">
369 </div>
370 </form>
371 </div>
372 <div class="modal-footer">
373 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
374 <button type="button" class="btn btn-primary">登录</button>
375 </div>
376 </div>
377 </div>
378 </div>
379
380 <!--导入jquery-->
381 <script src="dist/js/jquery-3.3.1.js"></script>
382 <script src="dist/js/bootstrap.js"></script>
383 <script>
384 $(function(){
385 $('#carousel-example-generic').carousel({
386 interval: 1000
387 })
388 })
389 </script>
390 </body>
391 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 <title>Bootstrap演示</title>
7 <link rel="stylesheet" href="dist/css/bootstrap.css">
8 <!-- <link rel="stylesheet" href="bootstrap-yeit.css"> -->
9 <style>
10 .navbar-tongzhi {
11 margin-bottom: 0;
12 }
13 .jumbotron-tongzhi {
14 background: url('../../dist/images_one/meinv02.jpg') no-repeat 0 0/cover;
15 color:#fff;
16 }
17 .footer-tongzhi {
18 padding: 40px 0px 20px;
19 background: #333;
20 color: #eee;
21 }
22 .footer-links {
23 margin-bottom:20px;
24 }
25 .footer-links a {
26 margin-right:20px;
27 color: #fff;
28 }
29 .carousel-tongzhi img{
30 width:100%;
31 }
32 </style>
33 </head>
34 <body>
35 <nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-tongzhi">
36 <div class="container">
37 <!-- Brand and toggle get grouped for better mobile display -->
38 <div class="navbar-header">
39 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
40 <span class="sr-only">Toggle navigation</span>
41 <span class="icon-bar"></span>
42 <span class="icon-bar"></span>
43 <span class="icon-bar"></span>
44 </button>
45 <a class="navbar-brand" href="#">同志交友</a>
46 </div>
47
48 <!-- Collect the nav links, forms, and other content for toggling -->
49 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
50 <ul class="nav navbar-nav">
51 <li class="active"><a href="#">主页</a></li>
52 <li><a href="#">同志介绍</a></li>
53 <li class="dropdown">
54 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">同志课程 <span class="caret"></span></a>
55 <ul class="dropdown-menu">
56 <li><a href="#">HTML</a></li>
57 <li><a href="#">CSS</a></li>
58 <li><a href="#">JavaScript</a></li>
59 <li role="separator" class="divider"></li>
60 <li><a href="#">Python</a></li>
61 <li role="separator" class="divider"></li>
62 <li><a href="#">Linux</a></li>
63 </ul>
64 </li>
65 </ul>
66 <form class="navbar-form navbar-left">
67 <div class="input-group">
68 <input type="text" class="form-control" placeholder="搜索">
69 <span class="input-group-btn">
70 <button class="btn btn-default">
71 <i class="glyphicon glyphicon-search"></i>
72 </button>
73 </span>
74 </div>
75
76 </form>
77 <a href="#" class="btn btn-primary navbar-btn navbar-right">
78 <i class="glyphicon glyphicon-shopping-cart"></i>
79 <span class="badge">42</span>
80 </a>
81 <ul class="nav navbar-nav navbar-right">
82 <li><a href="JavaScript:void(0)" data-toggle="modal" data-target="#myModal">登录</a></li>
83 <li><a>注册</a></li>
84 </ul>
85 </div><!-- /.navbar-collapse -->
86 </div><!-- /.container-fluid -->
87 </nav>
88
89
90
91 <!-- <div class="jumbotron jumbotron-tongzhi">
92 <div class="container">
93 <h1>Hello, 同志!</h1>
94 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, ducimus provident laborum. Ullam maiores, illum blanditiis odit ratione natus deleniti dolorem veniam, nobis voluptas pariatur aut iste quam soluta recusandae?</p>
95 <p><a class="btn btn-primary btn-lg" href="#" role="button">更多同志</a></p>
96 </div>
97 </div> -->
98
99 <div id="carousel-example-generic" class="carousel slide carousel-tongzhi">
100 <!-- Indicators -->
101 <ol class="carousel-indicators">
102 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
103 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
104 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
105 <li data-target="#carousel-example-generic" data-slide-to="3"></li>
106 </ol>
107
108 <!-- Wrapper for slides -->
109 <div class="carousel-inner" role="listbox">
110 <div class="item active">
111 <img src="images/play01.jpg" alt="...">
112 <div class="carousel-caption">
113 <h3>最好的同志手机</h3>
114 <p>
115 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nostrum impedit deserunt illo reprehenderit aspernatur atque mollitia voluptatibus iure nobis commodi, dolorem molestias nisi optio tenetur tempora facere consequatur ratione.
116 </p>
117 </div>
118 </div>
119 <div class="item">
120 <img src="images/play02.jpg" alt="...">
121 <div class="carousel-caption">
122
123 </div>
124 </div>
125
126 <div class="item">
127 <img src="images/play03.jpg" alt="...">
128 <div class="carousel-caption">
129
130 </div>
131 </div>
132
133 <div class="item">
134 <img src="images/play04.jpg" alt="...">
135 <div class="carousel-caption">
136
137 </div>
138 </div>
139
140 </div>
141
142 <!-- Controls -->
143 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
144 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
145 <span class="sr-only">Previous</span>
146 </a>
147 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
148 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
149 <span class="sr-only">Next</span>
150 </a>
151 </div>
152
153 <div class="container">
154 <ol class="breadcrumb">
155 <li><a href="#">首页</a></li>
156 <li><a href="#">同志商城</a></li>
157 <li class="active">商品列表</li>
158 </ol>
159 </div>
160
161 <div class="product-wrapper">
162 <div class="container">
163 <div class="row">
164 <div class="col-xs-6 col-sm-4 col-md-3">
165 <div class="thumbnail">
166 <img src="images/product01.jpg" alt="">
167 <div class="caption">
168 <h3>同志手机</h3>
169 <p>1800万像素，高清无码，双拍双摄</p>
170 <p>
171 <span>1800元</span>
172 </p>
173 <p>
174 <a href="#" class="btn btn-primary" role="button">立即购买</a>
175 <a href="#" class="btn btn-default" role="button">加入购物车</a>
176 </p>
177 </div>
178 </div>
179 </div>
180
181 <div class="col-xs-6 col-sm-4 col-md-3">
182 <div class="thumbnail">
183 <img src="images/product01.jpg" alt="">
184 <div class="caption">
185 <h3>同志手机</h3>
186 <p>1800万像素，高清无码，双拍双摄</p>
187 <p>
188 <span>1800元</span>
189 </p>
190 <p>
191 <a href="#" class="btn btn-primary" role="button">立即购买</a>
192 <a href="#" class="btn btn-default" role="button">加入购物车</a>
193 </p>
194 </div>
195 </div>
196 </div>
197
198
199 <div class="col-xs-6 col-sm-4 col-md-3">
200 <div class="thumbnail">
201 <img src="images/product01.jpg" alt="">
202 <div class="caption">
203 <h3>同志手机</h3>
204 <p>1800万像素，高清无码，双拍双摄</p>
205 <p>
206 <span>1800元</span>
207 </p>
208 <p>
209 <a href="#" class="btn btn-primary" role="button">立即购买</a>
210 <a href="#" class="btn btn-default" role="button">加入购物车</a>
211 </p>
212 </div>
213 </div>
214 </div>
215
216 <div class="col-xs-6 col-sm-4 col-md-3">
217 <div class="thumbnail">
218 <img src="images/product01.jpg" alt="">
219 <div class="caption">
220 <h3>同志手机</h3>
221 <p>1800万像素，高清无码，双拍双摄</p>
222 <p>
223 <span>1800元</span>
224 </p>
225 <p>
226 <a href="#" class="btn btn-primary" role="button">立即购买</a>
227 <a href="#" class="btn btn-default" role="button">加入购物车</a>
228 </p>
229 </div>
230 </div>
231 </div>
232
233
234 <div class="col-xs-6 col-sm-4 col-md-3">
235 <div class="thumbnail">
236 <img src="images/product01.jpg" alt="">
237 <div class="caption">
238 <h3>同志手机</h3>
239 <p>1800万像素，高清无码，双拍双摄</p>
240 <p>
241 <span>1800元</span>
242 </p>
243 <p>
244 <a href="#" class="btn btn-primary" role="button">立即购买</a>
245 <a href="#" class="btn btn-default" role="button">加入购物车</a>
246 </p>
247 </div>
248 </div>
249 </div>
250
251 <div class="col-xs-6 col-sm-4 col-md-3">
252 <div class="thumbnail">
253 <img src="images/product01.jpg" alt="">
254 <div class="caption">
255 <h3>同志手机</h3>
256 <p>1800万像素，高清无码，双拍双摄</p>
257 <p>
258 <span>1800元</span>
259 </p>
260 <p>
261 <a href="#" class="btn btn-primary" role="button">立即购买</a>
262 <a href="#" class="btn btn-default" role="button">加入购物车</a>
263 </p>
264 </div>
265 </div>
266 </div>
267
268 <div class="col-xs-6 col-sm-4 col-md-3">
269 <div class="thumbnail">
270 <img src="images/product01.jpg" alt="">
271 <div class="caption">
272 <h3>同志手机</h3>
273 <p>1800万像素，高清无码，双拍双摄</p>
274 <p>
275 <span>1800元</span>
276 </p>
277 <p>
278 <a href="#" class="btn btn-primary" role="button">立即购买</a>
279 <a href="#" class="btn btn-default" role="button">加入购物车</a>
280 </p>
281 </div>
282 </div>
283 </div>
284
285 <div class="col-xs-6 col-sm-4 col-md-3">
286 <div class="thumbnail">
287 <img src="images/product01.jpg" alt="">
288 <div class="caption">
289 <h3>同志手机</h3>
290 <p>1800万像素，高清无码，双拍双摄</p>
291 <p>
292 <span>1800元</span>
293 </p>
294 <p>
295 <a href="#" class="btn btn-primary" role="button">立即购买</a>
296 <a href="#" class="btn btn-default" role="button">加入购物车</a>
297 </p>
298 </div>
299 </div>
300 </div>
301 </div>
302
303 <nav aria-label="Page navigation">
304 <ul class="pagination">
305 <li>
306 <a href="#" aria-label="Previous">
307 <span aria-hidden="true">上一页</span>
308 </a>
309 </li>
310 <li><a href="#">1</a></li>
311 <li><a href="#">2</a></li>
312 <li><a href="#">3</a></li>
313 <li><a href="#">4</a></li>
314 <li><a href="#">5</a></li>
315 <li>
316 <a href="#" aria-label="Next">
317 <span aria-hidden="true">下一页</span>
318 </a>
319 </li>
320 </ul>
321 </nav>
322 </div>
323 </div>
324
325 <div class="footer-tongzhi">
326 <div class="container">
327 <div class="row footer-links">
328 <div class="col-md-12">
329 <a href="#">GitHub</a>
330 <a href="#">GitHub</a>
331 <a href="#">同志 交友</a>
332 <a href="#">GitHub</a>
333 <a href="#">GitHub</a>
334 </div>
335 </div>
336
337 <div class="row">
338 <div class="col-md-12">
339 <p>Designed and built with all the love in the world by @mdo and @fat. Maintained by the core team with the help of our contributors.</p>
340 <p>本项目源码受 MIT开源协议保护，文档受 CC BY 3.0 开源协议保护。</p>
341 </div>
342 </div>
343 </div>
344 </div>
345
346 <!-- Modal -->
347 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
348 <div class="modal-dialog modal-sm" role="document">
349 <div class="modal-content">
350 <div class="modal-header">
351 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
352 <h4 class="modal-title" id="myModalLabel">登录同志交友平台</h4>
353 </div>
354 <div class="modal-body">
355 <form action="#" class="">
356 <div class="form-group">
357 <label for="userInput">用户名：</label>
358 <input type="text" class="form-control" name="username" id="userInput">
359 </div>
360
361 <div class="form-group">
362 <label for="">密码：</label>
363 <input type="password" name="pwd" id="pwdInput" class="form-control">
364 </div>
365 </form>
366 </div>
367 <div class="modal-footer">
368 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
369 <button type="button" class="btn btn-primary">登录</button>
370 </div>
371 </div>
372 </div>
373 </div>
374
375 <!--导入jquery-->
376 <script src="dist/js/jquery-3.3.1.js"></script>
377 <script src="dist/js/bootstrap.js"></script>
378 <script>
379 $(function(){
380 $('#carousel-example-generic').carousel({
381 interval: 1000
382 })
383 })
384 </script>
385 </body>
386 </html>
越是困难的事越要立即去做，这样收益才会最大！！！
