Bootstrap入门学习.ppt

课程大纲HTML+css简介Bootstrap结构Bootstrap的简单使用 Document HTML 基本构成元素 头部声明两种方式 Head部分的常用声明文件及css js 文件的引入 Body主体部分的内容 Html常用标签及不同声明中的写法 Div +css排版 Class与id的区别目的：了解html标签 明白网页前端文件的构成及运行的过程BootstrapBootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的，用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架。DIV+CSS移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持 Bootstrap。 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。Bootstrap结构基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。Bootstrap 结构bootstrap/ css/ bootstrap.css bootstrap.min.css bootstrap-theme.css bootstrap-theme.min.css js/ bootstrap.js bootstrap.min.js fonts/ glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff预编译版Bootstrap 源码bootstrap/ less/ js/ fonts/ dist/ css/ js/ fonts/ docs/ examples/Bootstrap使用1. 下载bootstrap:http:/ 在html文档中加载bootstrap相关的文件（jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件）注意：为了Bootstrap开发的网站对移动设备友好，确保适当的显示和触屏缩放，需要在网页的head中增加viewport视口 Bootstrap 基本引入代码 Title Bootstrap CSS1. Bootstrap栅格系统2. Bootstrap排版3. Bootstrap代码4. Bootstrap表格5. Bootstrap表单6. Bootstrap按钮7. Bootstrap图像Bootstrap 容器Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。.container 类用于固定宽度并支持响应式布局的容器。Copy . .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。Copy . 容器内嵌套栅格系统Bootstrap栅格系统Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备和视口大小的增加而适当的增加到最多12列媒体查询：用来创建 Bootstrap 网格系统中的关键的分界点，根据不同的视口大小显示不同的内容Bootstrap栅格系统Bootstrap栅格系统额外的小设额外的小设备收集（备收集（768px）小型设备平板电脑小型设备平板电脑（768px）中型设备台式电脑中型设备台式电脑（992px）大型设备台式电脑大型设备台式电脑（1200px）网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的最大容器宽度None (auto)750px970px1170pxClass 前缀.col-xs-.col-sm-.col-md-.col-lg-列 #12121212最大列宽Auto60px78px95pxBootstrap栅格系统Bootstrap栅格系统-列嵌套 col-xs-8 col-sm-6col-xs-4 col-sm-6 .col-md-4Bootstrap排版1. 内联子标题我是标题3 h3. 我是副标题3 h32. 强调 3. 缩写WWW4. 地址5. 引用6. 列表Bootstrap 代码1. Bootstrap允许你以两种形式显示代码：code标签pre标签注意：请确保你使用和标签时，开始标签和结束标签使用Unicode变体 &lt &gt2. google prettify插件的使用注意：要显示代码行号增加样式：li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8list-style: decimal;.linenumspadding-left:5pxBootstrap 表格Bootstrap支持原来的表格元素tablethead：表格标题行容器元素tbody：表格主题内容trtdth：表头(必须在thead中)caption：表格存储内容的总结Bootstrap 表格类class=table设置内边距以及水平分割线class=table-striped在内容主体上看到条纹class=table-bordered表格周围增加边框class=table-hover隔行换色class=table-condensed精简表格Bootstrap 表格上下文类上下文类，用来改变表格行或单个单元格背景颜色class=activeclass=successclass=warningclass=danger响应式表格Bootstrap 表单布局Bootstrap提供了下列类型的表单布局：垂直表单内联表单水平表单Bootstrap 垂直表单创建基本表单的步骤：1. 向父元素添加role=form2. 把标签和控件放在一个class=form-group的div中，获取最佳间距3. 向所有的文本元素等，添加class=form-controlBootstrap 内联表单如果创建一个表单，他的所有元素是内联的，向左对齐，请向form标签中添加class=form-inline默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。使用 class .sr-only，您可以隐藏内联表单的标签。Bootstrap 水平表单创建水平表单步骤：1. 向父 元素添加 class .form-horizontal2. 把标签和控件放在一个带有 class .form-group 的 中。3. 向标签添加 class .control-label。Bootstrap 支持的表单控件Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。1. 输入框：Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。2. 单选框、复选框对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。Bootstrap 表单控件状态除了 :focus 状态，Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。输入框焦点禁用的输入框input禁用的字段集fieldset验证状态Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可Bootstrap 表单控件大小您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。Bootstrap 按钮任何带有 class=btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：class=btn默认的按钮class=btn-primary一组按钮中的初始状态class=btn-success一个成功或积极的动作class=btn-info警告信息的上下文按钮class=btn-warning谨慎采取的动作class=btn-danger潜在危险动作class=btn-link看起来想一个连接，但保持按钮的行为Bootstrap 按钮大小获得各种大小按钮的 class：class=btn-lgclass=btn-smclass=btn-xsclass=btn-blockBootstrap 按钮状态Bootstrap 提供了激活、禁用等按钮状态的 class激活状态：class=active禁用状态：class=disabled以上按钮的状态也同样适用于锚元素Bootstrap 插件(一)1. Bootstrap过渡效果2. Bootstrap模态框3. Bootstrap 下拉菜单4. Bootstrap 滚动监听5. Bootstrap标签页6. Bootstrap 工具提示7. Bootstrap 弹出框8. Bootstrap 警告框注意不要在同一个页面插件名称不要相同Bootstrap 插件(二)1. Bootstrap 按钮2. Bootstrap 折叠3. Bootstrap 轮播4. Bootstrap 附加导航过渡效果总结fade 默认。淡入淡出到下一页。默认。淡入淡出到下一页。 flip 从后向前翻动到下一页。 flow 抛出当前页面，引入下一页。 pop 像弹出窗口那样转到下一页。 slide 从右向左滑动到下一页。 slidefade 从右向左滑动并淡入到下一页。 slideup 从下到上滑动到下一页。 slidedown 从上到下滑动到下一页。 turn 转向下一页。 none 无过渡效果。 jQuery Mobile按钮jQuery Mobile 中的按钮可通过三种方法创建： 使用 元素 使用 元素 使用 data-role=button 的 元素jQuery Mobile图标使用 data-icon 属性给按钮增加图标效果data-icon属性规则：在images/icons-png目录中的每个文件名就是data-icon的属性值使用data-iconpos 属性来规定图标的位置data-iconpos属性值：top、right、bottom、left定位页眉和页脚放置页眉和页脚的方式有三种： inline - 默认。页眉和页脚与页面内容位于行内。 fixed - 页面和页脚会留在页面顶部和底部。 fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部请使用 data-position 属性来定位页眉和页脚：jQuery Mobile导航栏导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。默认地，导航栏中的链接会自动转换为按钮（无需 data-role=button）。请使用 data-role=navbar 属性来定义导航栏：jQuery Mobile列表jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 () 和无序列表 ()。如需创建列表，请向 或 元素添加 data-role=listview。如需为列表添加圆角和外边距，请使用 data-inset=true 属性：如需规定列表分隔符，请向 元素添加 data-role=list-divider 属性如需在列表中添加搜索框，请使用 data-filter=true 属性：练习使用Bootstrap 制作一个单页参考资料：http:/ http:/