首页 > 前端教程 > Bootstrap 4 教程(1) 开山篇 Boostrap 介绍和安装
2018
05-25

Bootstrap 4 教程(1) 开山篇 Boostrap 介绍和安装

 

本教程目录:http://www.runcpp.com/?page_id=58

 

Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。

Bootstrap 4 与 Bootstrap 3

Bootstrap 4 是 Bootstrap 的最新版本,与 Bootstrap 3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。

Bootstrap 4 放弃了对 IE8 以及 iOS 6 的支持,现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器,那么请使用 Bootstrap 3。

Bootstrap4 安装使用

我们可以通过以下两种方式来安装 Bootstrap4:

使用 Bootstrap 4 CDN。

从官网 getbootstrap.com 下载 Bootstrap 4。

在整个教程期间,请尽量使用CDN的方式。同时,文字教程就不涉及下载的方式。

Bootstrap 4 CDN

国内推荐使用 BootCDN 上的库:

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<!-- 如果只是想使用样式,不涉及交互等操作,可以不引入JS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Bootstrap4 实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  </head>
  <body>
	<div class="jumbotron text-center">
		 <h1>我的第一个 Bootstrap 页面</h1>
		 <p>请重置浏览器大小查看效果!</p> 
	</div>
	 
	<div class="container">
	  <div class="row">
		<div class="col-sm-4">
		  <h3>第一列</h3>
		  <p>前端初探</p>
		  <p>每年帮助3万名同学走向前端之路</p>
		</div>
		<div class="col-sm-4">
		  <h3>第二列</h3>
		  <p>前端初探</p>
		  <p>每年帮助3万名同学走向前端之路</p>
		</div>
		<div class="col-sm-4">
		  <h3>第三列</h3> 
		  <p>前端初探</p>
		  <p>每年帮助3万名同学走向前端之路</p>
		</div>
	  </div>
	</div>


	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

代码解释

Bootstrap 要求使用 HTML5 文件类型,所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档头部声明,并设置对应编码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

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

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

之后便是引入CSS文件和三个主要JS文件,如果只是想使用样式,不涉及交互等操作,可以不引入JS文件。

再以后的教程当做,将不再重复以上的代码。

之后body内的其他代码,便为我们编写的代码了。现在看不懂不要紧,会在后面的教程中慢慢解释。

最后编辑:
作者:eatdao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。