bootstrap4前端框架入门

  • 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)

首先下载“CSS和JS文件”后,解压缩放到本地项目文档根目录中。(文末尾也附上下载地址,提取码:cjtn 

然后按照如下格式编写第一个网页。

一、文件引用必须严格按照这个顺序

网页开始必须如下:

<!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>

<body>的结尾前即在</body>前面插入:

	<!-- 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/1xbLjzicD5oxdczuPzaF2wQ 提取码: cjtn

另外附上IDE地址:https://www.dcloud.io/hbuilderx.html

发表评论

您必须登录才能发表评论!