Bootstrap补充

一、一个小知识点

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              42                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 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 at
105                     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 at
112                     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 at
119                     eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
120                 
查看详情>>
121             
122         
123         
124         

125             

126                 Cras justo odio
127                 Dapibus ac facilisis in
128                 Morbi leo risus
129                 Porta ac consectetur ac
130                 Vestibulum at eros
131                 Vestibulum at eros
132                 Vestibulum at eros
133                 Vestibulum at eros
134             
135         
136     
137 
138 
139 
140 
148 
149 
150 

用Bootstrap实现的响应式例子

三、常用插件

常用插件基本上都是基于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 

sweetAlert示例

 

 

 

运行结果截图：

 

 

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                 Previous
49             
50             
51                 
52                 Next
53             
54         
55       
56     
57 
58 
59 
60 
61 

示例

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

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

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

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

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

      5、Toastr（通知栏）：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 bottom
14 Tooltip on right
15 
16 

17   

18   

19     Some tooltip text!
20   
21 
22 
23 
24 
27 
28 

tooltip示例

 

转载于:https://www.cnblogs.com/haiyan123/p/7688836.html