HTML及前端框架
1. 创建资源
开始实验之前，您需要先创建实验相关资源。
- 在实验室页面，单击创建资源。
- （可选）在实验室页面左侧导航栏中，单击云产品资源列表，可查看本次实验资源相关信息（例如IP地址、子用户信息等）。
说明：资源创建过程需要3～5分钟（视资源不同开通时间有所差异，ACK等资源开通时间较长）。完成实验资源的创建后，您可以在云产品资源列表查看已创建的资源信息，例如：子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。
实验环境一旦开始创建则进入计时阶段，建议学员先基本了解实验具体的步骤、目的，真正开始做实验时再进行创建。
资源创建成功，可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息
2. 实验步骤
- 开启ECS。选择实验“HTML及前端框架”，并启动成功，进入ECS服务器的命令窗口。
- 安装Apache。
在命令窗口执行以下命令：
yum install httpd –y
然后启动Apache服务：
systemctl start httpd.service
打开浏览器，在地址栏中输入弹性IP，出现如图1所示页面，说明Apache已安装成功。
图1 Apache安装成功测试页面
- 获取BootStrap。
从阿里云OSS上获取BootStrap，执行如下命令：
cd /var/www/html wget https://universitylabfile.oss-cn-hangzhou.aliyuncs.com/bootstrap-5.2.2-dist.zip
- 解压BootStrap。
打开ECS服务器的命令窗口，输入如下命令组进行当前目录转换并安装解压软件unzip。
yum install unzip zip
成功后，再输入如下命令，解压BootStrap压缩包。
unzip bootstrap-5.2.2-dist.zip
解压完成后，在当前目录下会出现一个bootstrap-5.2.2-dist文件夹，该文件夹下有css和js两个子文件夹，css中存放的是BootStrap的格式文件，js存放的是BootStrap的脚本文件。整个结构如图2所示。
图2 解压完成后的bootstrap目录
- 建立BootStrap页面。
在ECS的命令窗口输入如下命令，在/var/www/html文件夹下新建一个页面：
vim 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.2.2-dist/css/bootstrap.min.css"> <script src="bootstrap-5.2.2-dist/js/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> </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>
请注意：以上内容的文字部分均可换成自己喜欢的内容。
编辑完成后按ESC，再输入“:wq”保存退出。
在浏览器的地址栏中输入：弹性IP/bs_test.html，可以看到页面效果如图3所示。更变浏览器窗口大小，页面内容会跟随调整，如图4所示。手机端的浏览效果分别如图5和6所示。
注意：有部分浏览器是不被bootstrap所支持的，建议在PC端使用谷歌（chrome）或火狐（firefox）浏览器。
图3 bootstrap页面显示效果
图4 改变窗口大小后的页面显示效果
图5 bootstrap测试页面的手机端浏览效果
图6 bootstrap测试页面手机端的横版浏览效果
3. 实验要求
- 请将上面实验的每一步截图，分别用e3-1.jpg、e3-2.jpg、……、e3-n.jpg保存，至少提交5张截图，将截图打包提交到学习平台上，压缩包格式统一为zip格式。
- 西安交通大学的同学，请将文件命名为“你的学号-bs.zip”；非西安交通大学的同学，请将文件命名为“你的学校-你的姓名-bs.zip”或“你的姓名-bs.zip”。
- 所有文档请于实验截止日期前提交。
实验链接：https://developer.aliyun.com/adc/scenario/0d249234802a4c85a85ecd3a4bfb7317
