BootStrap入门
一、BootStrap简介
- 历史：由Twitter 的 Mark otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品
- 为什么要使用BootStrap
- 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持：所有的主流浏览器都支持 Bootstrap。
- 容易上手：只要具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap。
- 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件，易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的
- BootStrap特性
- 代码开源。
- 有一套完整的基础CSS插件
- 丰富的预定义样式表
- 一组基于jQuery的JS插件
- 一个非常流行的栅格系统，崇尚移动先行的思想
- Bootstrap向上兼容，向下可能样式有不同，但是功能是完整的
- Bootstrap特色和功能
- BootStrap包的内容
- 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
- CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
- 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
- JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
- 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
- 文档结构和标准模版
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <Meta charset="utf-8"> 5 <Meta http-equiv=“X-UA-Compatible” content=“IE=edge”> 6 <Meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!– 上述3个标签必须放在最前面，任何其它内容跟随其后--> 8 <title>Bootstrap 实例</title> 9 <!-- 包含 bootstrap 样式表 --> 10 <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"> 11 </head> 12 <body> 13 <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 --> 14 <!-- 可选: 包含 jQuery 库 --> 15 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 16 <!-- 可选: 合并了 Bootstrap JavaScript 插件 --> 17 <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script> 18 </body> 19 </html>
二、BootStrap功能介绍
- BootStrap构成模块
- 页面布局
- Bootstrap有一套优秀的栅格布局，用法也相当简单，只需要按照HTML模板应用，让栅格布局成1~12列，能使用各种设备。此外改变模板中的类名就能实现不同的布局风格。
- 页面排版
- 基本组件
- 基本组件是Bootstrap的精华之一，其中都是开发者平时需要用到的交互组件。例如：网站导航、标签页、工具条、超大屏幕、徽章、分页栏、提升标签、多媒体对象、提示信息块和进度条等。这些组件都配有jquery插件，运用它们可以大幅度提高用户的交互体验，增强吸引力。
- jQuery插件
- 动态样式语言LESS
- 媒体查询
- 媒体类型
- 媒体特性
- 关键词
- 兼容性
三、BootStrap优秀插件
- Sco.js
- Chart.js
- 一个为设计者和开发者准备的简单的面向对象的图标绘制工具库。使用时需要在页面中引入Chart.js文件此工具库需要创建一个Chart对象。在页面中添加canvas，即可在canvas中绘制各种图表，如曲线图、柱状图、雷达图、饼图等
- jQuery UI Bootstrap
- 一个基于Bootstrap样式的jQuery UI控件，允许在使用jQuery控件时充分利用Bootstrap的样式，而且不会出现样式不统一的现象
- Flat UI
- 一套精美的扁平风格UI工具包，基于Bootstrap实现，包含许多基本的和复杂的UI部件，例如按钮、输入框、组合按钮、复选框、进度条和滑块等等
- Metro UI CSS
- 一套用来创建类似于Windows 8 Metro UI风格网站的样式
- HTML5 Boilerplate
- 一个前端开发模板，具有非常多先进特性的框架
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
