一.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
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
 
        <!--页面编码  -->
        <meta charset="UTF-8">
        <!--低版本浏览器模拟渲染-->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <!--响应式布局：UI布局和移动设备一致，缩放大小为原始大小-->
        <!--也可以使用下列声明：
        <meta name="viewport" content="width=device-width, initialscale=
1, maximumscale=1, user-scalable=no">
        意思是强制让文档宽度和设备宽度保持1：1，不允许用户单击放大浏览。注意content属性要用逗号（或分号）隔开，不规范则失效  -->
        <meta name="viewport" content="width=deviece-width,initial-scale=1">
         
        <!--支持国产浏览器的高速渲染-->
        <meta name="renderer" content="Webkit">
        <!--在此进行SEO设置：作者、关键词、描述-->
        <meta name="author" content="djtao">
        <meta name="keywords" content="djtao">
        <meta name="description" content="djtao">
         
        <title>bootstrap基础模板</title>
         
        <!--bootstrap-->
         
        <!--以下两个js插件用于在IE8及以下支持H5元素查询的，如不用可移除  -->
        <!--[if lt IE 9]>
            <script src="scripts/html5.min.js"></script>
            <script src="scripts/respond.min.js"></script>
        <![endif]-->
         
        <!--bootstrap样式文件  -->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
        <!--自定义样式文件  -->
        <link rel="stylesheet" href="styles/css.css">
         
 
         
         
         
    </head>
    <body>
     
     
     
        <!--基于jQuery的脚本文件  -->
        <script src="scripts/jquery.min.js"></script>
        <!-- bootstrap的jq插件 -->
        <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
<!-- Latest compiled and minified CSS -->
 
<!-- Optional theme -->
 
<!-- Latest compiled and minified JavaScript -->

五. 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文档的价值。

本系列读书笔记基于现学现用，快速入门的想法，将会插入一些书外网上搜集的书外实例。基本都是自己敲过一遍，部分内容自己改造过，故而只是一系列记录自己学习过程的文章。而已。

《深入理解bootstrap》读书笔记：第一章 入门准备的更多相关文章

  1. 《深入理解计算机系统》（CSAPP）读书笔记 —— 第一章 计算机系统漫游

    本章通过跟踪hello程序的生命周期来开始对计算机系统进行学习.一个源程序从它被程序员创建开始,到在系统上运行,输出简单的消息,然后终止.我们将沿着这个程序的生命周期,简要地介绍一些逐步出现的关键概念 ...

  2. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  3. Java学习笔记 第一章 入门<转>

    第一章 JAVA入门 一.基础常识 1.软件开发 什么是软件? 软件:一系列按照特定顺序组织的计算机数据和指令的集合 系统软件:DOS,Windows,Linux 应用软件:扫雷.QQ.迅雷 什么是开 ...

  4. 《疯狂Java：突破程序员基本功的16课》读书笔记-第一章 数组与内存控制

    很早以前就听过李刚老师的疯狂java系列很不错,所以最近找一本拿来拜读,再此做下读书笔记,促进更好的消化. 使用Java数组之前必须先对数组对象进行初始化.当数组的所有元素都被分配了合适的内存空间,并 ...

  5. C缺陷与陷阱----读书笔记---第一章

    第一章:词法陷阱 编译器中负责将程序分解为一个一个符号的部分,一般称为“词法分析器”.例如,对于语句: if ( x == big ) big = x ; 它的第一个符号是C语言关键字if,紧接着下一 ...

  6. Getting Started With Hazelcast 读书笔记(第一章)

    第一章:数据集群的演化与 早期的服务器架构 显然,应用是可扩展的,但是由于是集中式服务器,随着数据库性能达到极限,再想扩展就变得极端困难,于是出现了缓存.    缓存显然再次提升了可扩展性,减轻了数据 ...

  7. .net架构设计读书笔记--第一章 基础

    第一章 基础 第一节 软件架构与软件架构师  简单的说软件架构即是为客户构建一个软件系统.架构师随便软件架构应运而生,架构师是一个角色. 2000年9月ANSI和IEEE发布了<密集性软件架构建 ...

  8. 《C++ Primer》读书笔记 第一章

    读<C++ Primer>才知道,自己对C++知之甚少... 写个博客记录下自己C++的成长,只是读书笔记,不是对<C++ Primer>知识点的总结,而是对自己在书上看到的以 ...

  9. 《从0到1》读书笔记第一章&quot;未来的挑战&quot;第2记:做老子还是做孙子

    从1到N VS 从0到1 - 别让自己的小鸡鸡抓在别人的手上 近几年国内互联网创业上非常流行一种C2C(也就是Copy to China - 复制到中国)的创业模式,打的就是一个时间差和地域差.将在国 ...

  10. 深入Java虚拟机读书笔记第一章Java体系结构介绍

    第1章 Java体系结构介绍 Java技术核心:Java虚拟机 Java:安全(先天防bug的设计.内存).健壮.平台无关.网络无关(底层结构上,对象序列化和RMI为分布式系统中各个部分共享对象提供了 ...

随机推荐

  1. ART、JIT、AOT、Dalvik之间的关系

    原文地址: https://github.com/ZhaoKaiQiang/AndroidDifficultAnalysis/blob/master/10.ART%E3%80%81JIT%E3%80% ...

  2. [转]JAVA设计模式之单例模式

    原文地址:http://blog.csdn.net/jason0539/article/details/23297037 概念: java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主 ...

  3. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  4. CentOS 6.5升级Python和安装IPython（亲测可用）

    python的升级(2.6------>2.7.x) 如下地址:http://note.youdao.com/share/?id=2928aeda020123bfdf2a2c76bc75e4a7 ...

  5. mysql优化基础

    唯一索引(unique index)强调唯一,就是索引值必须唯一. create unique index [索引名] on 表名 (列名);alter table 表名 add unique ind ...

  6. Elasticsearch 2.X 版本Java插件开发简述

    1:elasticsearch插件分类简述 2:Java插件开发要点 3:如何针对不同版本elasticsearch提供多版本的插件 4:插件具有外部依赖时遇到的一些问题(2016-09-07更新) ...

  7. 提供RESTful服务

    RESTful广泛运用于互联网服务,而在企业应用中,大部分场景仍然是RPC服务,这是由于企业应用的业务复杂性造成的.但是基于SOAP的RPC服务也存在很多的弊端,比如服务异步处理比较麻烦,大部分RPC ...

  8. Web前端性能优化教程03：添加Expires头

    本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...

  9. 【USACO 1.5】Prime Palindromes

    /* TASK: pprime LANG: C++ SOLVE: 枚举数的长度,dfs出对称的数,判断是否在范围内,是否是素数 原来想着枚举每个范围里的数,但是显然超时,范围最大是10^9. 对称的数 ...

  10. 【C++实现python字符串函数库】一：分割函数：split、rsplit

    [C++实现python字符串函数库]split()与rsplit()方法 前言 本系列文章将介绍python提供的字符串函数,并尝试使用C++来实现这些函数.这些C++函数在这里做单独的分析,最后我 ...