从零学前端第三讲：让小白都能懂的bootstrap原理与实践解析

【bootstrap原理与实践解析】

直播录屏版

传送门：https://v.qq.com/x/page/u0704edom3i.html

bootstrap原理与实践

1、入门介绍

1.1、框架简介

1.2、安装方法

2、整体结构思想

1.1、架构思想

1.2、栅格系统

1.3、CSS组件

3、基础布局

4、总结

4.1、结论

4.2、思考

1 入门介绍

1.1 框架简介

CSS框架，无论是哪一种，都是一种工具，它诞生的目的就是为了解决某种问题。

而在页面编写的过程中最容易遇到的问题之一就是，反复解决页面样式上的兼容性问题，以及大量重复已有代码。

因此有了CSS的框架将代码进行封装，提高了工作效率，让开发人员更快更好完成工作，降低工作难度，无需担心很多细枝末节的小问题。

而Bootstrap就是其中的佼佼者，它算是CSS框架里名气最大的之一，虽然现在可能会有人认为太老气，但不可否认的是它依旧是流行面最广的前端框架。

它是由Twitter的两位前员工在10多年前创建的，代码久经考验，还有良好的代码规范，简洁又易于修改，容易维护。

学习它能从中学到很多知识，那么接下来就来看看是如何安装的。

1.2 安装方法

首先要说明的是CSS框架的安装都非常简单，只需要将文件通过link的方式链接到自己的html页面当中就可以了

因此官网上的安装方法都是在介绍如何获取css的代码。

主要有三种方式

其一是直接下载代码包，有编译后的代码，有源码，还有sass源码三种选项可供选择↓

其二是使用CDN加速服务，直接在页面中引用CDN文件地址即可。

其三是使用各种包管理工具在本地下载安装，如bower、npm、composer等工具。

2 整体结构思想

2.1 架构思想

学框架如果只是学习怎么使用，那将非常简单，直接把官网文档打开，复制粘贴稍稍改改就能完成任务。