首页 > > 网页制作 > css >

《深入理解bootstrap》读书笔记：第一章 入门准…

2018-06-24 00:27:37来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

一.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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


五. 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)



标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：css的用法

下一篇：用canvas绘制折线图

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签