BootStrap的基本使用

最新推荐文章于 2024-05-06 15:39:50 发布

Surenon

最新推荐文章于 2024-05-06 15:39:50 发布

阅读量261

点赞数

文章标签： ui javascript 操作系统 ViewUI

原文链接：http://www.cnblogs.com/Roc-Atlantis/p/9507323.html

版权

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) 给阅读器看的。人文关怀，

1 UI框架

包含 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>

Bootstrap

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>

Bootstrap栅格系统

行和列

行 .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>

BootStrap表格

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>

Bootstrap表单

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>

Bootstrap组件

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">&times;</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">&times;</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>

加入主题页面（不明显）

转载于:https://www.cnblogs.com/Roc-Atlantis/p/9507323.html

Surenon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap的基本使用

bootstrap 现成的css样式，直接调用类作用是快速写出页面又称UI框架Bootstrap中文网LESS是预处理器CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。下载bootst...
复制链接

扫一扫