RX编程笔记：Bootstrap

Posted 2020-08-02

Bootstrap

https://getbootstrap.com

2016-07-01

在学习FreeCodeCamp课程中了解到Bootstrap，并于课程第一个实战题卡在响应式部分，于是先对Bootstrap做一下学习。

初步理解Bootstrap是一个用于制作响应式网页的框架。

——何谓响应式网页，就是同一个网页可以在不同设备屏幕分辨率间自适配尺寸显示。

——何谓框架，其实就是事先准备好的各种css样式表、js脚本的组合，用于在制作网页过程中调用，无须再重复制造轮子。简单点理解，就是代码模板，或者说就是傻瓜式建站，只需简单地增加内容，就可以做出漂亮的网站。

要使用Bootstrap，先从官网下载代码包，dist包中有三个文件夹，css、js和fonts，文件不少，实际上只需css文件夹中的一个叫Bootstrap.min.css文件就能开始工作，至于js和fonts后面才来理解。

按官网提供的Basic template指示，网页头部按下面二点照做就好：

1.网页头部必须以下面三行开始：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

2.在头部连接Bootstrap.min.css文件

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

 

然后接着来看看Starter template，页面主体分为两个部分，一个是nav导航条，一个是container页面内容，然后所有的内容都使用了Bootstrap提供的预定义CSS类。

这样看来使用Bootstrap的重点就是使用它提供的预定义CSS类，只要熟悉了这些基本类，应该就能简单使用Bootstrap了。

但是，有好多不同种类的类，看来也不是一时半会能深入认识的，反正先学会按Strater template来做就好了。