今天将之前所学的浮动,定位,flex布局用于制作一个网页,为其从外部引入添加svg矢量图,特效动画等等,熟悉了静态页面的大多数构成知识。继续学习bootstrap。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 属性控制设备的宽度。为了便于被不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放
然后引入bootstrap的css和js文件:
<link rel="stylesheet" href="./bootstrap.css">
<script src="./bootstrap.js"></script>
然后就可以在此基础上调用一些能够自动适应不同屏幕分辨率设备的组件了,包括代码、表格、表单、按钮、图片、辅助类等等