Bootstrap补充 - 爱码网

一、一个小知识点

1、截取长屏的操作

Bootstrap补充

2、设置默认格式

Bootstrap补充

3、md，sm， xs

Bootstrap补充

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

Bootstrap补充

二、响应式介绍

- 响应式布局是什么？
　　同一个网页在不同的终端上呈现不同的布局等
- 响应式怎么实现的？
　　1. CSS3 media query 媒体查询
　　2. JS去控制网页的布局和样式等
　　　　- 缺点：工作量大，网页响应慢
　　　　- 优点：专治疑难杂症
　　3. 用框架
　　　　- Bootstrap

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

方式一、link.css文件

Bootstrap补充

主文件中导入link.css文件

Bootstrap补充

方式二、link2.css文件

Bootstrap补充

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

Bootstrap补充

测试用Bootstrap实现响应式

用Bootstrap实现的响应式例子

三、常用插件

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

　　先导入插件的CSS文件

　　再导入jQuery文件

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

1、Sweet Alert（弹出框）

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

具体例子实现

代码实现

sweetAlert示例

运行结果截图：

Bootstrap补充


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

  懒加载图片例子

懒加载图片例子

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

字体图标示例

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

四、用Bootstrap实现的轮廓图

Bootstrap补充

示例

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

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 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width">
 7     <title>按钮提示</title>
 8     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
 9 </head>
10 <body>
11 <!-- HTML to write -->
12 <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">指向我</button>
13 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
14 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
15 <!-- Generated markup by the plugin -->
16 <div class="tooltip top" role="tooltip">
17   <div class="tooltip-arrow"></div>
18   <div class="tooltip-inner">
19     Some tooltip text!
20   </div>
21 </div>
22 <script src="jquery-3.2.1.min.js"></script>
23 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
24 <script>
25     $('.btn').tooltip();
26 </script>
27 </body>
28 </html>