Bootstrap实用手册

1. 什么是响应式网页

Responsive Web Page,响应式网页/自适应网页,即一个页面既可以在 PC 浏览器中浏览,也可以在手机、平板中浏览,并且配合不同设备有不同的响应结果,响应式网页的特点:

(1). 页面上的图片和文字要随着屏幕尺寸发生改变

(2). 页面的布局随着屏幕尺寸而发生改变

 

2. 视口 - viewport

IOS 中的 Safari 最早引入的概念

视口:移动设备中,浏览器里显示网页的一块区域(PC 端会忽略)

对于响应式网页,设置视口的信息:

(1). 视口的宽度:要与设备宽度一致

(2). 视口的缩放倍率:设置为 1,即不缩放

(3). 视口的手动缩放:不允许缩放网页

在 HTML 中指定视口信息:(移动端必备)

①. width:视口的宽度

A. device-width

设备的宽度

B. 具体数值

②. initial-scale

视口的初始缩放倍率

A. 缩放倍数

B. 原始大小

③. user-scalable

是否允许视口手动缩放

A. 1 /yes

B. 0 / no

 

3. 如何编写响应式网页 (重点)

(1). 必须声明视口(已解决)

(2). 文字使用相对尺寸(em,rem),尽量不用绝对尺寸(px)

CSS 中的 1px 并不代表真实物理设备的 1px,如:iPhone4 以后,屏幕为 Retina 屏幕,屏幕大小没有变化,但分辨率提升一倍,屏幕 320 * 480,分辨率:640 * 960

em : 父元素字体大小倍数

rem : 根元素(html)字体大小倍数

(3). 容器元素使用相对尺寸(%,auto),尽量不用绝对尺寸(px)

(4). 图片使用相对尺寸(%,auto),尽量不用绝对尺寸(px)

(5). 页面元素使用流式布局,流式布局特点:

①. 元素默认靠向容器的左上方

②. 横向排列,排列不下则换行

方法:

①:float

②:display:inline-block

(6). 响应式网页都要使用 CSS3 Media Query 技术 - 最重要,如下所示:

①. 浏览器宽度 w < 768,背景色 红色

②. 浏览器宽度 768<= w <=991 背景色 绿色

③. 浏览器宽度 w > 991 背景色 粉色

 

4. CSS3 Media Query 可以根据不同的媒体类型以及特性执行不同的 CSS

@media MEDIA-TYPE and | not | only (MEDIA-FEATURE)

(1). Media :媒体,指浏览网页设备的类型

如:screen(PC/Pad/Phone)、tv、tty

@media 的用法的用法如下:

①. 有选择性的执行某个外部 CSS 文件

不足:即使不满足当前设备条件的 CSS 文件也会被请求,但不会生效

②. 有选择性执行 CSS 片段中的内容

在样式表中,加针对屏幕的判定条件

@media screen and (max-width:767px){

         选择器{属性:值;}

 }

(2). MEDIA-TYPE:媒体类型

①. all:默认值,所有设备

②. screen:电脑屏幕,智能手机,平板电脑

③. tv:电视设备

(3). MEDIA-FEATUER:媒体特性

①. width :指定浏览器窗口宽度大小

②. min-width :指定浏览器窗口宽度最小值

③. max-width :指定浏览器窗口宽度最大值

A. 在屏幕下,宽度在 767 以内,执行操作

@media screen and (max-width:767px){}

B. 在屏幕下,宽度在 768~991 之间,执行操作

@media screen and (min-width:768px) and (max-width:991px){}

C. 在横屏模式下执行的操作

@media all and(orientation :landspace){}

D. 在竖屏模式下执行的操作

@media all and(orientation :portrait){}

(4). 常见屏幕尺寸:

①. 超小屏幕(Extra Small : xs), w <= 767,例如:手机屏幕

②. 小型屏幕(Small : sm),768 <= w <= 991,例如:pad

③. 中型屏幕(Medium : md),992 <= w <= 1199,例如:电脑屏幕

④. 大型屏幕(Large : lg),w >= 1200,例如:分辨率较大的电脑屏幕

 

5. Twitter Bootstrap

官网:http://getbootstrap.com  

中文官网:http://www.bootcss.com

bootstrap.css - 提供了上千个 class,依赖于 JS 库 - jQuery,Bootstrap 分为 5 部分

(1). 起步

(2). 全局样式

(3). 组件

(4). JS 插件

(5). 定制

 

6. Bootstrap 起步声明

(1).

指定当前文档的基础语言 zh-cn、zh-tw、jp、en,作用:

①. 为浏览器的自动翻译功能指定语言基础

②. 为读屏软件指定基础发音

(2). 必须

(3).

①. x-ua-compatible:Cross UserAgent Compatible,跨(IE)浏览器兼容性

②. content:指定用 哪个 IE 的内核进行页面渲染

IE=6 :指定用 IE6 内核渲染页面

IE=7 :指定用 IE7 内核渲染页面

IE=8 :指定用 IE8 内核渲染页面

IE=9 :指定用 IE9内核渲染页面

IE=edge :采用 IE 最新版内核渲染页面

(4). 两个 JS

①. html5shiv.min.js,第三方的 JS,自调函数,用于让老 IE(IE8 及以下)支持 HTML5 新标记 header、footer、aside

②. respond.min.js,第三方的 JS,自调函数,用于让老 IE(IE8 及以下)支持 CSS3 媒体查询技术 - 响应式必备

 通过头部引用 Hack 判断是否为 IE8 以及以下的浏览器

(5). 两个 JS

①. jQuery.js 引入到页面中(先)

②. bootstrap.js 引入到页面中(后)

建议:尽量将以上两个文件放在页面最底端引入

 

7.Bootstrap 全局 CSS 样式,bootstrap.css 内容分为两部分

(1). CSS Reset(很多依赖于normalize.css,可以屏蔽浏览器兼容性)

(2). 上千个 class

.btn .btn-default .btn-danger

 

8. Bootstrap 默认将屏幕分成四大类

(1). 大型 PC 屏幕(lg) : w >= 1200px

(2). 中型 PC 屏幕(md) : 992px <= w <= 1199px

(3). 小型 PAD 屏幕(sm): 768px <= w <= 991px

(4). 超小型 PHONE 屏幕(xs): w <= 767px

 

9. Bootstrap 提供的两种容器

(1). 定宽容器,在不同大小的设备上提供不同的 width 固定值

①. class: .container

②. lg : width:1170px

③. md : width:970px

④. sm : width:750px

⑤. xs : width:100%

(2). 变宽容器,在任何设备中,宽度都是 100%

class: .container-fluid

width: 100%

 

10. Bootstrap 全局 CSS 样式 - 按钮.btn

(1). .btn

默认按钮

(2). .btn-default

白底深色字

(3). .btn-danger/success/warning/info/primary

按钮危险/成功/警告/信息/首选

(4). .btn-lg/sm/xs

按钮大 中 小

(5). .btn-block

块级按钮

 

11. Bootstrap 全局 css 样式 - 列表.list

(1). .list-unstyled

不带标识的列表

(2). .list-inline

行内列表

(3). .dl-horizontal

定义列表

 

12. Bootstrap 全局 css 样式- 图片.img

(1). .img-rounded

倒圆角

(2). .img-circle

圆形

(3). .img-thumbnail

缩略图

(4). .img-responsive

响应式(改为块级,独立成行了)

 

13. Bootstrap 全局 css 样式-表格.table

(1). .table

普通表格

(2). .table-bordered

带边框表格

(3). .table-striped

隔行变色表格

(4). .table-hover

待悬停效果的表格

(5). .table-responsive

响应式表格(为表格父元素添加)

 

14. Bootstrap 全局 css 样式 - 文本 & 排版.text

(1). 文本颜色相关

①. .text-danger/success/warning/info/primary

文本 危险/成功/警告/信息/首选

②. .bg-danger/success/warning/info/primary

背景 危险/成功/警告/信息/首选

(2). 文本大小写

①. .text-uppercase/lowercase/capitalize

全部大写/全部小写/单词首字母大写

(3). 文本对齐方式

①. .text-left/center/right/justify

(4). 引用样式

①.

 

15. Bootstrap 全局 css 样式 - 栅格布局,在页面中可以实现布局的技术:

(1). table 布局

好处:简单,容易控制

不足:效率低

(2). div + css

好处:效率高

不足:灵活,不易控制

(3). 栅格布局

好处:效率高,容易控制,实现响应式

不足:没有

栅格布局实际上就是由 div 组成的 table 样式的响应式结构

使用方法:

①. 栅格布局系统的最外层,必须是 bootstrap 提供的容器

.container 或 .container-fluid

②. 允许在容器中放置若干行 div.row

每行中最多等分为 12 列

③. 行中放置 div.col 即列,每列都需要指定宽度 1/12、2/12

Bootstrap实用手册_第1张图片

④. 列 根据适用屏幕分成四种类型

A. .col-xs-*

a. .col-xs-1 : 在超小屏幕中,占一列的宽(8.33%)

b. .col-xs-2 : 在超小屏幕中,占两列的宽(16.66%)

c. .col-xs-12 : 在超小屏幕中,占 12 列的宽(100%)

B. .col-sm-*:在小型屏幕中 所占列宽数

C. .col-md-*:在中型屏幕中 所占列宽数

D. .col-lg-*: 在大型屏幕中 所占列宽数

⑤. 列偏移数量,每个列都可以指定向右偏移几列位置(不能用float),偏移的列会影响后续的列,主要作用是列左右留白,列右对齐,列居中

A. .col-xs-offset-n :在 xs 下,当前列向右偏移 n 列的距离

B. .col-sm-offset-n :在 sm 下,当前列向右偏移 n 列的距离

C. .col-md-offset-n :在 md 下,当前列向右偏移 n 列的距离

D. .col-lg-offset-n :在 lg 下,当前列向右偏移 n 列的距离

⑥. 列排序数量,控制某列向右或向左移动,并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置

A、col-lg-push-n: 在 lg下,当前列向右移动n 列的距离

B、col-lg-pull-n: 在 lg下,当前列向左移动n 列的距离

⑦. 栅格布局系统可以嵌套

Bootstrap实用手册_第2张图片

⑧. 适用于不同屏幕的列的 class(xs/sm/md/lg),可以兼容更大的屏幕

大屏幕 class 在小屏幕中,永远是垂直显示

A. .col-xs-* : 适用于 xs/sm/md/lg

B. .col-sm-* : 适用于 sm/md/lg

D. .col-md-* : 适用于 md/lg

E. .col-lg-* : 适用于 lg

Bootstrap实用手册_第3张图片

⑨. 可以在一个 div 中指定在不同屏幕下的宽度占比,相同的占比可简写为一个

语法:

释义:在 xs 中 占 9 列宽、在 sm 中 占 6 列宽、在 md 中 占 3 列宽

⑩. 指定列在特定屏幕下不显示

A. .hidden-lg : 在 lg 下隐藏

B. .hidden-md : 在 md 下隐藏

C. .hidden-sm : 在 sm 下隐藏

D. .hidden-xs : 在 xs 下隐藏

 

16. Bootstrap 全局 CSS 样式 - 表单.form-group,遵循 HTML5 的规范共三种

(1). 默认表单(垂直排列)

①. .form-group 

定义表单控件组

②. .form-control

定义表单控件

③. .control-label

定义控件对应的 label

④. .help-block 

定义提示文本

Bootstrap实用手册_第4张图片

(2). 行内表单,为

添加 class="form-inline",注意label要写成class=“sr-only”,help-block不要了,写placeholder

(3). 水平表单, 水平表单 = 表单 + 栅格布局系统

①. 栅格

A. 最外层:.container / .container-fluid

B. 行:div.row

C. 列:div.col-*-*

②. 水平表单栅格系统

A. 最外层:form.form-horizontal (正常情况 .container)

B. 行:div.form-group /(正常情况div.row)

C. 列:div.col-*-*

Bootstrap实用手册_第5张图片

(4). checkbox及radio表单的特殊写法(H5规范)

Bootstrap实用手册_第6张图片

 

17. Bootstrap 组件 -下拉菜单.dropdown

(1). 外层必须是 .dropdown/.dropup 或 position:relative;

(2). 内层:为

(4). 导航条中的文本,普通文本需要增加 class .navbar-text 属性来保证格式

语法:

(5). 组件的对齐方式,允许通过 .navbar-left 实现左浮, .navbar-right 实现右浮动

(6). 导航栏的固定,不会随着滚动条发生滚动,一直在可视化区域中

①. 固定在页面顶端:.navbar-fixed-top

②. 固定在页面底端:.navbar-fixed-bottom

注意:最好为 body 设置内边距至少 50 px
 

36. JS 插件.Bootstrap 基于 jQuery ,在 jQuery 基础上提供了十几个插件函数,每个都是一个独立的 JS 文件,可以一次性引入全部的 JS 操作 - bootstrap.js,每个插件函数都有两种调用方式:

(1). .data-* 方式调用

(2). JS 编程方式,手动编写 JS 代码完成行为的调用

 

37. JS 插件-警告框 alert.js

(1). 父元素

class ="alert  alert-danger alert-dismissible"

(2). 关闭按钮,位于父元素的第一个子元素.

 

(3). 示例

Bootstrap实用手册_第19张图片

 

38. JS 插件-按钮 botton.js

(1). 设置按钮的操作文本,为 按钮元素 添加 data-loading-text="显示的文本"

Bootstrap实用手册_第20张图片

(2). 设置单选按钮 /复选框,将若干单选按钮 / 复选框放到 btn-group 中,为 btn-group增加属性 data-toggle="buttons"

Bootstrap实用手册_第21张图片

 

39. JS 插件-工具提示 tooltip.js

(1). data-toggle="tooltip" 定义提示工具条

(2). data-palcement="top/right/bottom/left" 提示的方向

(3). title="提示的文本"

JS :$("[data-toggle='tooltip']").tooltip();

 

40. JS 插件-弹出框 popover.js,为伪元素增加下列 class

(1). data-toggle="popover" //指定为弹出框方式

(2). data-placement="top/right/bottom/left"//方向

(3). data-content="弹出框内容区域的文本"

(4). title="弹出框的标题"

JS : ("[data-toggle='popover']").popover();

 

41. JS 插件-标签页 tab.js

(1). 为导航组件里面 a 增加

①. data-toggle = "tab"

②. href="#对应元素内容的 ID"

(2). 创建内容组

①. class 为 tab-content

②. 在 内容组中 增加对应显示的内容模块

A. 增加 id 属性

B. 增加 class="tab-pane active"

Bootstrap实用手册_第22张图片

 

42. JS 插件-模态对话框 modal.js ,父窗口中弹出一个子窗口,只要子窗口不关闭,父窗口就无法操作,模态对话框由两部分组成:

(1). 触发元素,通常 a / button 组成

①.

②.

(2). 模态框示例

Bootstrap实用手册_第23张图片

 

43. JS 插件-折叠效果 collapse.js

(1). 触发元素

①.

②.

(2). 被折叠元素

(3). 特殊效果:手风琴(Accordion),此效果分为面板组(panel-group)和折叠插件两部分

Bootstrap实用手册_第24张图片

(4). 响应式导航条

当屏幕尺寸大于 768px 时候,可以正常显示出所有的内容,当屏幕尺寸小于 768px时候,一部分内容就会隐藏,通过点击弹出,响应式导航条由两部分组成.

①. class .navbar-header

用于显示 navbar-brand 和折叠点击按钮

②. class.navbar-brand 

定义 brand 内容

③. class.navbar-togglte

定义折叠按钮

④. class .navbar-collapse

折叠按钮,当屏幕大于 768px 正常显示,屏幕尺寸小于 768px隐藏,通过按钮点击完成展开显示

注意:响应式导航条的结构——只有从手机屏幕才能看出来     

Bootstrap实用手册_第25张图片

(5). 导航条的种类

①. 按颜色

A. 浅色底深色字

.navbar.navbar-default

B. 深色底浅色字

.navbar.navbar-inverse

②. 按定位

A. 相对定位(占空间)

.navbar

B. 固定定位(不占空间)

.navbar.navbar-fixed-*

③. 按位置

A. 固定在顶部

.navbar.navbar-fixed-top

B. 固定在底部

.navbar.navbar-fixed-bottom

 

44. JS 插件-广告轮播 Carousel

 

45. Less 和 Bootstrap 定制

样式语言的分类有分两种

(1). 静态样式语言:CSS

可以被浏览器直接解析处理,但 CSS 并不是合格的语言,缺少了基本编程的要素,如:变量,运算符,函数...... 由于不是动态的,所以导致了 CSS 的可维护性差

(2). 动态样式语言:

如:Less , Sass, Stylus 

不可以被浏览器直接解析处理;必须经过编译(Compile)得到 CSS 文件后,才能使用,具备语言的基本要素:变量...... 极大的提高的 CSS 代码的可维护性

 

46. Less 语言

Less 是一本 CSS 预处理语言,它扩充了 CSS,在纯静态的 CSS 基础上增加了一部内容 如:变量,混合(Mixin) ... 对静态 CSS 完全支持 100%兼容

官网:http://lesscss.org

中文网:http://less.bootcss.com

在 Web 项目中使用 Less 的两种方式:

(1). 在客户端浏览器中编译 Less - 不推荐使用

①. 编写 xx.less 文件

②. 编写 xx.html,引入 xx.less;再引入 less.js

③. 浏览器访问 xx.html 会自行下载 xx.less,less.js 文件,并且在客户端进行编译转换成 xx.css

(2). 在服务器端编译 less - 推荐使用

①. 编写 xx.less

②. 在服务器端搭建 Less 编译器,把 xx.less 转换为 xx.css

③. 再编写 xx.html 直接引入 xx.css 文件即可

 

47. 搭建 Less 服务器端编译环境 - 重点&乱点

Less 编译器实际上是由 Javascript 编写的

(1). 安装独立的 JS 解释器 - node.exe

查看是否安装成功在命令行中执行 node -v 显示其安装版本如: 4.4.7

(2). 安装 Less 编译器程序 (npm安装包解压即可)

确保C:\npm\node_modules\less\bin\lessc文件存在即可

(3). 将less文件转为css文件(必须要是UTF-8格式,WS里面要设置)

①. 第一种方法:在控制台中 测试 less 转换为 css

输入 :node  C:\npm\node_modules\less\bin\lessc  E:\xx.less =>E:\xx.css

以上命令行的路径可更改,必须与文件路径一致即可,执行成功后,E盘会多出一个xx.css文件

②. 第二种方法:在 WebStrorm 中 配置 FileWatchers(文件监视器),由 WS 自动检测 less 文件的编写与更改,自动进行编译得到 css 文件

配置 FileWatchers

WS =>File => Settings => Toos => FileWatchers => 添加 选择 Less =>在”program”里面 指定lessc.cmd 文件地址即可

在编译好的文件里敲两个空格,保存,编译好的css文件就会在less文件目录下

 

48. Less 语法

(1). Less 完全支持 CSS 语法

(2). Less 支持多行注释和单行注释,只有多行注释能被编译到 css 中

多行: /* 注释内容 */

单行: // 注释内容

(3). Less 支持变量(Variable),变量就是在 less 中可以变化的数据

①. 声明变量(变量可以是任意合法的值)

语法: @变量名:值;

A. @jd_color:#e4393c;         

B. @border_width:5px;         

C. @base_font:"微软雅黑";   

D. @border:1px solid #ddd;

②. 使用变量(声明变量必须使用后less文件才能自动转换成css文件)

语法: 属性:@变量名;

#top{

     color:@jd_color;

     border:@std_width @nomal_border  @jd_color;

}

(4). Less 变量可以使用运算符(+、-、*、/、%)

 

49. Less 中支持在一组样式中混入另一种样式(Mixin)

(1). 样式嵌套

选择器 1{ ... }

选择器 2{ ... ;选择器 1;...;}

最终:选择器 2 中会包含该 选择器 1 定义好的样式,可以实现样式无限的嵌套

(2). 带参数的混合

声明选择器的时候,允许使用参数来表示暂时不确定的数据,最终在调用时,要将具体的数值传递进来

选择器 1(@参数名 1,@参数名 2){

      width:@参数名 1;

      height:@参数名 2;

 }

(3). 使用带参的混合写法

选择器 2{

     background:#fff;

     选择器 1(值 1,值 2);

}

 

50. 嵌套规则

#top{}

#top p{}

#top p span{}

在 less 中,允许在一个选择器内再声明另一个选择器,以便完成父子结构或后代结构

选择器 1{...

     选择器 2{...}

}

最终编译成 CSS 的结果为

选择器 1{...}

选择器 1 选择器 2{...}

 

51. Less 中提供的功能函数

(1). lighten(@color,20%)

返回一个变亮的颜色值(颜色减淡)

(2). darken(@color,30%)

返回一个变暗的颜色(颜色加深)

(3). image-width("xx.jpg")

返回指定图片的宽度

(4). image-height("xx.jpg")

返回指定图片的高度

(5). ceil(@num)

对数字向上取整

ceil(55.787865235) =>结果为 56

(6). floor(@num)

对数字向下取整

floor(55.787865235) => 结果为 55

(7). percentage(@num)

把小数转换为%数字

(8). &  相当于this的作用 a:hover=a{&:hover}

 

52. @import 功能

在 Less 中的@import ,在服务器端将多个 less 文件的内容整合到一个 less 文件中

@import "xxx.less";

在CSS中使用@import功能将多个CSS文件导入一个文件后再引入该文件,会增加服务器的请求次数,而在Less中使用@import它会将引入的多个css或是less文件编译后成为一个css文件,不会增加服务器的请求次数

 

53. Bootstrap的订制流程

(1). 删除工程目录下的bootstrap.css或是bootstrap.min.css文件,删除html文件里面的引入文件语句

(2). 在工程目录下新建“less”文件夹,将bootstrap源代码拷贝到文件夹下,webstrom会自动编译所有的less文件

(3). 将自定义的css文件后辍名改为less,在此文件开头输入:@import "../less/bootstrap.less"; 系统会生成新的css文件

(4). 自定义css文件时,所有的变量都存在variables.less文件夹里面,修改里面声明的变量值,bootstrap.less会随着更改,而自定义的less文件引入了bootstrap.less文件也会随着更改,所以在自定义的less文件里面相关属性值可以引用variables.less里面的变量名

 

54. 通过修改Bootstrap的less源文件实现定制

(1). Bootstrap瘦身,删除不必要的样式

用“//”注释掉bootstrap.less中不需要的@import即可

(2). 修改Bootstrap默认的样式值,实现粗粒度定制

修改variable.less中的变量值即要

(3). 修改Bootstrap组件的细节样式,实现细粒度定制

修改特定的组件对应的less文件,如dropdown.less

 

55. 项目不允使用Bottstrap时,提取以下css样式文件

(1). @import "variables.less";

变量文件

(2). @import "mixins.less";

混合文件

(3). @import "normalize.less";

样式重置文件

(4). @import "scaffolding.less";

脚手架,基础设置文件

(5). @import "grid.less";

栅格布局文件

 

你可能感兴趣的:(Bootstrap)