前端开发利器—— 1 Bootstrap 前端开发利器- 1、前端流行框架介绍 2、 bootstrap 介绍 3、 bootstrap 深入浅出 4、 bootstrap 定制篇 5、 bootstrap 应用篇主讲人:王永强课程大纲: 时间: 2015-04-29 前端开发利器—— 2前端流行框架介绍前端开发利器—— 3 Bootstrap 介绍 BS 整体框架 CSS 组件响应式设计列表组进度条图标缩略图下拉菜单标签导航分页面包屑警告框徽章大屏展播洼地输入框组媒体对象按钮组面板 JavaScript 插件动画弹窗下拉菜单滚动侦查选项卡提示框警告框弹出框按钮轮播折叠浮标基础布局组件 12 栅格系统 + 前端开发利器—— 4 Bootstrap 介绍 BS 整体框架 Bootstrap 中国官网 http :/// 牵出来溜溜前端开发利器—— 5 Bootstrap 深入浅出 DTD <!DOCTYPE html> DOCTYPE 标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义( DTD )来解析文档。前端开发利器—— 6 Bootstrap 深入浅出<!DOCTYPE> < 要使用可以触发各浏览器“标准模式”的 DTD ,并书写符合规范的代码,以保证您的页面在各浏览器中可以最大程度的兼容. <!DOCTYPE html> 前端开发利器—— 7 Bootstrap 深入浅出 viewport 深入理解 viewport <meta name="viewport" content="width=device-width, initial-scale=, minimum-scale=, maximum -scale=, user-scalable=no"/> width - viewport 的宽度 height - viewport 的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放参数详解: Mobile first 前端开发利器—— 8 Bootstrap 深入浅出 box-sizing *{- webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box ;} box-sizing : content-box | border-box 默认值- content-box 参数详解: { box -sizing: content-box ; width :200px; padding :10px; border :15px solid #eee; } { box -sizing : border - box ; width :200px; padding :10px; border :15px solid #eee; } 前端开发利器—— 9 Bootstrap 深入浅出 CSS 优先级 A:表示 style 属性数量总和,优先级最高。 B: CSS 选择器上的 id数量的总和。 C: CSS 选择器上的其他 CSS 属性选择器以及伪类(像: hover 、: focus 、: first-child 等)的总和。 D:计算元素( table 、p、 div 等)和伪元素(像 first-child 等)数量总和。示例: 1、#navbar li#first { color:red; } 2、#navbar li:first-child{ color:blue; } 计算 CSS 优先级的公式:选择器定为 4种,假设为,优先级=ABCD ,组成的 4位数越大,优先级越高。 0,2,0,1=201 0,1,0,2=102 前端开发利器—— 10 Bootstrap 深入浅出 CSS 选择器[ att =value] : 属性等于 value [ att ~=value] : 属性包含 value 值, =“ title home list ”,class ~= “ list ”[ att |=value] : 属性值以“ value- ”开头, eg. lang= “ ”[ att ^=value] : 属性值必须以 value 开头, eg. c lass= “ value1 ”[ att $=value] : 属性
前端开发利器-bootstrap 来自淘豆网m.daumloan.com转载请标明出处.
