前端技术2

什么是 Bootstrap

响应式设计

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。

Bootstrap 为您提供了所有这些基本的模块 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

各部分的简单说明

.1.Botstrap的HTML是基于HTML5的最新前沿技术.引人了全新的<canvas>、<audio>、<video>、<source>、<header>等标签

2.Bootstrap的CSS是使用LESS创建的CSS，是新一代的动态CSS。对设计师来说，能写得更少;对浏览器来说，解析更容易;对用户来说.阅读更轻松。

3.Bootstrap的JavaScript是使用jQuery的CSS，是优秀的JavaScript，它不会使每个用户都为了相似的功能.在每个网站都下载一份相同的代码，而是用一个代码库，将常用的函数放进去，按需取用

4.Bootstrap依旧本着这样的设计原则:并行开发、作为产品的风格指南、迎合所有的技能水平.

5.Bootstrap框架提供非常棒的视觉效果，且使用Bootstrap可以确保整个Web应用程序的风格完全一致，用户体验一致.操作习惯一致.这其实是很难的。

javascript画布组件(<canvas>标签)

 

Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

使用前，首先需要新建一个<canvas>网页元素。

<canvas id="myCanvas" width="400" height="200">
  您的浏览器不支持canvas！
</canvas>

 

上面代码中，如果浏览器不支持这个API，则就会显示<canvas>标签中间的文字——“您的浏览器不支持canvas！”。

每个canvas节点都有一个对应的context对象（上下文对象），Canvas API定义在这个context对象上面，所以需要获取这个对象，方法是使用getContext方法。

 

var canvas = document.getElementById('myCanvas');

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
}

 上面代码中，getContext方法指定参数2d，表示该canvas节点用于生成2D图案（即平面图案）。如果参数是webgl，就表示用于生成3D图像（即立体图案），这部分实际上单独叫做WebGL API

绘图方法

canvas画布提供了一个用来作图的平面空间，该空间的每个点都有自己的坐标，x表示横坐标，y表示竖坐标。原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。