Bootstrap入门与布局教程
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</div>
演示示例3：Bootstrap列偏移
14/44
列嵌套
使用列组合的方式如何布局？
示例
<div class="row"> <div class="col-md-9">Level 1: .col-md-9 <div class="row"> <div class="col-md-6"> Level 2: .col-md-6</div> <div class="col-md-6">Level 2: .col-md-6</div> </div> </div> <div class="col-md-3"></div>
实现原理
通过定义容器的大小，平分为12份 调整内外边距 结合媒体查询
10/44
栅格系统工作原理
一行数据（row）必须包含在 .container中浏可，览视以器区域便为
其赋予合容适器 c的ont对aine齐r 方式和内列与边列距间距 30px 使用行在水平方向列创colu建mn一组列
列右间 距
initial-scale=1.0/>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
<script src="js/jquery-1.12.4.js"></script>
</div>
演示示例2：Bootstrap列组合
13/44
列偏移
列 <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>
人员随时上手 使用广泛的版本 V3 受欢迎的原因
快速制作响应式的网页来适配各种终端 开发简单、方便 移动先行 代码开源 代码有良好的规范
3/44
Bootstrap的使用场景 响应式页面 移动端页面 后台页面 带有交互效果的页面
4/44
浏览器对Bootstrap的支持
支持 Internet Explorer 8-11
栅格系统中指定1到12的值来表示其跨越的范围 11/44
栅格系统的使用 列组合 列偏移 列嵌套 列排序
12/44
列组合
示例
<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>
演示示例5：Bootstrap列排序
16/44
响应式栅格
超小屏幕 手机 小屏幕 平板 中等屏幕 桌面显示 大屏幕 大桌面显示
(<768px)
(≥768px)
器 (≥992px)
器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽 度
</div>
15/44
列排序
如何让文字和图片交替出现？
示例
<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>
15px
列向右外
具体内容放在列向列左外内，列可以作为行拉 距的15p直x间接子元素
内列左1置5间px距的一大堆拉 距 1样5px式间 ，可以使用行croowl-xs-4（占4列宽度）
的样式来快速创建栅格
通过设置padding从而创建列之间的间隙，让后面第 一列和最后一列设置负值margin来抵消掉padding 的影响
<script src="js/bootstrap.js"></script>
</body>
</html>
7/44
基本模板特色 V3.x和V 2.x版本相比，有一个很大亮点
<meta name="viewport" content="width=device-width, initial-scale=1">
类前缀
None （自动） .col-xs
wk.baidu.com
列（column）数
最大列（column） 宽
槽（gutter）宽
自动
可嵌套
偏移（Offsets）
列排序
750px
970px
.col-sm-
.col-md12
~62px
~81px
30px（每列左右均有 15px） 是 是 是
1170px .col-lg-
~97px
Bootstrap入门及布局
本章目标 会使用12栅格系统布局网页结构 会使用基础排版元素布局网页 会使用表单元素布局网页 会使用按钮布局网页 会使用图片属性制作响应式的带有形状的图片
2/44
Bootstrap简介
来自Twitter，是流行的前端框架 是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架，便于开发
演示示例6：响应式栅格
17/44
练习1—制作英语在线VIP页面师资模块
需求说明
练习
使用container、row等栅格系
5/44
新手入门 开发环境（webstorm） 引入Bootstrap框架文件
压缩处理文件bootstrap.min.css，bootstrap.min.js 使用 Bootstrap 中文网提供的免费 CDN 加速服务
6/44
基本模板
<html>
<head lang="en">
示例
<meta name="viewport" content="width=device-width, user-scalable=no,
Bootstrap从V 3版本开始全面支持移动平台，并贯彻移 动先行的宗旨
演示示例1：Bootstrap最基本的HTML模板 8/44
Bootstrap架构
9/44
栅格系统
栅格系统是通过一系列的行（row）与列（column） 的组合来创建页面的布局，设置的内容就可以放在这 些创建好的布局中