1、BS整体框架,CSS组件,JavaScript插件,基础布局组件,12栅格系统,jQuery1.10+,BS整体框架,Bootstrap中国官网 http:/ 通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。,要使用可以触发各浏览器“标准 模式”的DTD,并书写符合规范 的代码,以保证您的页面在各浏 览器中可以最大程度的兼容.,viewport,深入理解viewport,width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum
2、-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放,参数详解:,Mobile first,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
3、;, box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee;,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;
4、 ,计算CSS优先级的公式:选择器定为4种,假设为,优先级=ABCD,组成的4位数越大,优先级越高。,0,2,0,1=201,0,1,0,2=102,CSS选择器,att=value :属性等于value,att=value :属性包含value值,eg.class=“title home list”,class=“list”,att|=value :属性值以“value-”开头,eg. lang=“zh-cn”,att=value :属性值必须以value开头,eg. class=“value1”,att$=value :属性值必须以value结束,eg. class=“homevalue”
5、,att*=value :属性值必须包含value结束,eg. class=“homevaluecur”,属性选择器,CSS选择器,ul li a color:#fff; (以当前节点为父节点的所有元素),子和兄弟选择器,h1 + li color:#fff; 临近兄弟,h1 p color:#fff; 查找某一个元素后面的兄弟节点(不限制于临近节点) 思考与:$(el).closest() 区别,CSS选择器,:hover,鼠标划过时的状态,伪类选择器,:focus,元素拥有焦点时的状态,:first-child,指定元素的第一个子元素,:last-child,指定元素的最后一个子元素,:n
6、th-child(),指定元素的一个或多个子元素,可以传数字,也可以传入even(偶数)和odd(奇数),eg. .btn-group .btn:not(:first-child):not(:last-child)border-radius:0; ,display,none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素 list-item 此元素会作为列表显示。 table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。 inline-tab
7、le 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。 table-row 此元素会作为一个表格行显示(类似 )。 table-column 此元素会作为一个单元格列显示(类似 ) table-cell 此元素会作为一个表格单元格显示(类似 和 ),媒体查询,media (max-width:767px)media (min-width:768px) and(max-width:992px),栅格系统原理,最外层:根据浏览器宽度分为4种尺寸 768px、768、992、1200,第二层:边框。.container容器,有4种 尺寸,自动(100%)、750px、970px、1170p
8、x,栅格系统原理,col-*-*:,Perfect!,栅格系统原理,.container padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; media (min-width: 768px) .container width: 750px; media (min-width: 992px) .container width: 970px; media (min-width: 1200px) .container width: 1170px; ,.col-*-n position: rel
9、ative; min-height: 1px; padding-right: 15px; padding-left: 15px;float:left; ,.row margin-right: -15px; margin-left: -15px;,.col-*-12 width:100%; .col-*-11 width: 91.66666667%; .col-*-10 width:83.33333333%; .col-*-1 width:8.33333333%;,栅格系统原理,.col-*-offset-12 margin-left:100%; .col-*-offset-11 margin-
10、left: 91.66666667%; .col-*-offset-10 margin-left:83.33333333%; .col-*-offset-0 margin-left:8.33333333%;,列偏移:col-*-offset-n,列排序: col-*-pull-n col-*-push-n,.col-*-pull-12 right:100%; .col-*-pull-11 right: 91.66666667%; .col-*-pull-10 right:83.33333333%; .col-*-pull-0 right:0;,响应式工具,响应式工具目前只是针对块级元素, 不支
11、持inline元素和表格元素。,打印样式,CSS组件架构设计思想,A+O,Append+Overwrite,8种样式重载+覆盖,JavaScript插件架构,插件规范:,1、HTML布局规则:基于元素自定义属性的布局规则,比如data-target等自定义属性。,2、JavaScript实现规则:所有插件都遵循jQuery插件开发的标准步骤,所有事件都保持了统一标准。,3、插件调用规则:都可以通过HTML声明的方式,也可以用js调用,支持多种回调和可选参数。,JavaScript插件架构,1、HTML布局规则,不用写JavaScript代码,就可以实现关闭功能。,Cool!,JavaScrip
12、t插件架构,2、JavaScript实现规则,1、立即调用函数.eg. +function($)“” (jQuery);,2、定义插件类型、原型方法,.eg. Alert。,3、在jQuery上定义插件并设置插件的构造函数,.eg. $.fn.alert.Constructor = Alert,4、防冲突管理(noConflict),.eg. $.fn.alert.noConflict = Alert,5、绑定各种触发事件(data-api),JavaScript插件架构,2、JavaScript实现规则,+function ($) use strict; /1. ECMAscript5/2.alert原型方法 /3.在jQuery上定义alert方法,制定构造函数/4.防冲突管理/5.绑定事件 (window.jQuery);,$(document).on(click.bs.alert.data-api, dismiss, Alert.prototype.close),var bsAlert = $.fn.alert.noConflict();,禁用响应式布局,我喜欢响应式布局, 所有到我想禁用的时候再说!,禁用响应式布局,接下来一起来畅游一下Bootstrap,定制自己的bootstrap,在产品或项目中使用BS,https:/