otStrap.ppt

BootStrap 王健 简介 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 谁适合阅读本教程？ 只要您具备 HTML 和 CSS 的基础知识，您就可以阅读本教程，进而开发出自己的网站。在您学习完本教程后，您即可达到使用 Bootstrap 开发 Web 项目的中等水平。 阅读本教程前，您需要了解的知识： 在您开始阅读本教程之前，您必须具备 HTML 和 CSS 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的?HTML 教程?和CSS 教程。 为什么使用 Bootstrap 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持：所有的主流浏览器都支持 Bootstrap。 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见?Bootstrap 响应式设计。 它为开发人员创建接口提供了一个简洁统一的解决方案。 它包含了功能强大的内置组件，易于定制。 它还提供了基于 Web 的定制。 它是开源的。 Bootstrap 包的内容 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在?Bootstrap 基本结构?部分详细讲解。 CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在?Bootstrap CSS?部分详细讲解。 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在?布局组件?部分详细讲解。 JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在?Bootstrap 插件?部分详细讲解。 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本 Bootstrap?环境安装 下载 Bootstrap 您可以从?/?上下载 Bootstrap 的必威体育精装版版本。当您点击这个链接时，您将看到如下所示的网页： Hello BootStrap Bootstrap?CSS 概览 HTML 5 文档类型（Doctype） !DOCTYPE html htmlb/b .... /html 移动设备优先 meta name=viewport content=width=device-width, initial-scale=1.0 width?属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为?device-width?将确保它能正确呈现在不同设备上。 initial-scale=1.0?确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。 在移动设备浏览器上，通过为 viewport meta 标签添加?user-scalable=no?可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0?与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！ meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no 开发篇 1-Bootstrap?网格系统 什么是 Bootstrap 网格系统（Grid System）？ Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。 Bootstrap 网格系统（Grid System）的工作原理 网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的： 行必须防止在?