Bootstrap框架 ——Bootstrap 入门.

Slides:



Advertisements
Similar presentations
教师成绩录入步骤 1. 登录教务系统 2. 进入教师成绩管理界面 3. 选择相应的教学班,点击 “ 课程成绩录 入 ” 进入成绩录入界面 4. 点击 “ 设置 ” 按钮设置 “ 成绩分项 ” 5. 录入成绩, “ 保存成绩 ” 按钮可以保存成 绩但不提交(提交后不能再修改成绩) 6. “ 提交成绩 ”
Advertisements

7.2 图示化记忆 记忆的概述 图示化记忆 联想记忆法 奇特联想记忆法 用手记忆.
新約研讀 彼得前書複習 讀經組
我的家乡 南通 ….
项目2 字符格式和段落编排 2017年3月7日6时54分.
给点阳光我就灿烂 ——工作简历模板.
看图找关系.
基于解释性语言的手机跨平台架构 Sloan Yi. Qt MTK.
五、学习方法及应考对策 (一)学习方法 1.保证复习时间,吃透教材:上课之前应该对课程相关内容进行预习,把不理解的问题记录下来,带着问题听课。考试之前务必把课本看3遍以上,第一遍一定要精读,最好能做笔记,边读边记,不要快,要记牢。第二、三遍可以查缺补漏型的看,通过做题目看书,加深课本印象。 2.加强概念、理论性内容的重复记忆:概念、理论性内容一般比较抽象,所以在理解的基础上一定要重复记忆,在接受辅导之后,再加以重点记忆,以便及时巩固所学内容,切忌走马观花似的复习,既浪费时间,效果也不好。
不動產市場 分析與預測 第四章 不動產市場分析與研究.
Bootstrap 3 報告人:Sean Huang 日期:2014/12/11.
图表的创建.
甘肃省城乡居民健康档案系统使用简介及意义
在PHP和MYSQL中实现完美的中文显示
武汉纺织大学传媒学院 cm.wtu.edu.cn
扁平化精美IT工作实施规划 涛说PPT.
面向对象建模技术 软件工程系 林 琳.
什么是Android 本讲大纲: 1、平台特性 2、平台架构 3、Android市场 支持网站:
大学计算机基础 典型案例之一 构建FPT服务器.
SVN服务器的搭建(Windows) 柳峰
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
CSS 钟晖云 QQ:
貨幣需求與貨幣市場的均衡.
中国科学技术大学计算机系 陈香兰(0551- ) Spring 2009
Simple , Powerful and fee
/ 第7讲:移动开发 冯顺磊 /
三:基于Eclipse的集成开发环境搭建与使用
UI 软件 设计 页面布局(三).
A New Kind of JavaScript Library
程序设计工具实习 Software Program Tool
互联网+ 电商创业策划方案 THE PROFESSIONAL BUSINESS TEMPLATE 四比三演示,普屏设计,贴合实际
武汉纺织大学传媒学院 cm.wtu.edu.cn
计算机网络与网页制作 Chapter 11:用CSS作页面布局
Web安全基础教程
计算机及办公软件应用 ©2013 苏州工业园区职业技术学院
本节内容 随机读取 视频提供:昆山爱达人信息技术有限公司.
第四章 团队音乐会序幕: 团队协作平台的快速创建
2019/4/20 关注NE官方微信,获取更多服务.
2019/4/16 关注NE官方微信,获取更多服务.
VisComposer 2019/4/17.
商業行為成立的要件 動動腦 Q 請試著判斷下列何者為商業行為? 請試著判斷下列何者為商業行為?.
藝術大師-達利.
网页设计与制作 Jiangxi Engineering Vocational College 信息工程系 徐卫红.
2019/4/ /4/25 学习科研好助手 NoteExpress文献管理与检索系统 北京爱琴海乐之技术有限公司.
2019/4/26 关注NE官方微信,获取更多服务.
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
<编程达人入门课程> 本节内容 内存的使用 视频提供:昆山爱达人信息技术有限公司 官网地址: 联系QQ: QQ交流群: ,
_08文件的基本操作 本节课讲师——void* 视频提供:昆山爱达人信息技术有限公司 官网地址:
武汉纺织大学传媒学院 cm.wtu.edu.cn
JSP实用教程 清华大学出版社 第2章 JSP运行环境和开发环境 教学目标 教学重点 教学过程 2019年5月7日.
《手把手教你学STM32-STemWin》 主讲人 :正点原子团队 硬件平台:正点原子STM32开发板 版权所有:广州市星翼电子科技有限公司
本节内容 文件系统 视频提供:昆山爱达人信息技术有限公司 官网地址: 联系QQ: QQ交流群 : 联系电话:
Touch Github = Touch the World
GIS基本功能 数据存储 与管理 数据采集 数据处理 与编辑 空间查询 空间查询 GIS能做什么? 与分析 叠加分析 缓冲区分析 网络分析
Python 环境搭建 基于Anaconda和VSCode.
本节内容 指针类型的使用 视频提供:昆山爱达人信息技术有限公司.
CSS網頁佈局與Bootstrap 多媒體設計.
_08文件操作 本节课讲师——void* 视频提供:昆山爱达人信息技术有限公司 官网地址:
基于列存储的RDF数据管理 朱敏
关于使用问题的解决方法 中山医学院大数据信息系统.
106年免試入學第一次模擬 選填重要日程表說明 1.106年1月10日中午12時~106年1月16日中午12時完成第一次模擬
第四章 UNIX文件系统.
使用Fragment 本讲大纲: 1、创建Fragment 2、在Activity中添加Fragment
<编程达人入门课程> 本节内容 有符号数与无符号数 视频提供:昆山爱达人信息技术有限公司 官网地址: 联系QQ:
Bootstrap 13th Nov.
《手把手教你学STM32-STemWin》 主讲人 :正点原子团队 硬件平台:正点原子STM32开发板 版权所有:广州市星翼电子科技有限公司
JavaScript 教师:魏小迪
《手把手教你学STM32-STemWin》 主讲人 :正点原子团队 硬件平台:正点原子STM32开发板 版权所有:广州市星翼电子科技有限公司
学习目标 1、什么是列类型 2、列类型之数值类型.
百万行、千万行数据查询教程 老黄牛.
Presentation transcript:

Bootstrap框架 ——Bootstrap 入门

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

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

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

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

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

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

新手入门 开发环境(webstorm) 引入Bootstrap框架文件 压缩处理文件bootstrap.min.css,bootstrap.min.js 使用 Bootstrap 中文网提供的免费 CDN 加速服务 Bootstrap入门 之三 Bootstrap下载文件使用 打开http://v3.bootcss.com/,分别说明用于生产环境的 Bootstrap、Bootstrap 源码、Sass这三个文件的不同 讲完下载bootstrap文件后就分析下载下来的文件代表什么意思

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

注意: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基本结构】

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

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

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

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

栅格系统的使用--列使用 开 <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:91.6666666666%;}以此类推

注:使用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 列偏移】案例

列嵌套 <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 列嵌套】案例

列排序 <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 列排序】案例

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

跨设备组合 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 跨设备组合定义】案例

观察: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 清除浮动】案例

清除浮动问题 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结构

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

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

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

Thanks