初识Bootstrap

目录

一、Bootstrap概述

1、Bootstrap是什么？

2、Bootstrap的特点

3、Bootstrap的组成

二、bootstrap框架

1、视口（Viewport）

2、box-sizing属性

3、分辨率

4、页面中图片的分类

三、Bootstrap环境安装

1、下载步骤

2、使用时必须导入的文件

3、文件的引用 

4、使用CDN加速器

---

一、Bootstrap概述

1、Bootstrap是什么？

Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性， 拥有样式库、组件和插件。

Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。

2、Bootstrap的特点

（1）丰富的组件库

（2）响应式设计

（3）移动设备优先

（4）浏览器支持

（5）低成本 ，易上手

（6）css预编译

（7）框架成熟

3、Bootstrap的组成

（1）基本结构 ：Bootstrap提供了一个带有网络系统、连接样式、北京的基本结构。

（2）布局组件：Bootstrap包含了丰富的组件库，提供了十几个可重用的组件。

（3）css样t式库：Bootstrap自带了全局的css样式，并预先定义了基本的HTML元素样式、可扩展的class。

（4）插件：Bootstrap提供了一些基于jQuery（一个用于简化JavaScript编程的库）构建的可选插件。

二、bootstrap框架

1、视口（Viewport）

（1）布局视口(layout Viewport)：是网页的宽度

（2）视觉视口(visual viewport)：用户正在看的网站的区域。宽度等于移动设备浏览器窗口的宽度。

（3）理想视口：浏览器窗口的宽度和设备屏幕的宽度相同

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2、box-sizing属性

         box-sizing属性：用来更改盒子尺寸的计算方式

（1）传统方式：content-box

盒子的宽度 = CSS中设置的width + border + padding

（2）CSS3中的计算方式：border-box

盒子的宽度 = CSS中设置的width（包含了border、padding，盒子的大小是固定的）

3、分辨率

（1）(1)屏幕分辨率：屏幕能显示多少信息.通常用px来衡量。在同一台设备上图像的像素点和屏幕的像素点时一一对应的。

（2）图像分辨率：分辨率越低，图像就越模糊;分辨率越高,图像就越清晰

（3）设备像素比：屏幕像素 / CSS像素

4、页面中图片的分类

（1）小图标(icon)

（2）图像：gif、jpg/jpeg、png

（3）可缩放的矢量图像(svg)

三、Bootstrap环境安装

1、下载步骤

点击链接下载Bootstrap

 点击下载第一个（用于生产环境的 Bootstrap）即可

2、使用时必须导入的文件

        bootstrap的CSS主文件(bootstrap.min.css、bootstrap.css）

        引入jQuery插件的主文件(jQuery.min.js、jQuery.js)

        引入bootstrap的JS主文件(bootstrap.min.js、bootstrap.js)

3、文件的引用 

4、使用CDN加速器

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