bootstrap4.1.3--下载和安装

1、下载地址http://getbootstrap.com/docs/4.1/getting-started/download/

该按钮用于下载编译并压缩后的CSS、JavaScript。不包含文档和源码文件。一般来说,普通开发者应该使用该选项下载。

下载成功,你将会得到一个bootstrap-4.1.3-dist.zip的文件,解压。

开始写项目

1、为了页面保证HTML在移动设备上进行合适的绘制和触屏缩放,需要在<head>元素中添加viewport元数据标签。

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

其中:

width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。

2、引入4个文件, bootstrap.min.css(Bootstrap4 核心 CSS 文件)、jquery.min.js(jQuery文件,必须在bootstrap.min.js 之前引入)bootstrap.bundle.min.js、bootstrap.min.js(bootstrap的核心js文件)。

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>文字排版1</title>
<link type="text/css" rel="stylesheet" href="../../../bootstrap-4.1.3-dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>

3、直接使用它提供的CSS样式即可

参照未使用bootstrap4.1.3

猜你喜欢

转载自blog.csdn.net/weixin_42210229/article/details/84201110