bootstrap学习日志

一、Bootstrap基础

1、简介：

是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，

拥有样式库、组件和插件。常用来开发响应式布局和移动设备优先的Web项目，

能够帮助开发者快速搭建前端页面。

根据设备适口的大小来确定，自适应不同终端，减小工作量，移动设施上常用

• 特点：
  丰富的组件库
  响应式设计
  移动设备优先
  浏览器支持
  低成本，易上手
  CSS预编译
  框架成熟

2、组成：

(1)基本结构：栅格系统（可以自适应）

(2)丰富的CSS样式库：只需要改变标签的class属性值,就可以给标签应用不同的样式

(3)布局组件：有丰富的组件库，可以完成不同样式的页面布局

(4)插件：基于jQuery的插件，功能强大

3、浏览器：

主要关注–>内核：Blink、WebKit（谷歌浏览器）和Trident
CSS样式需要考虑支持和兼容性（-object(浏览器名字）-）

4、视口(Viewport)：

能将大分辨率尺寸网页缩小显示在手机浏览器

(1)布局视口(layout viewport)：是指网页的宽度

(2)视觉视口(visual viewport)：是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度

(3)理想视口(ideal viewport)：是指对设备来讲最理想的视口（窗口）尺寸

(4)视口的设置：在<meta>标签中，将name属性设为viewport，即可设置视口。在终端中以理想视口打开网页

5、分辨率

分辨率，又称解析度、解像度，可以细分为显示分辨率、图像分辨率、打印分辨率和扫描分辨率等。

像素相对低的情况下颗粒感会较重。

6、可缩放矢量图形(ScalableVectorGraphics，SVG)

是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）

(1)SVG使用标签的方式定义各种图形，外层标签是<svg>

(2)它的属性主要包括x、y、width、height，用数字表示，每个数字之间用空格或逗号隔开，表示定义一个在左上角(x,y)坐标位置，宽度为width，高度为height的矩形

二、bootstrap的环境配置

1、在页面中引入本地文件：

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>

2、使用CDN加速器：

(1)CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

(2)用法：(前提是必须联网)

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

三、bootstrap的全局的CSS样式