开发者学堂课程【高校精品课-西安交通大学-Web 编程技术：实验4 利用 BootStrap 创建简单页面】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/73/detail/15881
实验四利用 BootStrap 创建简单页面
内容介绍：
一、 实验目的
二、 实验环境
三、 实验内容
四、 实验步骤
五、 实验报告要求
六、 实验补充知识
首先切换到实验主页面，点击第四个实验前往主页面，点击再次体验。此时已经进入资源网，点击创建资源。此时资源已经创建完成，按照手册一步步进行。
一、实验目的
(一）学会在阿里云 ECS 服务器上安装 BootStrap
(二）能够利用 Bootstrap 完成简单的响应式 web 页面
二、实验环境
(一) 云主机
阿里云ECS基础版本:1CPu;2G内存。
(二) 操作系统
CentOs 7.7
(三) web服务器
ApachetPHP
三、实验内容
(一) 在阿里云ECS 服务器上安装BootStrap
(二) 利用BootStrap完成一个简单的 Web页面
四、实验步骤
第一步已经完成，继续安装阿帕奇，选择y安装完毕，启动apache，启动完成后，在地址栏中输入弹性IP，测试是否安装成功,新建一个标签页，前往官网地址复制，查看到testing 123..说明已经安装完成。下载BootStrap包，版本5.1.1，手册内部版本是5.0，两种版本都可以进行下载。下载的都是预编译版本的。内部还有的Compiled css and js。将其下载完成即可。上传bootstrap。需要下载一个工具并上传，点开此工具。复制ip名称。端口号采用22号端口，用户名里边含有一般是root。
密码容易出错，建议大家直接进行复制，粘贴登录，yes，此时已经登陆成功要求是将包传入/var/www/html文件夹下，切换。
寻找var，点击WWW，点击HTML，寻找刚才下载的包包是放在桌面上的。也可以放入其他盘，点击确定，上传速度是比较迅速的。此时查看到文件包内已经产生，说明已经上传完毕。此时需要在命令窗口进行操作。进入当前目录下，使用unzip bootstrap-5.1.1.-dist.zip
进行解压，先用命令cd. /varJwww/html
yum install unzip zip服务，将解压包安装。此时使用unzip是没有显示的，因为还没有被安装。解压完成后可以查看到一个蓝色的文件夹。进入bootstrap可以看到有两个文件进入css中有很多文件。此时需要建立新的页面使用vim/var/www/html/bs_test.html
命令。
(一）开启ECS。
从阿里云体验实验室选择ECS，并启动成功，进入ECS服务器
的命令窗口。
(二）安装 Apache。
在命令窗口执行以下命令:
yum install httpd-y
然后启动Apache服务:
systemctl start httpd.service
打开浏览器,在地址栏中输入弹性IP, 输入ECS公网地址，出现Texting123，说明Apache已安装成功。
(三）下载BootStrap。
从BootStrap.官网http://getbootstrap.com/上下载BootStrap最新版本，目前最新版本为5.1.1版。有两种版本可供下载:预编译版和源码版。为实验方便，这里下载预编译版本Compiled CSs and JS。
(四) 上传BootStrap。
从https://winscp.net/download/WinSCP-5.17.10-Setup.exe下载 winSCP软件，安装完成并打开，登录时，主机名为ECS公网地址，端口号为22，用户名和密码都从阿里云体验实验室左侧窗口复制粘贴，登录成功。将上一步所下载的BootStrap的预编译5.1.1版本上传到阿里云ECS服务器的/var/www/html文件夹下，找到/var/www/html文件夹，预编译5.1.1版本放在桌面的打开Users，找到预编译5.1.1版本文件，右击点击上传。
(五）解压BootStrap。
打开ECS服务器的命令窗口，输入如下命令组进行当前目录转换并安装解压软件unzip。
cd. /varJwww/html
yum install unzip zip
成功后，有时系统还未安装unzip，所以需要输入如下命令，解压BootStrap压缩包。
unzip bootstrap-5.1.1.-dist.zip
解压完成后，在当前目录下会出现一个bootstrap-5.1.1.-dist文件夹，该文件夹下有css和 js两个子文件夹，css中存放的是 BootStrap的格式文件，js存放的是BootStrap的脚本文件。
(六) 建立BootStrap页面。
在ECS 的命令窗口输入如下命令,在/var/www/html文件夹下新建一个页面:
vim/var/www/html/bs_test.html
按i键进入插入模式，输入或粘贴如下内容，<!DOCTYPE html>
<html>
<head>
<title>Bootstrap实例</title><meta charset="utf-8"">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" bootstrap-5.1.1-dist/css/bootstrap.min.css">
<script src=" bootstrap-5.1.1-dist/is/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div>
<h1>这是一个Bootstrap5测试页面</h1>
<p>通过改变窗口大小，可以看到响应式效果!</P>
</div>
<div class="row">
<div class="col-sm-4">
<h3>第一列</h3>
<p>BootStrap很有意思</p>
<p>我要学习BootStrap!</p>I
</div>
<div class="col-sm-4">
<h3>第二列</h3>
<p>BootStrap功能强大</p>
<p>我要学好BootStrap!</p>
</div>
<div class="col-sm-4">
<h3>第三列</h3>
<p>BootStrap是前端开发的利器</p>
<p>我能学好BootStrap!</p>
</div>
</div>
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">示例选项卡
1</a></li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#profile">示例选项卡2</a></li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#contact">示例选项卡
3</a></li></ul>
<div class="tab-content">
<div class="tab-pane fade show active" id=""home">选择卡1的内容在这
</div>
<div class="tab-pane fade" id="profile">选择卡2的内容在这</div>
<div class="tab-pane fade" id="contact">选择卡3的内容在这</div></div>
</body>
</html>
进入页面后点击i进入编辑模式。复制一段代码。此时需要注意，如果使用的是5.0版本，不会出现问题。如果使用的是5.1.1版本，那么出现5.0的地方需要更改。此时就可以正常的使用进入文件中。此时修改完毕后点击esc:保存退出，此时文件保存完毕。以上内容的文字部分均可换成自己喜欢的内容。
需要进行验证:弹性IP/bs_test.html。bootstrap最大的好处是格式为自动调整。现在看到的是页面部分，有兴趣的可以尝试使用词地址在手机内部输入展示页面3列进行展示的灵活之处在于可以随时调整页面的显示。例如将页面变小一些，它的行列数会变小。此时这个实验已经被延迟完毕。需要安装和传递文件的内容较为复杂。
注意:有部分浏览器是不被 bootstrap 所支持的，建议在PC 端使用谷歌( chrome）或火狐( firefox）浏览器。
实验四利用 bootstrap 创建简单页面演示完毕。
五、实验报告要求
(一) 请将上面实验的每一步截图，分别用e4-1.jpg、e4-2.jpg、......、e4-n.jpg保存，并打包提交到学习平台上，压缩包格式统—为zip格式。
(二) 西安交通大学的同学，请将文件命名为“你的学号-bs.zip”，非西安交通大学的同学,请将文件命名为“你的学校-你的姓名-bs.zip”或“你的姓名-bs.zip”。
(三) 所有文档请于实验截止日期前提交。
六、实验补充知识
(一) Apache是世界使用排名第一的 web 服务器软件。可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web服务器端软件之一。Apache快速、可靠并且可通过简单的API扩充,将 Perl/Python等解释器编译到服务器中。
(二) BootStrap默认页面框架。
<!DOCTYPE html>
<html>
