logo资料库

bootstrap详细学习课件文档.doc

发布时间：2022-06-13 发布人：admin 分类：说明书 资料大小：0.66M 资料格式：doc 举报 版权申诉
第1页 / 共123页
第2页 / 共123页
第3页 / 共123页
第4页 / 共123页
第5页 / 共123页
第6页 / 共123页
第7页 / 共123页
第8页 / 共123页
资料共123页，剩余部分请下载后查看
    第一章bootstrap概述
    1.1bootstrap介绍
    1.2bootstrap特点
    1.3bootstrap版本
    1.4 bootstrap下载和引入
    1.4.1 访问官网和下载
    1.4.2 引入
    第二章全局CSS样式
    2.1 移动设备优先
    2.2 布局容器
    2.3 栅格系统
    2.3.1 介绍和工作原理
    2.3.2 多媒体查询
    2.3.3 网格选项
    2.3.4 偏移列
    2.3.5 嵌套列
    2.3.6 列排序
    2.4 排版
    2.4.1 标题
    2.4.2 引导主体副本
    2.4.3 强调
    2.4.4 缩写
    2.4.5 地址
    2.4.6 引用
    2.4.7 列表
    2.5 表格
    2.5.1 基本表格样式
    2.5.2 响应式表格
    2.6 表单
    2.6.1 表单布局
    2.6.2 表单控件
    2.6.3 静态控件
    2.6.4 表单控件状态
    2.6.5 表单控件大小
    2.6.6 表单帮助文本
    2.6.7 添加额外的图标
    2.7 按钮
    2.7.1 预定义样式
    2.7.2 按钮尺寸
    2.7.3 按钮的禁用状态
    2.8 图片
    2.9 辅助类
    2.9.1 文本
    2.9.2 情景背景色
    2.9.3 其他样式
    2.10 bootstrap响应式实用工具
    第三章bootstrap组件
    3.1Glyphicons字体图标
    3.2下拉菜单
    3.2.1对齐
    3.2.2标题
    3.2.3分割线
    3.2.4其他
    3.3按钮组
    3.3.1基本按钮组
    3.3.2 按钮工具栏
    3.3.3 按钮组大小
    3.3.4 嵌套
    3.3.5 垂直按钮组
    3.4 按钮下拉菜单
    3.4.1 分割按钮下拉菜单
    3.4.2 按钮下拉菜单的大小
    3.4.3 按钮上拉菜单
    3.5 输入框
    3.5.1基本样式
    3.5.2 输入框组的大小
    3.5.3 复选框和单选插件
    3.5.4 按钮插件
    3.5.5 带有下拉菜单的按钮
    3.5.6 分割下拉菜单按钮的输入框
    3.5.7 混合按钮组件
    3.6 导航
    3.6.1 标签页式导航
    3.6.2 胶囊式的导航菜单
    3.6.3 禁用连接
    3.6.4 下拉菜单
    3.7导航栏
    3.7.1默认导航栏
    3.7.2响应式导航栏
    3.7.3导航栏中的表单
    3.7.4导航栏中的按钮
    3.7.5导航栏中的文本
    3.7.6结合图标的导航链接
    3.7.7组件对齐方式
    3.7.8固定到顶部
    3.7.9静态的顶部
    3.7.10反色导航栏
    3.7.11其他
    3.8面包屑导航(路径导航)
    3.9分页
    3.9.1默认分页
    3.9.2分页的状态
    3.9.3分页的大小
    3.9.4翻页
    3.10标签
    3.11徽章
    3.12巨幕
    3.13页面标题(页头)
    3.14缩略图
    3.15警告框
    2.16进度条
    2.16.1默认进度条
    3.16.2交替进度条
    3.16.3条纹进度条
    3.16.4动画进度条
    3.16.5堆叠进度条
    3.17媒体对象
    3.18列表组
    3.18.1向列表组添加徽章
    3.18.2向列表组添加链接
    3.18.3向列表组添加自定义内容
    3.18.4被禁用的条目
    3.18.5情景类
    3.19面板
    3.19.1 面板标题
    3.19.2 面板脚注
    3.19.3 带有语境的彩色面板
    3.19.4 带有表格的面板
    3.19.5带有列表组的面板
    3.20 well
    第四章Bootstrap插件
    4.1模态框
    4.1.1用法
    4.1.2选项
    4.1.3方法
    4.1.4事件
    4.2下拉菜单插件
    4.2.1用法
    4.3标签页(tab)
    4.3.1用法
    4.3.2淡入淡出效果
    4.3.3方法
    4.4 提示工具(tooltip)
    4.4.1用法
    4.4.2选项
    4.4.3方法
    4.4.4事件
    4.5弹出框
    4.5.1用法
    4.5.2选项
    4.5.3事件
    4.6 警告框
    4.6.1用法
    3.6.2方法
    4.6.3事件
    4.7按钮插件
    4.8折叠插件
    4.9轮播图插件
    4.9.1选项
    4.9.2方法
    4.9.3事件
    4.10附加导航插件
    Bootstrap 课件 第一章 bootstrap 概述 1.1 bootstrap 介绍 bootstrap 是由美国 twitter 公司开发的，目前最受欢迎的前端框架。bootstrap 是基于 HTML， CSS，JAVASCRIPT 的前端框架，简单灵活，可以大大提高 web 开发效率 1.2 bootstrap 特点 1. 移动设备优先：boostrap3 包含了贯穿整个库的移动设备优先样式 2. 浏览器支持：目前几乎所有的主流浏览器都支持 bootstrap 3. 简单易学：HTML+CSS 基础 4. 响应式设计：bootstrap 的响应式 CSS 可以自适应于台式机，平板电脑，手机 简单总结来说： 为开发人员创建接口提供了简单统一 的解决方案 包含了强大的内置组件，便于定制，并且完美适应 jQuery 提供了基于 web 的定制 开源代码 1.3 bootstrap 版本 目前比较流行的 bootstrap 版本有三种，bootstrap2，bootstrap3，bootstrap4 其中 bootstrap2 是比较旧的版本，在 HTML4 中的网页很多地方都是可以使用 bootstrap2
    作为前端框架的，但是主要是针对台式机网页开发，对于移动端开发比较乏力 Bootstrap3，目前最新版本是 v3.3.7，bootstrap3 可以完全适应台式机，平板电脑，手机的 网页设计，更加注重响应式原理，更好的使用 jQuery， Bootstrap4，是在 2015 年也就是 bootstrap 四周年之际推出的新的前端框架，在 bootstrap3 的基础上，对 bootstrap 做出了一些相应的改变，例如：从 Less 迁移到 Sass，改进网格系 统，全新的自定义选项，重写所有的 javascript 代码等。 目前 bootstrap3 是最为稳定的版本，所以我们以学习 bootstrap3 为主。 1.4 bootstrap 下载和引入 1.4.1 访问官网和下载 bootstrap 中文网地址：http://www.bootcss.com/ 找到我们的 bootstrap3 之后可以进入下载页面，其中我么可以下载各个不同的 bootstrap 版本来优化我们的开发 目前 bootstrap 为我们提供了三种下载的样式 生产环境开发包：包含最基本的已经编译好的 bootstrap 一如代码，里面包含，CSS 样式， JS 代码，font 字体样式，目录结构如下图所示：
    bootstrap 源码：内容较多，包含所有的 bootstrap 源代码，已经编译好的开发环境包，一 些官方实例。目录结构如下图所示： Sass 包：没有编译的 bootstrap 代码，可以让我们通过 Sass 编译我们自己定义的样式 1.4.2 引入 在 HTML 页面中，我们需要在 head 标签中，将当前需要用到的 CSS 代码和 JS 代码引入到 页面中。 引入 CSS 样式： Title 引入 JS 代码： script src="../bootstrap-3.3.5-dist/js/jquery.js">
    第二章 全局 CSS 样式 2.1 移动设备优先 为了确保适当的绘制和触屏的缩放，我们需要在 head 标签中添加 viewport 属性， 其中 width 属性控制宽度，由于我们的浏览器是需要在不同的设备上面运行的，所以我们需 要把当前的宽度设置成 device-width，而 initial-scale=1 表示网页在加载的时候需要 1:1 显 示。而在移动设备上我们通常要求页面不能左右滑动，能够大大的增加用户的使用体验，这 要是我们需要添加上另外的一些属性 其中 maximum-scale=1.0 和 user-scalable=no 是用来规定当前用户不能使用缩放功能，可 以让我们当前的页面显示最佳效果。 2.2 布局容器 bootstrap 需要为页面内容和栅格系统提供一个容器，container 或者 container-fluid .container 类用于固定宽度并且支持响应式布局的容器
    .container-fluid 类用于 100%宽度，占据全部视图的容器
    2.3 栅格系统 bootstrap 提供了一套响应式，移动设备优先的流式栅格系统，可以随着屏幕或者视口的大 小改变而改变，系统会自动分为最多 12 列。它还包含了易于使用的预定义类，强大的 mixin 用于生成更具语义的布局 2.3.1 介绍和工作原理 栅格系统用于通过一系列的行和列的组合来创建页面布局样式。 工作原理：  行，必须包含在.container(固定宽度)或.container-fluid(100%)宽度中，以方便围棋赋予 合适的排列(aligment)和内补(padding)  通过行在水平方向创建一组列  内容应该放在列内，并且只有列可以作为行的直接子元素  我们可以通过.row 和.col-xs-4 这样的预定义类，来快速创建栅格布局  通过为列设置 padding 属性，可以创建列与列之间的间隔，通过为.row 元素设置复制 margin 从而可以抵消.container 元素设置的 padding。这样就间接的取消了列中的 padding 2.3.2 多媒体查询 媒体查询就是有条件的 CSS 规则，它适用于一些规定某些特殊规定条件的 CSS， 在 bootstrap 的媒体查询中允许基于视口大小进行移动，显示隐藏内容。 一般情况下的媒体查询：
    2.3.3 网格选项 超 小 设 备 手 机 小型设备，平板 中性设配台式电 超大型台式电脑 (<768px) 电脑(>=768px) 脑(>=992px) (>=1200px) 网格行为 一般水平 以折叠开始，断 以折叠开始，断 以折叠开始，断 点以上是水平 点以上是水平 点以上是水平 最大容器宽度 none 750px 970px 1170px class 前缀 Col-xs- Col-sm- Col-md- Col-lg- 列数和 12 最大列宽 Auto 12 60px 12 78px 12 95px 间隙宽度 30px( 一 个 列 的 30px( 一 个 列 的 30px( 一 个 列 的 30px( 一 个 列 的 每 一 边 都 是 每 一 边 都 是 每 一 边 都 是 每 一 边 都 是 15px) 15px) 15px) 15px) yes yes yes yes yes yes yes yes yes yes yes yes 可嵌套 偏移量 列排序 例子：
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-8
    .col-md-4
    .col-md-4
    .col-md-4
    .col-md-4
    .col-md-6
    .col-md-6
    响应式列重置例子： #444;"> 以致远

    夫君子之行，静以修身，俭以养德，非淡泊无以明志非宁静无

    浩浩乎，平沙无垠，夐不见人。河水萦带，群山纠纷。黯兮惨

    分享到：
    赞 收藏

    相关推荐

    资料库

    课程资源

    共收录17145份资料，累计13个分类，关注成员有19位，主要包括：PHP,网络管理,网页制作,Java,.Net,数据库,3G/移动开发,C/C++,游戏开发,嵌入式,讲义,软件测试,专业指导

    热门标签

    PHP 网络管理 网页制作 Java .Net 数据库 3G/移动开发 C/C++ 游戏开发 嵌入式 讲义 软件测试 专业指导

    最新资料