bootstrap4简介

Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集，它简洁灵活，使得web开发更加的便捷。Bootstrap4是Bootstrap最新版本，与Bootstrap3相比拥有更多具体的类并且把一些有关部分变成相关组件。需要注意的是，Bootstrap4放弃了IE8以及iOS6的支持，现在只支持IE9以上以及iOS7以上版本的浏览器。

我们可以在bootstrap官网上下载相关资源：

Bootstrap · The most popular HTML, CSS, and JS library in the world.

创建页面

首先我们需要安装bootstrap4，可以使用bootstrap4 CDN或者从官网下载bootstrap4。如果是使用bootstrap4 CDN，我们一般需要引入四个文件：1.bootstrap4核心css文件 2.jQuery文件(必须在bootstrap4核心js文件之前引入) 3.bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了popper.min.js 4.bootstrap4核心JavaScript文件。

    <!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

当然，上述语句我们是基于连网条件下进行的。如果我们希望在非连网条件下也能使用，就可以进入bootstrap官网下载相关文件包然后按照上述顺序引入文件就可以了。

做好这些之后我们就可以正式创建一个bootstrap4页面

添加html5 doctype声明

bootstrap要求使用html5文件类型，故需要添加html5 doctype声明。

基本声明格式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body></body>
</html>

bootstrap有一个特点是移动设备优先，故为了确保适当的绘制和触屏缩放，需要在网页的head中添加viewport meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

上述标签中，各个语句含义如下：

width=device-width：宽度设置为设备屏幕宽度

initial-scale=1.0：初始的缩放比例为1.0

shrink-to-fit=no：自适应手机屏幕的宽度

使用容器元素包裹网站内容

在bootstrap中我们可以使用如下两个容器类来包裹网站内容：

.container：用于固定宽度并支持响应式布局的容器

.container-fluid：用于100%宽度，占据全部视口的容器

我们可以看看二者的区别，下面我们展示了一个完整的bootstrap4页面撰写步骤：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap4页面创建</title><!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>div{background-color: pink;}
</style>
<body><!-- .container类:用于固定宽度并支持响应式布局的容器 --><div class="container">  <h1>.container类</h1></div><!-- .container-fluid类:用于100% 宽度,占据全部视口的容器 --><div class="container-fluid"><h1>.container-fluid类</h1></div>
</body>
</html>

其实一个简单的基本网页只需要引入bootstrap4核心css文件就可以了，因为没有其他的特殊效果和动作需要实现。如果还需要实现更多效果和动作，我们就需要引入四个文件。

网页渲染效果：

bootstrap4--概述与页面创建相关推荐

刷题小程序【程序猿面试宝典】开发（二）| 页面创建、页面配置、全局配置
文章目录 1.创建页面 2.设置 tabBar 3.设置全局配置 window 4.设置页面相关配置 5.自定义全局CSS样式 6.自定义公共class样式 7.小试牛刀,全局设置页面背景色 8.结束 ...
2021-2027全球与中国登陆页面创建软件市场现状及未来发展趋势
本文研究全球及中国市场登陆页面创建软件现状及未来发展趋势,侧重分析全球及中国市场的主要企业,同时对比北美.欧洲.日本.中国.东南亚.印度等地区的现状及未来发展趋势. 2019年全球登陆页面创建软件市场 ...
【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )
文章目录 ◯.Hero 动画简介一.创建 Hero 动画核心组件二.创建源页面三.创建目的页面四.页面跳转五.完整代码示例六.相关资源 ◯.Hero 动画简介 Hero Widget 动画 ...
facebook机器学习_如何为您的页面创建Facebook Messenger机器人
facebook机器学习 by Paul Pinard 保罗·皮纳德(Paul Pinard) 如何为您的页面创建Facebook Messenger机器人 (How to create a Face ...
一个websocket 可以多个页面创建吗_实战分享｜给我一个Puppeteer,没有爬不了的网站
Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟 Chrome 浏览器的运行.我们团队从 Puppeteer 刚发布出来就开始成为忠实用户了(主要 ...
razor页面跳转_如何在Blazor中使用Razor页面创建单页应用程序
razor页面跳转 In this article, we are going to create a Single Page Application (SPA) using Razor pages ...
JSP概述和页面技术
JSP概述和页面技术 JSP是Servlet更高级别的扩展,关于JSP的知识主要有JSP的页面构成.执行过程.字符转译.隐式对象等技术.知识点包括: 1.JSP概述 2.JSP页面技术 ...
如何用github制作html网站,如何使用docsify和GitHub页面创建文档网站？
如何自己创建网站?文档是帮助用户使用开源项目的一个重要部分,但它并不总是开发人员的首要任务,因为他们可能更关心如何使他们的应用程序更好地使用它.这就是为什么开发人员可以更容易地发布文档.在本教程中,我 ...
Mendix敏捷开发零基础学习《一》-基础（数据模型、页面创建、数据源绑定、属性绑定、关系型数据模型）
目录结构 Mendix敏捷开发零基础学习<一> 一.环境依赖二.业务场景三.需求分析四.项目实现 1.创建项目 2.创建数据模型 3.创建页面 4.数据源绑定 5.属性绑定 6.数据 ...

bootstrap4--概述与页面创建

bootstrap4简介

创建页面

添加html5 doctype声明

使用容器元素包裹网站内容

bootstrap4--概述与页面创建相关推荐

最新文章

热门文章