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)

首先下载“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

发表评论

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