- A+
所属分类:系统分析与设计
Bootstrap4:https://v4.bootcss.com/
实例页面:(可以直接点击打开连接网址)
https://v4.bootcss.com/docs/4.0/examples/(实例丰富)
https://v4.bootcss.com/docs/4.0/getting-started/introduction/ (快速入门1)
http://www.runoob.com/bootstrap4/bootstrap4-tutorial.html/ (快速入门2)
首先下载“bootstrap4前端框架”后,解压缩放到本地项目文档根目录中。(文末尾也附上下载地址,提取码:qwc5 )
然后按照如下格式编写第一个网页。
一、文件引用必须严格按照这个顺序
网页开始必须如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <!-- Bootstrap core CSS --> <link href="./bootstrap/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="./bootstrap/album.css" rel="stylesheet"> </head> <body>
在HTML结束代码前面插入:
<!-- Bootstrap core JavaScript ==== --> <script src="./bootstrap/jquery.min.js"></script> <script src="./bootstrap/popper.min.js"></script> <script src="./bootstrap/bootstrap.min.js"></script> <script src="./bootstrap/holder.min.js"></script> </body> </html>
二、相关知识点
1.Bootstrap提供了两个class,一个是全屏,一个是非全屏:
1.1 container 类用于固定宽度并支持响应式布局的容器。
1.2 container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
bootstrap4.zip下载链接:链接:https://pan.baidu.com/s/1exggUU4TLLxQebe3Wqm4YQ?pwd=qwc5 提取码:qwc5
另外附上IDE地址:https://www.dcloud.io/hbuilderx.html