Bootstrap
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来做就好了。
时间: 2024-10-23 22:53:31