Bootstrap笔记

Bootstrap入门笔记，介绍Bootstrap的一些基本用法

1 认识Bootstrap

Bootstrap是一个非常受欢迎的前端框架。Bootstrap是由HTML、CSS和JavaScript编写可复用代码的集合（包括全局样式、组件、插件等），使用该框架能够快速开发出响应的网站（即适配PC、平板和移动端的网站）

由Twitter团队开发，他们的本意是制作一套可以让网页保持统一风格的前端框架

优点：Bootstrap拥有一个强大的网格系统，它由行和列组成，我们可以直接创建网格，无需自行编写媒体查询来创建；Bootstrap预定义很多响应式的类，图片将会根据用户的屏幕尺寸自动调整图像大小，更方便我们去做各个屏幕的适配；Bootstrap框架提供的组件、插件、布局、栅格系统、响应式工具等等，可以为我们节省了大量的开发时间

缺点：不适合高度定制类型的项目，因为Bootstrap具有统一的视觉风格，高度定制的项目需要大量的自定义和样式覆盖；Bootstrap的框架文件比较大（61KB JS +159KB CSS），资源文件过大会增加网站首屏加载的事件，并加重服务器的负担；Bootstrap样式相对笨重，也会额外添加一些不必要的HTML元素，它会浪费一小部分浏览器的资源

2 Bootstrap安装

在Bootstrap 5之前，Bootstrap是依赖jQuery的

2.1 CDN

Bootstrap框架的CDN地址：

• https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css

• https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js

• https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js

HTML中引入之后，添加重要的全局配置

• HTML5文档类型（DOCTYPE），Bootstrap要求文档类型是HTML5
• 添加视口（Bootstrap采用的是移动设备优先的开发策略，在移动端会把layout viewport的宽度设置为设备的宽，并且不允许用户进行页面的缩放）<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,shrink-to-fit=no">

2.2 下载源码引入

Bootstrap下载地址：https://v4.bootcss.com/docs/getting-started/download/

jQuery下载地址：https://jquery.com/download/

Bootstrap软件包内容

2.3 npm安装

# npm安装
npm install bootstrap

# yarn安装
yar add bootstrap

3 响应式容器原理

4 网格系统的原理

4.1 认识网格系统

4.2 12列网格系统

4.3 网格系统的原理

5 响应式工具和组件

6 Bootstrap项目实战