Bootstrap3 简易入门.pptx

Bootstrap3 简易入门 1 Bootstrap中文网 2 目录 什么是Bootstrap? 为什么使用Bootstrap？ Bootstrap下载？ 1. 1.1. 1.2. 如何使用？ 1.3. 定制（ customize ） 1.4. CSS 2. 组件 3. 4. JS插件 1.5. 浏览器支持情况 1.什么是Bootstrap? 3 2011年，Twitter的Mark Otto ， Jacob Thornton工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、简洁、可定制、最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 2011年8月作为一个开源的产品发布在GitHub上，并2014年6月在GitHub最受欢迎第一项目! 1.1.为什么使用Bootstrap? 4 Bootstrap的优势: 　　 　　 1.易于使用: 只要基本的HTML和CSS知识 就可以开始使用。　　 2.响应式特性: 响应式CSS调整自适应手机,平板电脑和桌面 。　 3.手持设备优先: 在bootstrap3中,手持设备优先是核心框架的一部分 。　 4.浏览器兼容性: 兼容所有现代浏览器Chrome,Firefox、ie、Safari和Opera。 1.2. Bootstrap下载 5 下载源码地址： /getting-started/#download 1.3. 如何使用？ 6 只须在页面上加入bootstrap的css和js，及依赖jquery就可以进行开发了！ 1.4. 定制（ customize ） 个性化定制地址： /customize/ 7 1.5.浏览器支持情况 8 9 目录 全局CSS样式 布局容器 栅格系统 2. 2.1. 2.2. 表格 2.3. 表单 2.4. 组件 3. 4. JS插件 按钮 2.5. 2.全局CSS样式 10 设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。 11 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。 2.1 布局容器 12 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 2.2 栅格系统 13 为任意 table 标签添加 .table 类可以为其赋予基本的样式  2.3 表格 2.3.1 条纹状表格 通过 .table-striped 类可以给 tbody 之内的每一行增加斑马条纹样式 2.3.2 带边框的表格 添加 .table-bordered 类为表格和其中的每个单元格增加边框。 14 2.4 表单 15 为 a、button 或 input 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。  2.5 按钮 16 目录 组件 下拉菜单 导航 3. 3.1. 3.2. 面板 3.3. 进度条 3.4. 4. JS插件 17 3.组件 无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、分页、面板等更多功能。 18 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。 3.1 下拉菜单 19 Bootstrap 中的导航组件都依赖同一个 .nav 类。 3.2导航 20 默认的 .panel 组件，通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类添加面板标题。 3.3面板 21 默认的 .progress 组件，为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。 3.4进度条 22 目录 JS插件 弹窗 modal.js 轮播carousel.js 4. 4.1. 4.2. 页面固定块affix.js 4.3. 4.js插件 23 jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。 24 只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框： $(#myModal).modal(options)