一.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. Spring 向页面传值以及接受页面传过来的参数的方式

    来源于:http://www.cnblogs.com/liuhongfeng/p/4802013.html 一.从页面接收参数 Spring MVC接收请求提交的参数值的几种方法: 使用HttpSer ...

  2. Java--剑指offer（5）

    21.输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序列对 ...

  3. 链表的Java实现

    import java.lang.System; public class Hello { public static void main(String[] args) { LinkList List ...

  4. iOS开发--利用MPMoviePlayerController播放视频简单实现

    一.包含头文件#import <MediaPlayer/MediaPlayer.h> 二.重点:给MPMoviePlayerController的view设置frame,并且将view添加 ...

  5. 【BZOJ 4456】【UOJ #184】【ZJOI 2016】旅行者

    http://www.lydsy.com/JudgeOnline/problem.php?id=4456 http://uoj.ac/problem/184 参考(抄)的晨爷的题解(代码) 对矩形进行 ...

  6. 逻辑回归&&code

    没有正则化项的时候的二分类 #-*-coding=utf-8-*- from numpy import loadtxt,where, transpose import matplotlib.pyplo ...

  7. java的debug和release编译方式

    以前没有注意过,其实Java编译成.class 有两种方式 使用javac,默认使用的release方式,而我们经常使用的MyEclipse工具,用的是debug模式. 区别暂时了解如下: relea ...

  8. 自定义jstl标签库

    开发环境:Spring+SpringMVC +Maven +Mybatis JSTL 标签库的配置: 导入对应的 jstl.jar 和 standard.jar ,我使用的配置如下: <prop ...

  9. 浅谈我对JCS 的理解

    JCS 是Java 中缓存的一种实现,支持将数据缓存到内存和硬盘中,支持设置缓存对象的有效时长. 我认为可以这么理解JCS:客户端向服务器发出请求,服务器就先去缓存中查一下有没有客户端请求的数据,有则 ...

  10. nginx日志分析

    日志格式 log_format access '$remote_addr - $remote_user [$time_local] "$request" ' '$status $b ...