Bootstrap 响应式框架第二集

原创

李才哥

修改于 2020-08-17 10:20:03

2.5K0

修改于 2020-08-17 10:20:03

文章被收录于专栏：李才哥李才哥李才哥

复习：

1、视口

2、如何编写响应式网页

1、视口的声明

2、尺寸尽量使用相对尺寸

1、文字尺寸：em ，rem

2、容器尺寸：%,auto

3、图片尺寸：%,auto (max-width)

3、页面尽量采用流式布局

4、CSS3 Media Query

@media MEDIA-TYPE and (MEDIA-FEATURE)

w <= 767px : PHONE

768px <= w <= 991px : PAD

w >= 992px : PC

=======================================

1、Twritter Bootstrap

CSS 框架，由上千个 class 来组成

官网：http://getbootstrap.com

中文：http://www.bootcss.com

API ：Application Programming Interface

Bootstrap :

1、CSS重写

2、定义了一部分元素的样式

表格，表单，按钮，图片 ... ...

3、响应式的布局效果

栅格布局系统

重点：bootstrap.css 文件 - 提供了上千个 class

行为动作：依赖于 JS 库 - jQuery

Boostrap分为5部分：

1、起步 - 引入Bootstrap框架到网页中

2、全局CSS样式 - 用于改变页面元素样式的css

3、组件 - 使用复杂结构拼出的特殊效果

4、JS插件 - 定义页面元素的行为

5、定制 - 自定义Bootstrap的效果(改源码)

2、Bootstrap第一步 - 起步

1、<html lang="zh-cn">

指定当前文档的基础语言

作用：

1、为浏览器自动翻译功能指定语言基础

2、为读屏软件指定发音基础

2、视口 <meta name="viewport">

3、跨浏览器(IE)兼容性设置

1、x-ua-compatible

x : Cross

ua: User Agent

作用：指定用哪个IE的内核来进行页面的渲染

2、IE=edge

指定渲染页面的IE浏览器的内核

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

在高于IE6(包含)的浏览器中，统一都使用IE6内核渲染

在低于IE6的浏览器中，使用当前浏览器中最高版本的内核进行渲染

IE=7 :

IE=8

IE=9

IE=10

IE=11

IE=edge

4、引入 bootstrap.css

5、引入两个兼容性 JS 文件

作用：让老版本的IE(IE8及以下) 支持 H5的新标记以及 C3 媒体查询技术

1、html5shiv.min.js

第三方JS，自调函数，用于让老版本的IE支持HTML5新标记

2、respond.min.js

第三方JS，自调函数，用于让老版本的IE支持CSS3媒体查询技术

<!--[if lte IE 8]>

<![endif]-->

6、引入两个行为依赖的 JS文件

jQuery.js , bootstrap.js

1、尽量在页面的最底部(</body> 之上)的位置进行引入

2、注意引入顺序

1、先引入jQuery.js 文件

2、再引入bootstrap.js文件

7、引入测试 JS文件

作用：用于检查页面结构是否按照 Bootstrap的要求进行编写的

1、引入 bootlint.js 文件，位于 bootstrap.js之后

2、编写测试代码

bootlint.showLintReportForCurrentDocument([]);

3、Bootstrap第二部 - 全局CSS样式

Bootstrap.css 内容分为2部分：

1、CSS Reset

*{ box-sizing:border-box; }

2、上千个Class

.containe

.container-fluid

.btn

... ...

4、全局CSS中的内容

1、Bootstrap 默认将屏幕类型分成四大类

1、大型屏幕(lg [large]) : w >= 1200px

屏幕较宽的PC机显示器

2、中型屏幕(md [middle])

992px <= w <= 1199px

普通PC机显示器

3、小型屏幕(sm [small])

768px <= w <= 991px

各种PAD屏幕

4、超小型屏幕(xs [extra small])

w <= 767px

各种PHONE屏幕

2、Bootstrap提供的两个容器class

1、定宽容器

在不同宽度大小的设备上均提供了固定的宽度值

类：.containe

lg : width:1170px;

md : width:970px

sm : width:750px

xs : width:100%

2、变宽容器

在任何设备中，宽度都是100%

类：.container-fluid

3、全局样式 - 按钮

1、Bootstrap中的所有按钮都依赖于 .btn 类

2、页面中允许设置为按钮样式的元素有

1、a 标记

2、button 标记

3、input 标记(button,submit,reset)

3、按钮样式类

.btn

.btn-default : 默认按钮的效果(白底深字)

.btn-primary : 首选项(深蓝底，白字)

.btn-success : 成功(绿色底，白字)

.btn-warning : 警告(黄色底，白字)

.btn-danger : 危险(红色底，白字)

.btn-info : 信息(浅蓝底，白字)

4、不同尺寸的按钮 class

.btn-lg

.btn-sm

.btn-xs

5、块级按钮 class

.btn-block

4、全局样式 - 列表

1、list-unstyled

不带任何标识的列表

2、list-inline

内联列表(行内列表)

3、dl-horizontal

水平定义列表

5、全局样式 - 图片

1、.img-rounded

圆角图片

2、.img-circle ?

圆形图片

3、.img-thumbnail ?

缩略图

4、.img-responsive ?

响应式图片

(10分钟)

6、全局样式 - 表格

所有的Bootstrap的表格全部都依赖于 .table

1、table-bordered

带边框的表格

2、table-striped ?

隔行变色表格(tbody)

3、table-hover ?

带鼠标悬停效果的表格

4、table-responsive ?

响应式表格(为表格父元素增加table-responsive)

7、全局样式 - 辅助类

1、关闭按钮

×

</button>

8、全局样式 - 栅格布局系统(重点)

1、网页中能够实现布局的技术

1、div + float

好处：效率高

不足：灵活，不易控制

2、table 布局

好处：简单，容易控制

不足：效率低

效率高，兼容容易控制的结构 - 栅格布局系统

3、栅格布局系统

好处：效率高，容易控制，实现响应式

不足：none

本质：就是由div组成的table样式的响应式结构(使用float布局)

2、使用方法

1、栅格布局系统的最外层，必须是bootstrap提供的两种容器之一

.container 或 .container-fluid

2、允许在容器中放置若干 "行"

类：.row , 表示一行

</div>

3、在行(div.row)中，允许放置列,在每行中，最多会等分成12列。所以在创建列的时候要指定列的宽度(当前列要占据几列的宽)

4、列会根据适用的屏幕分成4中类型

类：

1、.col-xs-*

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

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

......

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

2、.col-md-*

.col-md-1 : 在中型屏幕中，占一列的宽(width:8.33%)

3、.col-sm-*

4、.col-lg-*

5、列向右偏移数量

每个列都可以指定向右偏移几列的位置

.col-xs-offset-n : 在 xs 屏幕下，当前列要向右偏移n列的位置

.col-sm-offset-n : 在 sm 屏幕下，当前列要向右偏移n列的位置

.col-md-offset-n : 在 md 屏幕下，当前列要向右偏移n列的位置

.col-lg-offset-n : 在 lg 屏幕下，当前列要向右偏移n列的位置

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

bootstrap

css

javascript

jquery

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度