一、一个小知识点

1、截取长屏的操作

2、设置默认格式

3、md，sm， xs

 

4、空格和没有空格的选择器

 

二、响应式介绍

- 响应式布局是什么？

　　同一个网页在不同的终端上呈现不同的布局等

- 响应式怎么实现的？

　　1. CSS3 media query 媒体查询

　　2. JS去控制网页的布局和样式等

　　　　- 缺点：工作量大，网页响应慢

　　　　- 优点： 专治疑难杂症

　　3. 用框架

　　　　- Bootstrap

测试用css 媒体查询实现响应式

方式一、link.css文件

主文件中导入link.css文件

方式二、link2.css文件

在主文件中导入link2.css文件

 测试用Bootstrap实现响应式

1   2   3   4     
         5       6     
         7     
         8     
         9        34  35  36 
        37 
       
         38     
        
          39         
          40         
         
           41             
           43                 Toggle navigation 44                  45                  46                  47              48             
          Project name 49         
         
 50  51         
          52         
         
           53             
          
            54                 
           
Home (current)
 55                 
           
About
 56                 
           
Contact
 57             
          
 58         
         
          59     
        
         60 
       
 61  62 
       
         63     
        
          64         
          65         
         
           66             
           67             
           68             
          
 69                 Toggle nav 70             
 71             
           72             
          
            73                 
           
             74                     
            
Hello, world!
 75                     
            
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to 76 featured content or information.
 77                 
           
 78             
          
 79             
           80             
           81             
          
            82                 
           
Thumbnail label
 83                 
           
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at 84                     eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
 85                 
           
查看详情>>
 86             
          
 87              
           88             
          
            89                 
           
Thumbnail label
 90                 
           
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at 91                     eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
 92                 
           
查看详情>>
 93             
          
 94              
           95             
          
            96                 
           
Thumbnail label
 97                 
           
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at 98                     eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
 99                 
           
查看详情>>
100             
          
101              
          102             
          
           103                 
           
Thumbnail label
104                 
           
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at105                     eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
106                 
           
查看详情>>
107             
          
108              
          109             
          
           110                 
           
Thumbnail label
111                 
           
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at112                     eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
113                 
           
查看详情>>
114             
          
115             
          116             
          
           117                 
           
Thumbnail label
118                 
           
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at119                     eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
120                 
           
查看详情>>
121             
          
122         
         
123         
         124         
         
          125             
          
           126                 
           Cras justo odio127                 
           Dapibus ac facilisis in128                 
           Morbi leo risus129                 
           Porta ac consectetur ac130                 
           Vestibulum at eros131                 
           Vestibulum at eros132                 
           Vestibulum at eros133                 
           Vestibulum at eros134             
          
135         
         
136     
        
137 
       
138 139 140 148 149 150 

三、常用插件

常用插件基本上都是基于jQuery ，

　　先导入插件的CSS文件

　　再导入jQuery文件

　　最后导入JS，注意jQuery是必须要放在JS上面的

 1、Sweet Alert（弹出框）

使用步骤：1下载 2解压找到里面的dist（主要是dist）和animate.css  3引入到自己的文件里就行了   注：如果是html参数就要用animate 　　　

 具体例子实现

代码实现

 

1  2  3  4     
        5     
        6     
        7      8     
        9     
       10 11 12 13 14 15 16 47 48 49 

 

 

 

运行结果截图：

 

 

2、jQuery lazyload  主要是为了节省流量，点击时才出现

懒加载图片例子

1  2  3  4   
        5   
        6   
        7    8  9 10 
       
        11   
        
         
        
12   
        
         
        
13   
        
         
        
14   
        
         
        
15   
        
         
        
16   
        
         
        
17   
        
         
        
18   
        
         
        
19   
        
         
        
20   
        
         
        
21   
        
         
        
22   
        
         
        
23   
        
         
        
24   
        
         
        
25   
        
         
        
26   
        
         
        
27   
        
         
        
28   
        
         
        
29   
        
         
        
30   
        
         
        
31   
        
         
        
32   
        
         
        
33   
        
         
        
34   
        
         
        
35   
        
         
        
36   
        
         
        
37   
        
         
        
38   
        
         
        
39   
        
         
        
40   
        
         
        
41   
        
         
        
42   
        
         
        
43   
        
         
        
44   
        
         
        
45   
        
         
        
46   
        
         
        
47   
        
         
        
48   
        
         
        
49   
        
         
        
50   
        
         
        
51   
        
         
        
52   
        
         
        
53   
        
         
        
54   
        
         
        
55   
        
         
        
56   
        
         
        
57   
        
         
        
58   
        
         
        
59   
        
         
        
60   
        
         
        
61   
        
         
        
62   
        
         
        
63   
        
         
        
64   
        
         
        
65   
        
         
        
66   
        
         
        
67   
        
         
        
68   
        
         
        
69   
        
         
        
70   
        
         
        
71 72 
       
73 74 75 81 82 

3、Font Awesome 字体图标（一般用fonts文件）

1  2  3  4     
        5     
        6     
        7      8     
        9     
       10     
       11 12 13 微信14 15   16   17 18 19 20 39 40 

4、 Toastr （通知栏） 　　 使用步骤：1下载 2解压找到里面的build 3引入到自己的文件里就行了    - 通知栏的插件

四、用Bootstrap实现的轮廓图

1  2  3  4     
        5     
        6     
        7      8     
        9 10 11 
       12     
       13         
       14 
       15         
       
        16             
        17             
        
         18                 
         
19                 
         
20                 
         
21             
        
22 23             
        24             
        
         25                 
         
          26                     
          27                     
          
           28                         世情薄，人情恶，雨送黄昏花易落。29                     
          
30                 
         
31                 
         
          32                     
          33                     
          
           34                         晓风干，泪痕残，欲笺心情，独语斜阑， 难 难 难。35                     
          
36                 
         
37                 
         
          38                     
          39                     
          
           40                          人成各，今非昨。病魂常似秋千索。41                     
          
42                 
         
43             
        
44 45             
        46             
        47                 48                 Previous49             50             
        51                 52                 Next53             54         
       
55       
       56     
       57 
       58 59 60 61 

五、需要知道的几个插件网址

      1、 (弹出框)：https://github.com/t4t5/sweetalert

　  2、2 (弹出框)：https://github.com/limonte/sweetalert2

　  3、（字体图标）：http://fontawesome.io

      4、（懒加载）：https://github.com/tuupola/jquery_lazyload

      5、（通知栏）：http://codeseven.github.io/toastr/

六、Bootstrap网址：http://v3.bootcss.com/

      有时间看一下这个网址：http://www.jq22.com/daima

七、自定义Bootstrap组件，

　　　　1、找到自定义那一页

　　　　2、勾选我用到的组件

　　　　3、拉到最后面，点击下载

八、Bootstrap补充：

- modal 　　  和模态框使用的 　　  $("#myModal").modal("show")

　　- collapse ：也是在JavaScript组件中去找，点击按钮有信息出来    - tooltip ： 相当于提示信息，就像是一个按钮，指向按钮会有提示信息

1  2  3  4     
        5     
        6     
        7      8     
        9 10 11 
       12 指向我13 Tooltip on bottom14 Tooltip on right15 
       16 
       
        17   
        
18   
        
         19     Some tooltip text!20   
        
21 
       
22 23 24 27 28