• bootstrap总结



    Bootstrap总结报告: 看源码学习哦!必须要做的事!

    一:前言

    1.兼容设备:桌面浏览器、平板电脑、手机

    2.特色:响应式栅格、丰富组件、jquery插件! (布局、样式、交互)

    3.get skill:图片文件压缩!

    图标集:前端用到的哦!

    4.先引入css,因为渲染引擎要用到哦! 放最上面; 然后是jquery,因为bootstrap是基于jquery实现的哦!


    二:脚手架

    1.脚手架:做的就是准备工作。

    2.normalize.css(reset.css):清空和重置浏览器的默认行为!

    3.响应式:meta标签 + bootstrap.respsonsive.css: 布局辅助类
    。响应式工具不能用于table元素,而且本就不支持。

    三:基本CSS样式

    1.文本

    2.列表

    3.表格

    4.表单

    5.按钮

    6.图片样式类

    7.图标:glyphicons 图标颜色是可以设置的哦!

    四:组件

    1.下拉菜单

    2.按钮组

    3.按钮下拉菜单

    4.导航

    5.导航条:static fixed absolute

    6.路径导航(面包屑导航)

    7.分页

    8.缩略图

    9.警告框:信息提示只用

    10.进度条

    11.媒体对象? 干啥用的?

    五: JavaScript插件 (show:事件执行之前; shown:动作执行完毕) bootstrap提供了很多事件哦!

    1.过渡效果

    2.模态对话框(模态框提供了事件哦:show、shown、hide、hidden)

    3.滚动监听(bootstrap提供了事件哦)

    4.标签页

    5.工具提示、弹出提示

    6.警告框

    7.手风琴组件(可折叠)

    8.轮播:Bootstrap的轮播插件对外暴露了两个可被监听的事件!

    9.输入提示:前端验证可以用的到哦,自己去扩展里面的内容!

    10.附加导航

    发现的漏洞、思想:

    1.媒体查询你要好好的学习下噢! <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    2.javascript构建工具:grunt

    3.定义了额多个class类,实现了类的灵活性! btn btn-default btn-large: 解耦,各司其职!

    4.图标的实现原理:都是编码实现的哦!

    5.常用的标签:div ul li a

    6.绝对定位的导航条和fixed的导航条?

    7.data-src?

    8.插件冲突:Bootstrap插件和其它UI框架一同使用! 思想:有问题第一时间好好的看官网哦!


    最后: 一个良好的前端工程师的素养

    1.用相对单位:em rem!

    2.行内、块状

    3.css选择器:CSS的 :empty 选择器 jquery:first之类的选择器

    4.web端事件、移动web端事件!

    Bootstrap Version 3:

    一:是什么?

    答:HTML/CSS/JAVASCRIPT框架,响应式的web项目框架。

    二:

    1.css预处理脚本:less sass

  • 相关阅读:
    如何查看ubuntu版本
    基于Python与命令行人脸识别项目(系列一)
    问题 B: Curriculum Vitae
    问题 M: 克隆玩具
    1906: 鹊桥相会
    3265: 聪明的矿工
    2363: 完美旗手队列
    2545: 内部收益率
    2544: 台球碰撞
    3272: 公民身份号码
  • 原文地址:https://www.cnblogs.com/njqa/p/6027990.html
Copyright © 2020-2023  润新知