Bootstrap课件v10概要.docx

Bootstrap课件v10概要.docx

《Bootstrap课件v10概要.docx》由会员分享，可在线阅读，更多相关《Bootstrap课件v10概要.docx（23页珍藏版）》请在冰豆网上搜索。

Bootstrap课件v10概要

一、概述

Bootstrap是Twitter公司开发的一个基于HTML、CSS、JAVASCRIPT的、用于快速开发Web应用程序和网站的前端框架，集合了最新的前端的技术，为web程序快速开发提供了一套前端工具包，包括布局、栅格、表格、按钮、表单、导航等。

特点：

●由Twitter团队推动，保证技术的领先，保证后续的产品推动。

●响应式设计：

Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。

●移动设备优先：

自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。

●丰富的内置组件。

它包含了功能强大的内置组件，易于定制。

●容易上手，只要您具备HTML和CSS的基础知识，您就可以开始学习Bootstrap。

●浏览器的支持：

所有的主流浏览器都支持Bootstrap。

下载：

Bootstrap提供三种下载版本

1.用于生产环境的Bootstrap.

编译并压缩后的CSS、JavaScript和字体文件。

不包含文档和源码文件。

2.Bootstrap源码

Less、JavaScript和字体文件的源码，并且带有文档。

需要Less编译器和一些设置工作。

3.Sass

这是Bootstrap从Less到Sass的源码移植项目，用于快速地在Rails、Compass或只针对Sass的项目中引入

安装：

1.CDN加载方式：

2.本地加载加载方式：

第一个例子：

DOCTYPEhtml>

--

引用bootstrap样式

-->

--

1.使用.nav（导航）和.nav-tabs（标签页）/nav-pills（胶囊式标签页）实现导航页签

2.通过data-toggle="tab"定义动作

3.通过aria-controls定义切换目标

注意：

aria-*是HTML5新加的属性。

而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。

主要是支持一些读屏设备。

比如盲人。

-->

---->

---->

tab1

tab2

tab3

tab4

--Tabpanes-->