Bootstrap入门与布局教程课件.pptx

1、本章目标 会使用12栅格系统布局网页结构 会使用基础排版元素布局网页 会使用表单元素布局网页 会使用按钮布局网页 会使用图片属性制作响应式的带有形状的图片2/44Bootstrap简介来自Twitter，是流行的前端框架是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架，便于开发人员随时上手使用广泛的版本 V3受欢迎的原因快速制作响应式的网页来适配各种终端开发简单、方便移动先行代码开源代码有良好的规范3/44Bootstrap的使用场景 响应式页面 移动端页面 后台页面 带有交互效果的页面4/44浏览器对Bootstrap的支持 支持 Internet Explorer 8

2、-115/44新手入门 开发环境（webstorm）引入Bootstrap框架文件压缩处理文件bootstrap.min.css，bootstrap.min.js使用 Bootstrap 中文网提供的免费 CDN 加速服务6/44基本模板这是一个这是一个Bootstrap框架的最基本框架的最基本HTML模板模板7/44示例基本模板特色 V3.x和V 2.x版本相比，有一个很大亮点Bootstrap从V 3版本开始全面支持移动平台，并贯彻移动先行的宗旨演示示例1：Bootstrap最基本的HTML模板8/44Bootstrap架构9/44栅格系统 栅格系统是通过一系列的行（row）与列（colu

3、mn）的组合来创建页面的布局，设置的内容就可以放在这些创建好的布局中 实现原理通过定义容器的大小，平分为12份调整内外边距结合媒体查询10/44栅格系统工作原理 一行数据（row）必须包含在.container中，以便为其赋予合适的对齐方式和内边距 使用行在水平方向创建一组列 具体内容放在列内，列可以作为行的直接子元素 内置的一大堆样式，可以使用col-xs-4（占4列宽度）的样式来快速创建栅格 通过设置padding从而创建列之间的间隙，让后面第一列和最后一列设置负值margin来抵消掉padding的影响 栅格系统中指定1到12的值来表示其跨越的范围容器容器 container列列 col

4、umn行行 row列与列间距列与列间距 30px列右间列右间距距 15px列左间距列左间距 15px列向左外列向左外拉拉 15px间间距距列向右外列向右外拉拉 15px间间距距浏览器可视区域11/44栅格系统的使用 列组合 列偏移 列嵌套 列排序12/44列组合 .col-md-8 .col-md-4演示示例2：Bootstrap列组合13/44示例列偏移 列 .col-md-4 .col-md-4.col-md-offset-4演示示例3：Bootstrap列偏移14/44示例列嵌套 使用列组合的方式如何布局？Level 1:.col-md-9 Level 2:.col-md-6 Level

5、 2:.col-md-6 15/44示例列排序 如何让文字和图片交替出现？.col-md-9.col-md-push-3 .col-md-3.col-md-pull-9演示示例5：Bootstrap列排序16/44示例响应式栅格 超小屏幕超小屏幕 手机手机(768px)小屏幕小屏幕 平板平板(768px)中等屏幕中等屏幕 桌面显示桌面显示器器(992px)大屏幕大屏幕 大桌面显示大桌面显示器器(1200px)栅格系统行为栅格系统行为总是水平排列总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排开始是堆叠在一起的，当大于这些阈值时将变为水平排列列.container 最大宽最大宽度度N

6、one（自动）（自动）750px970px1170px类前缀类前缀.col-xs.col-sm-.col-md-.col-lg-列（列（column）数）数12最大列（最大列（column）宽宽自动自动62px81px97px槽（槽（gutter）宽）宽30px（每列左右均有（每列左右均有 15px）可嵌套可嵌套是是偏移（偏移（Offsets）是是列排序列排序是是演示示例6：响应式栅格17/44练习1制作英语在线VIP页面师资模块 需求说明使用container、row等栅格系统的知识布局一个响应式的网页，需要适配中等屏幕、小屏幕、超小屏幕对于“2000+全球师资 100%欧美外教”等部分的字

7、体大小颜色需要自己写CSS样式页面上的图片部分可以作为背景图片引入进来18/44练习共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧共性问题集中讲解 19/44CSS全局样式 又称为CSS布局 是Bootstrap三大核心内容的基础，即基础的布局语法 包括基础排版（Typography）表单（Forms）按钮（Buttons）图片（Images）等20/44基础排版 标题 页面主体 强调文本 列表21/44标题 Bootstrap为传统的标题h1-h6重新定义了标准的样式，使得在所有浏览器下显示效果都一样元素元素字体大小字体大小计算比例计算比例其他其他h136px14px*2.60

8、margin-top:20px;margin-bottom:10px;h230px14px*2.15h324px14px*1.70h418px14px*1.25margin-top:10px;margin-bottom:10px;h514px14px*1.00h612px14px*0.85演示示例7：标题22/44页面主体 Bootstrap为段落标签设置了全局的字体大小为12px，行间距line-height为字体大小的1.428倍（即20px）特别强调的段落标签.如果Bootstrap提供的字体大小等样式不符合实际开发要求，可以在引入的bootstrap.css文件后面重新设置样式以覆盖框

9、架定义好的默认样式!23/44经验强调文本 文本强调元素：small、strong、em 对齐方式左对齐左对齐中间对齐中间对齐右对齐右对齐两端对齐两端对齐24/44列表 内联列表 水平定义列表首页首页岗位课岗位课商城商城关于我们关于我们 购物指南购物指南 购物流程、会员价格购物流程、会员价格 配送方式配送方式 上门自提、海外配送上门自提、海外配送 售后服务售后服务 售后政策、价格保护、退款说明、取消订单、退换货售后政策、价格保护、退款说明、取消订单、退换货25/44示例演示示例8：内联列表演示示例9：水平定义列表表单 内联表单 横向表单 验证提示状态 控件大小 姓名：姓名：邮箱：邮箱：演示示例

10、10：表单26/44示例内联表单27/44示例横向表单演示示例11：横向表单 姓名：姓名：28/44示例验证提示状态.has-warning 警告（黄色）.has-error 错误（红色）.has-success 成功（绿色）29/44控件大小 大型输入框 小型输入框30/44示例按钮 按钮样式 按钮大小演示示例12：按钮样式31/44示例图片 响应式图片 图片形状演示示例13：图片形状在使用img-circle制作圆形图片的时候，必须保证图片是正方形的，否则图片将变成椭圆形的!32/44语法示例练习2制作全国公安机关服务平台登录页面 需求说明使用container、row等栅格系统的知识布局

11、网页结构使用表单元素制作登录页面使用btn-success制作“搜索”按钮，用 btn-danger制作“登录”按钮完成时间：20分钟33/44练习共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧共性问题集中讲解 34/44总结Bootstrap概述12栅格系统CSS全局样式Bootstrap 样式固定布局在不同浏览器屏幕下会呈现不同的方式Bootstrap的使用场景HTML标准模板12栅格的工作原理12栅格的使用响应式栅格列组合列偏移列嵌套列排序超小屏幕（xs）手机(768px)小屏幕（sm）平板(768px)中等屏幕（md）桌面显示器(992px)大屏幕（lg）大桌面显示器(1200px)基础排版：标题、页面主体、强调文本、列表表单：内联表单、横向表单、验证提示状态、表单 控件尺寸按钮响应式图片和3种不同图片的形状35/44谢谢大家！36/44