Bootstrap4 教程简介
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个app 。
谁适合阅读本教程？
只要您具备 HTML 和 CSS 的基础知识，您就可以阅读本教程，进而开发出自己的网站。在您学习完本教程后，您即可达到使用 Bootstrap 开发 Web 项目的中等水平。
阅读本教程前，您需要了解的知识：
在您开始阅读本教程之前，您必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:
● HTML 教程
● CSS 教程
● JavaScript 教程
Bootstrap4 实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap 实例</title>
<!--[if lt IE 11]>
<script src="html5/html5.min.js"></script>
<![endif]-->
<script src="jquery/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置浏览器大小查看效果!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>第一列</h3>
</div>
<div class="col-sm-4">
<h3>第二列</h3>
</div>
<div class="col-sm-4">
<h3>第三列</h3>
</div>
</div>
</div>
</body>
</html>
效果：
重置浏览器大小查看效果!
Bootstrap4 与 Bootstrap3
Bootstrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。
Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。
发表评论