码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap框架

时间:2018-11-25 00:06:49      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:文件中   字体   16px   animate   布局   toast   title   空格   oda   

 

1、设置默认格式

技术分享图片

3、md,sm, xs

 技术分享图片

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

技术分享图片

 

二、响应式介绍

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

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

方式一、link.css文件

技术分享图片

主文件中导入link.css文件

技术分享图片

方式二、link2.css文件

技术分享图片

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

技术分享图片

 

三、常用插件

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

  先导入插件的CSS文件

  再导入jQuery文件

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

 1、Sweet Alert(弹出框)

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

技术分享图片



技术分享图片



技术分享图片


技术分享图片

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

      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 : 相当于提示信息,就像是一个按钮,指向按钮会有提示信息

Bootstrap框架

标签:文件中   字体   16px   animate   布局   toast   title   空格   oda   

原文地址:https://www.cnblogs.com/lujiacheng-Python/p/10013799.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!