登录  /  注册

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

php中文网
发布: 2016-10-10 11:41:02
原创
967人浏览过

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

注意用顺序,自己的样式和脚本必须在后面。

网上引用cdn是

1
2
3
4
5
6
7
8
<!-- Latest compiled and minified CSS --&gt;
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
 
<!-- Optional theme --&gt;
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"&gt;
 
<!-- Latest compiled and minified JavaScript --&gt;
<script src="&lt;/code"&gt;<code class="as3 string"&gt;"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</script&gt;&gt;


五. CSS基本语法

1.优先级

和原生CSS一样。

#xxx&gt;.xxx&gt;xxx

2.选择器

(1)属性选择器

(2)子选择器

&gt;号

(3)兄弟选择器

临近选择器用+号表示,比如说在一个nav-ul-li结构的导航条里,欲设置两个li之间的外边距。

1
2
3
nav&gt;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
<code class="html keyword"&gt;div id="abc" data-role="aaa" data-toggle="toggle" data-xxx="djtao"&gt;<code class="html keyword"&gt;div&gt;

我要收集role的值

1
$('#abc').data('role')

如果不带参数,则等于收集并声明了一个json。var value={role:'aaa',toggle:'toggle',xxx:'djtao'}

 

8.H5的辅助属性

可以支持盲人等人群阅读。通常以arial为前缀统称arial属性。

 

【后记】

很多国内作者的书读起来就跟看api文档的感觉一样。自己的话多了错误就多,而且还贵(@﹏@)~。。但API文档本身的起点不低,既然说是“深入理解”了,多读几遍,经历过若干项目。或许就能看出它高于API文档的价值。

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

 

来自为知笔记(Wiz)



智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号