一.bootstrap框架简介 Bootstrap是最流行的前端开发框架。 什么是框架：开发过程的半成品。 bootstrap具有以下重要特性： （1）完整的CSS样式插件 （2）丰富的预定义样式表 （3）基于jQuery的插件集 （4）灵活的栅格系统 以下将简单介绍对bootstrap可能用到的知识进行梳理。 二.新手入门 笔者使用版本是3.3.x 在bootstrap中文官网可以找到以下界面 本书采用预编译的版本进行学习 三. 文件结构 生产环境使用bootstrap.min.css和bootstrap.min.js。除了font结构之外，其他文件都可以随意命名。 四. 标准模板 首先是在aptana搭建bootstrap环境。 ctrl+N新建web项目，选择默认项目，命名项目，定义位置，完成。 把下载好的文件夹dist重命名为bootstrap，复制粘贴到项目文件夹下。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 html lang="zh-cn"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=Edge"> meta name="viewport" content="width=deviece-width,initial-scale=1"> meta name="renderer" content="Webkit"> meta name="author" content="djtao"> meta name="keywords" content="djtao"> meta name="description" content="djtao"> title>bootstrap基础模板title> link rel="stylesheet" href="bootstrap/css/bootstrap.css"> link rel="stylesheet" href="styles/css.css"> head> body> script src="scripts/jquery.min.js">script> script src="bootstrap/js/bootstrap.min.js">script> script src="scripts/js.js">script> body> html> 注意用顺序，自己的样式和脚本必须在后面。 网上引用cdn是 1 2 3 4 5 6 7 8 "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> 五. CSS基本语法 1.优先级 和原生CSS一样。 #xxx>.xxx>xxx 2.选择器 （1）属性选择器 （2）子选择器 >号 （3）兄弟选择器 临近选择器用+号表示，比如说在一个nav-ul-li结构的导航条里，欲设置两个li之间的外边距。 1 2 3 nav>li+li{ margin-left:10px; } 指定元素后边的节点用~。比如说查找article元素内h1后面所有的p元素 1 article h1~p{font-size:20px} 3. 伪类选择器 bootstrap常用的伪类无外乎这几个 4. display属性 display很好用，但是不能乱用。 5.媒询 媒询是bootstrap响应式布局核心的要素，但主要用到的还是min,max和and 1 2 3 4 5 6 7 8 9 @media(max-width: 767px){ /*在小于768像素的屏幕中，这里样式生效*/ } @media(max-width: 767px) and (max-width: 991px){ /*在768-991像素区间的屏幕中，这里样式生效*/ } @media(min-width: 1200px){ /*在大于等于1200像素的屏幕中，这里样式生效*/ } 同理还可以用到高度。 6.相关JavaScript语法梳理 （1）与和或运算符（&&，||）（2）立即调用函数 推荐使用这个 1 2 3 (function(){ do somthing }() ) 表示马上调用。 （3）原型 BT中的js插件，都是基于面向对象的方法创建。 简单举个栗子，定义加减法运算 1 2 3 4 5 6 7 8 9 10 11 12 var decimalDigits = 2, tax = 5; function add(x, y) { return x + y; } function subtract(x, y) { return x - y; } //alert(add(1, 3)); 改写成一个加减计算函数对象 1 2 3 4 var Calculator = function (decimalDigits, tax) { this.decimalDigits = decimalDigits; this.tax = tax; }; 然后，通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。 1 2 3 4 5 6 7 8 9 10 Calculator.prototype = { add: function (x, y) { return x + y; }, subtract: function (x, y) { return x - y; } }; //alert((new Calculator()).add(1, 3)); （代码来自作者博客） 7.jQuery知识梳理 （1）事件绑定 jQuery常用的绑定语法有on/off、bind/unbind。比如说 1 2 $('div').on(click,function(){...}); $('div').off(click,function(){...}); 注：bind()函数是jQuery 1.7之前或更早版本采用的一个用来绑定事件处理程序的函数；on()函数是jQuery 1.7版本提供的首选的用来绑定事件处理程序的函数；从1.7版本的介绍以及参数描述来看，其实这两个函数基本上用法一致，但可能在早期的版本中，bind()函数一次只能为标签对象绑定一个事件的处理程序，而on()函数则可以一次为多个不同的事件绑定处理程序。 在bootstrap方法中的绑定类似但是思想不同， 1 $(document).on('click.bs.carosel.data.api','div',function(){...}) 利用的是冒泡的机制，选择document的div。提高了性能。 （2）命名空间 调试时，事件后面加上一段字符串比如click.djtao，再用trigger方法触发时，就不会影响原本的点击事件。 （3）$.data() 搜集指定元素上所有以data为前缀的自定义属性，合并为一个字面量。比如说： 1 div id="abc" data-role="aaa" data-toggle="toggle" data-xxx="djtao">div> 我要收集role的值 1 $('#abc').data('role') 如果不带参数，则等于收集并声明了一个json。var value={role:'aaa',toggle:'toggle',xxx:'djtao'} 8.H5的辅助属性 可以支持盲人等人群阅读。通常以arial为前缀统称arial属性。 【后记】 很多国内作者的书读起来就跟看api文档的感觉一样。自己的话多了错误就多，而且还贵(@﹏@)~。。但API文档本身的起点不低，既然说是“深入理解”了，多读几遍，经历过若干项目。或许就能看出它高于API文档的价值。 本系列读书笔记基于现学现用，快速入门的想法，将会插入一些书外网上搜集的书外实例。基本都是自己敲过一遍，部分内容自己改造过，故而只是一系列记录自己学习过程的文章。而已。 来自为知笔记(Wiz)
