RX学习笔记:Bootstrap

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来做就好了。

 

posted @ 2016-07-01 22:30  陈喜  阅读(179)  评论(0编辑  收藏  举报