2015-10-17 |

Bootstrap入门准备

Bootstrap入门准备指南教程

本节目录:

  • 简介

  • 入门

  • 基本模板

  • CSS基本语法

  • JS基本语法

  • 扩展

简介

Bootstrap是目前最流行的前端开发框架,由Twitter的两位前 员工Mark Otto和Jacob Thornton在2010年8月份创建。它是一套 基于Less的前端开发库(最新版也包含了Sass源码),提供了很多常见并常用的各种CSS和JavaScript合集,以便开发人员随时上手。

Bootstrap提供了如下重要的特性:

  • 一套完整的基础CSS插件。

  • 丰富的预定义样式表。

  • 一组基于jQuery的JS插件集。

  • 一个非常灵活的响应式(Responsive)栅格系统,并且崇尚移动先行(Mobile First)的思想。

从V3.1.0开始,Bootstrap的License授权改成了MIT协议。 MIT是目前最为宽松的协议,大家可以放心地在各种商业环境中使用它。

入门

cdn:

Bootstrap - Bootstrap入门准备

Bootstrap框架的文件和源码可以在其官方网站 (www.getbootstrap.com)下载。打开链接可以看到3个下载链接

Bootstrap - Bootstrap入门准备

下载Bootstrap,下载的内容是编译后可以直接使用。包括未经压缩的文件和经过压缩处理的文件。

下载源码,是用于编译CSS的Less源码,以及各个插件的JS源码。

下载Sass项目,是用于编译CSS的Sass源码,以及各个插件的JS源码。

文件结构

Bootstrap - Bootstrap入门准备

3.X版和2.X系列版本有一个很大区别,就是2.x系列版本用于展示icon小图标的.png图 片不见了,取而代之的是fonts目录的4种类型的字体文件。我们称这种方式为@font-face版本的icon实现,该字体来自glyphicons.com网站,并得到免费授权。通过这种技术显示图标的好处是,图标可以被任意缩放、改变颜色。

对文件的css、js文件夹名称 进行随意重命名,但是不能对fonts文件夹进行重命名,因为CSS 文件里的源码使用了相对路径(../fonts/)

注意bs的所有js插件都是基于jQuery的,要确保在使用这些功能的时候引用相应的jQuery文件。

基本模板

Bootstrap - Bootstrap入门准备


由上述模板代码可以看出,3.x和2.x版本相比,有一个很大的 区别,就是多了以下一行代码:

Bootstrap - Bootstrap入门准备

这就是我们前面提到的,Bootstrap从3.0版本开始全面支持移动平台了,并将贯彻移动先行(Mobile First)的宗旨。

上述代码 的意思是,默认情况下,UI布局的宽度和移动设备的宽度一致,缩放大小为原始大小。

CSS基本语法

Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。

如何确定CSS的优先级?

这里我们要先引入一个机制,分别 用4个字母(a,b,c,d)表示优先级组合.

第一个数字(a)表示style属性,优先级最高。由于一般都 是class样式,所以该值一般都是0。

第二个数字(b)是该CSS选择器上的id数量的总和,一般都 是1个。

第三个数字(c)是用在该CSS选择器上的其他属性CSS选择 器以及伪类的总和。这里包括class(.btn)和属性CSS选择器(比 如li[id=red])。

第四个数字(d)计算元素(就像table、p、div等)和伪元 素(就像first-child等)。

选择器

这里简单介绍2个常用的:

子选择器:

Bootstrap - Bootstrap入门准备

Bootstrap - Bootstrap入门准备

扩展:

div,p表示多个选择器同时被选择

伪类用于向某些选择器添加特殊的效果。如a:hover a:link

媒体查询

媒体查询是进行响应式设计的核心要素,其功能非常强大。

Bootstrap主要用到min-width、max-width,以及and语法, 用于在不同的分辨率下设置不同的CSS样式。

Bootstrap - Bootstrap入门准备

JS基本语法

||与&& 2个运算符

||表示,如果第一个元素可以转换为true,则返回第一个元 素的值,否则查询第二个元素的值

&&则相反,如果第一个元素可以转换为false,才返回第一 个元素的值,否则返回第二个元素的值

空对象null,undefined为false

数字零为false

空字符串为false

Bootstrap - Bootstrap入门准备

自执行函数

Bootstrap - Bootstrap入门准备

原型

在Alert函数上定义一个名为close的原型方法。

Bootstrap - Bootstrap入门准备

什么是原型,原型的好处,可以看这篇:

对于JavaScript prototype的理解

这里演示如何调用原型方法

Bootstrap - Bootstrap入门准备

jQuery

绑定事件最好使用on()方法。

Bootstrap - Bootstrap入门准备


而在bs中

Bootstrap - Bootstrap入门准备


上述的on在使用时,中间多了一个参数,而且选择器变成了 document。它的好处是只在document上绑定一个单击事件,利 用冒泡的机制,在单击的时候检查是否是td元素,如果是才处 理。而前面我们把td作为选择器的时候,一个页面有多少td元素 就会绑定多少个click事件,这样性能会大大降低。这种3个参数的 模式称为享元模式。

$(selector).data()

收集指定元素上的所有以data-开头的自定义属性,并合并成为一个对象字面量。

Bootstrap - Bootstrap入门准备


如果要获取data-role里aaa这个值

Bootstrap - Bootstrap入门准备

扩展

Less是一种CSS预处理技术,它是一种动态样式语言,属于 CSS预处理语言中的一种。

HTML5辅助设计

在bs中,出现了不是以data-开头的 自定义属性,我们称之为辅助属性。

这些属性是HTML5新提出的概念,用于支持残障人士、老年人、文化水平不高或暂时患病的 人使用屏幕阅读器进行页面访问。

aria-hidden="true"表示对屏幕阅读器隐藏该div 元素

role="navigation"表示该区域用于导航

 

前端观察

发表评论

    评价:
    验证码: 点击我更换图片