专栏首页李才哥Bootstrap 响应式框架 第二集
原创

Bootstrap 响应式框架 第二集

复习:

1、视口

<meta name="viewport" content="width=device=width,initial-scale=1,user-scalable=0">

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)兼容性设置

<meta http-equiv="x-ua-compatible" content="IE=edge">

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

<link rel="stylesheet" href="css/bootstrap.css">

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

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

1、html5shiv.min.js

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

<script src="js/html5shiv.min.js"></script>

2、respond.min.js

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

<script src="js/respond.min.js"></script>

<!--[if lte IE 8]>

<script src="js/html5shiv.min.js"></script>

<script src="js/respond.min.js"></script>

<![endif]-->

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

jQuery.js , bootstrap.js

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

2、注意引入顺序

1、先引入jQuery.js 文件

2、再引入bootstrap.js文件

<script src="jquery-1.11.3.js"></script>

<script src="bootstrap.js"></script>

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 type="button" class="close">

&times;

</button>

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

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

1、div + float

好处:效率高

不足:灵活,不易控制

2、table 布局

好处:简单,容易控制

不足:效率低

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

3、栅格布局系统

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

不足:none

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

2、使用方法

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

.container 或 .container-fluid

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

类:.row , 表示一行

<div class="container">

<div class="row"></div>

<div class="row"></div>

</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列的位置

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于小程序video组件视频url获取方法

    我们从腾讯视频网站上找到一个视频网页的连接,具体步骤就是打开视频点击分享,那个分享的链接就是我们要的

    李才哥
  • 我碰到的那些面试题html+css

    http://www.sohu.com/a/330231789_120174705

    李才哥
  • css应知应会 第二集

    h-shadow v-shadow blur spread color inset

    李才哥
  • KafkaController分析6-Replica状态机

    扫帚的影子
  • Apache深度优化

    一、开启apache的Gzip(deflate)功能 gzip可以极大的加速网站,压缩比率通常在40%~80%之间,在之前的版本中,Gizp是第三方压缩工具,但...

    小手冰凉
  • 在MacOs上用Docker开发

    这是在开发者和运营团队之间的对话中经常听到的借口。即使使用复杂的工具,云中几乎没有限制的计算能力以及先进的持续集成工作流程,本地开发应用程序与在生产环境中运行应...

    人工智能资讯小编
  • 【云端起舞】快速查找Oracle公有云服务上VM服务器的IP地址

    编辑手记:在使用SSH连接数据库的时候,大多数的公有云服务通过IP地址与对应的VM服务器关联,这篇文章将会引导你查找Oracle公有云服务上连接到VM实例的IP...

    数据和云
  • P2023 [AHOI2009]维护序列

    老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成。 有长为N的数列,不妨设为a1,a2,…,aN 。有如下三种操作形式: (1)把数列中的一段数全部...

    attack
  • MySQL其他类型常用函数

    INET_ATON(IP)和INET_NTOA(num)函数主要的用途是将字符串的IP地址转换为数字表示的网络字节序,这样可以方便地进行IP或者网段的比较。 ...

    秋白
  • php代码抄写笔记

    php变量类型松散,定义时变量一个类型,在之后可以赋予另一种类型的参数。 三种作用域:local、global、static global关键字用在函数内变...

    木尤

扫码关注云+社区

领取腾讯云代金券