任务3 Bootstrap栅格系统.doc
需积分: 5 6 浏览量
2022-11-01
09:19:05
上传
评论
收藏 270KB DOC 举报
1
安徽机电职业技术学院实验报告
课程名称
响应式框架技术应用
实验名称
任务 3 Bootstrap 栅格系统
班
级
姓名
学号
--
实验时间
__年_月_日
地点
指导教师
孙宇
成绩
一、实验目的
1. 掌握 Bootstrap 栅格系统的基本使用方法；
2. 掌握栅格系统中的布局容器使用方法；
3. 掌握栅格系统的参数的使用方法；
4. 掌握栅格系统中的列嵌套和列偏移的使用方法；
二、实验内容
任务一：使用 Bootstrap 栅格系统实现招商银行页面布局，并完成页面内容。
1. 准备 Bootstrap 框架。
登录 Bootstrap 网站，下载 Bootstrap 预编译的文件。
2. 创建文件夹结构
选择路径，创建 bank 目录，作为项目目录。在 bank 目录中创建 bootstrap、images 和 css
三个文件夹，具体如下：
（1）bootstrap 文件夹用来存放预编译的 Bootstrap 相关文件（css 和 js 目录）。
（2）images 文件夹用来存放招商银行 logo 图片。
（3）css 文件夹用来存放自定义的 css 样式文件。
3.创建 HTML 结构
在 bank 文件夹中创建 index.html，编写 HTML 代码结构。
编写 HTML 代码结构，设置视口，视口的宽度和设备一致，默认的缩放比例和 PC 端一致，用
评论0
最新资源