Bootstrap框架 ——Bootstrap 入门.

Presentation on theme: "Bootstrap框架 ——Bootstrap 入门."— Presentation transcript:

1 Bootstrap框架 ——Bootstrap 入门

2 课前考试 教员备课时根据班级情况在此添加考试内容 时间：10分钟内 要求：保证所有学员都能参与 形式：选择、问答、小机试均可
内容：涉及复习和预习的内容

3 了解bootstrap概念 掌握bootstrap的特性 掌握bootstrap下载文件的使用 掌握bootstrap的结构
技能目标 了解bootstrap概念 掌握bootstrap的特性 掌握bootstrap下载文件的使用 掌握bootstrap的结构 目录结构 本节课重点讲解bootstrap的结构中的12栅格系统 下载文件的地方打开bootstrap官网，演示下载那里下载

4 Bootstrap简介 Bootstrap是目前最流行的前端开发框架之一，提供了很多常见的各种CSS和JavaScript集合，以便开发人员随时上手。（目前版本 v3.3.5） Bootstrap入门 之一 Bootstrap概念 简要的介绍下bootstrap2版本和3版本的区别

5 Bootstrap代码开源 代码有着良好的规范

6 有一套完整的基础CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件 一个非常灵活的栅格系统，并崇尚移动先行的思想
Bootstrap特性 有一套完整的基础CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件 一个非常灵活的栅格系统，并崇尚移动先行的思想 Bootstrap入门 之二 Bootstrap特性

7 有一套完整的基础CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件 支持 Internet Explorer 8-11
浏览器对Bootstrap的支持 有一套完整的基础CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件 支持 Internet Explorer 8-11 Bootstrap入门 之二 Bootstrap特性

8 新手入门 开发环境（webstorm） 引入Bootstrap框架文件
压缩处理文件bootstrap.min.css，bootstrap.min.js 使用 Bootstrap 中文网提供的免费 CDN 加速服务 Bootstrap入门 之三 Bootstrap下载文件使用 打开 Bootstrap、Bootstrap 源码、Sass这三个文件的不同 讲完下载bootstrap文件后就分析下载下来的文件代表什么意思

9 基本模板 Bootstrap入门 之三 Bootstrap下载文件使用 在编辑工具里引入bootstrap框架

10 注意：v3.x和v2.x版本相比，有一个很大区别： Bootstrap从v3版本开始全面支持移动平台，并贯彻移动先行的宗旨。
基本模板 注意：v3.x和v2.x版本相比，有一个很大区别： Bootstrap从v3版本开始全面支持移动平台，并贯彻移动先行的宗旨。 <meta name="viewport" content="width=device-width, initial-scale=1"> Bootstrap入门 之三 Bootstrap下载文件使用 演示案例【01bootstrap基本结构】

11 Bootstrap结构 Bootstrap入门 之四 Bootstrap结构
其中12栅格系统是核心功能，也是响应式设计核心理念的实现形式 布局组件可用在页面的任意元素上 jquery是js框架的基础 响应式是个设计理念，所有bootstrap内容都是以响应式为设计理念来实现的

12 原理： 通过定义容器的大小，平分为12份，在调整内外边距，最后在结合媒体查询，就制作出了功能强大的栅格系统。
Bootstrap入门 之四 Bootstrap结构

13 栅格系统工作原理 一行数据（row）必须包含在 .container中，以便为其赋予合适的对齐方式和内边距 使用行在水平方向创建一组列
具体内容放在列内，列可以作为行的直接子元素 内置的一大堆样式，可以使用col-xs-4（占4列宽度）的样式来快速创建栅格 Bootstrap入门 之四 Bootstrap结构

14 栅格系统工作原理 通过设置padding从而创建列之间的间隙，让后用第一列和最后一列设置负值margin来抵消掉padding的影响
栅格系统中指定1到12的值来表示其跨越的范围 伴随响应式设计思想，区分4种类型的浏览器（超小屏、小屏、中屏、大屏）其像素的临界点分别是自动、768px、992px、1200px Bootstrap入门 之四 Bootstrap结构 与上面的两页一起演示【02 12栅格系统的使用】案例

15 栅格系统的使用--列使用 开 <div class="container"> <div class="row">
<div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> 开 Bootstrap入门 之四 Bootstrap结构 可以介绍下原理：col-md-12{width：100%；}col-md-11{width： %；}以此类推

16 注：使用col-md-offset-*形式的样式就可以将列偏移到右侧
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> 注：使用col-md-offset-*形式的样式就可以将列偏移到右侧 Bootstrap入门 之四 Bootstrap结构 演示【03 列偏移】案例

17 列嵌套 <div class="row">
<div class="col-md-9">Level 1: .col-md-9 <div class="col-md-6"> Level 2: .col-md-6</div> <div class="col-md-6">Level 2: .col-md-6</div> </div> <div class="col-md-3"></div> Bootstrap入门 之四 Bootstrap结构 演示【04 列嵌套】案例

18 列排序 <div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div> Bootstrap Bootstrap入门 演示【05 列排序】案例

19 响应式栅格 Bootstrap入门 之四 Bootstrap结构 可以说点关于原理的东西，使用的是媒体查询media来实现

20 跨设备组合 Bootstrap入门 之四 Bootstrap结构 <div class="row">
<div class="col-sm-12 col-md-8">.col-sm-12 .col-md-8</div> <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div> </div> <div class="col-sm-6">.col-sm-6</div> Bootstrap入门 之四 Bootstrap结构 演示【06 跨设备组合定义】案例

21 观察：div3为什么被卡住了 Bootstrap入门 之四 Bootstrap结构 <div class="row">
<div class="col-xs-6 col-sm-3">div1：.col-xs-6 .col-sm-3多加点内容点内容</div> <div class="col-xs-6 col-sm-3">div2：.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">div3：.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">div4：.col-xs-6 .col-sm-3</div> </div> Bootstrap入门 之四 Bootstrap结构 原因是没有清楚浮动，演示【07 清除浮动】案例

22 清除浮动问题 Bootstrap入门 之四 Bootstrap结构 <div class="row">
<div class="col-xs-6 col-sm-3">div1：.col-xs-6 .col-sm-3多加点内容点内容</div> <div class="col-xs-6 col-sm-3">div2：.col-xs-6 .col-sm-3</div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3">div3：.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">div4：.col-xs-6 .col-sm-3</div> </div> Bootstrap入门 之四 Bootstrap结构

23 其他屏幕下的操作 超小屏 、小屏、中屏 、大屏 列偏移（col-xs-offset-*...）
（col-xs、col-sm、col-md、col-lg） 列偏移（col-xs-offset-*...） 列排序（col-xs-pull-* 、col-xs-push-*...） 列嵌套 Bootstrap入门 之四 Bootstrap结构 上面的案例一直是使用中等屏幕来演示的，其他的屏幕只是需要改变前面的缩略符就可以了

24 bootstrap的基本模板里包括哪些内容？ 栅格系统可以把一行分为几个列？ 怎么用12栅格适配不同尺寸的设备？
总结 bootstrap的基本模板里包括哪些内容？ 栅格系统可以把一行分为几个列？ 怎么用12栅格适配不同尺寸的设备？

25 作业 课后作业 整理笔记 把昨天的作业用bootstrap的栅格系统改写为响应式布局 预习作业 预习内容：CSS布局

26 Thanks