1 、什么是 Bootstrap? Bootstrap 的作用是什么?
Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架.
该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效)
开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现.
作用:
- Bootstrap 使得 Web 开发更加快捷、 高效.
- Bootstrap 支持响应式开发, 解决了移动互联网前端开发的问题.
2、视口的常见设置 (了解)
视口的常见设置 | |
---|---|
width=device-width | 视口的宽度, 大多手机浏览器视口的宽度是980. device-width表示采用设备的宽度 例如: 手机是5.5寸, 那么视口也采用5.5寸宽度 |
initial-scale=1 | 移动设备上, 打开页面时的初始化缩放级别 取值: 1-5 1表示100%, 5表示500% |
minimum-scale=1 | 移动设备上, 页面可以最小缩放的级别 |
maximum-scale=1 | 移动设备上, 页面可以最大缩放的级别 |
user-scalable=no | 移动设备上, 页面禁止缩放 如果设置“user-scalable=no”, 则“minimum-scale”和“maximum-scale”无效 |
3、Bootstrap 环境搭建
4、布局容器
Bootstrap 必须需要至少一个布局容器, 才能为页面内容进行封装和方便的样式控制. 相当于一个面板.
帮助手册位置:
全局 CSS 样式 —> 概览 —> 布局容器
.container | 类用于固定宽度并支持响应式布局的容器. 特点: 居中, 两段留白.
…
|
---|---|
.container-fluid | 类用于 100% 宽度, 占据全部视口 (viewport) 的容器.
…
|
5、什么是响应式布局? 响应式布局解决的问题?
响应式布局: 一个网站的展示能够兼容多个终端 (手机、iPad、PC 等), 而不需要为每一个终端单独做一个展示页面.
此概念专为解决移动互联网浏览诞生的.
响应式布局, 使得网站仅适用一套样式, 就可以在不同分辨率下展示出不同的舒适效果, 大大降低了网站开发维护成本, 并且能带给用户更好的体验性.
6、简述栅格系统
为了方便在布局容器中进行网页的布局操作.
Bootstrap 提供了一套专门用于响应式开发布局的栅格系统.
栅格系统将一行分为 12 列, 通过设定元素占用的列数来确定布局元素在页面上的展示位置.
帮助手册位置:
全局 CSS 样式 —> 栅格系统
作用:
可以让开发人员更加轻松进行网页布局, 并且轻松进行响应式开发.
注意事项:
- 一个 row 下, 如果设置的 col 列数总和小于等于 12, 那么该 row 下元素在一行排列.
- 一个 row 下, 如果设置的 col 列数综合大于 12, 那么超出的元素会另起一行排列.
- 行和列可以进行无限嵌套, 嵌套方式必须为 列—行---列—行······
7、栅格系统的特点及入门案例
栅格系统的特点:
- 行 (row) 必须包含在 .container (固定宽度) 或 .container-fluid (100% 宽度)中.
- 行使用的样式 .row, 列使用的样式 .col-尺寸-数字 元素内容应当放置于列(column)内.
- 基本的书写方式必须是: 容器—行---列
栅格系统的参数:
col-屏幕尺寸-占用列数
为了方便显示元素大小, 我们为展示元素都赋予了相同样式:
height: 100px;
border: 1px solid red;
8、屏幕尺寸简述
尺寸 | 对应 |
---|---|
large: lg | 大屏幕, 一般PC尺寸 |
medium: md | 中等屏幕, 小PC尺寸 |
small: sm | 小屏幕, iPad尺寸 |
x-small: XS | 超小屏幕, 智能手机尺寸 |
设置屏幕尺寸时的注意事项:
若设置了某个屏幕尺寸的样式, 那么该尺寸对应的屏幕或比其尺寸大的屏幕显示会遵循该设置, 但比该尺寸小的屏幕, 会默认一个元素占 12 列的设置.
例如:
设置了 col-md-4, 那么相当于也设置了 col-lg-4.
其他屏幕尺寸均默认为 col-sm-12, col-xs-12.
9、不同设备的尺寸大小
10、列偏移
通常情况下我们需要将元素居中显示, 需要左边空出一定的空白区域, 这里我们就可以使用列偏移来达到效果.
.co l-屏幕尺寸-offset-数字 | 在指定屏幕尺寸下, 向右偏移 * 个列 |
---|---|
11、列表
Bootstrap 同样提供了实用的列表样式供开发人员使用.
帮助手册位置:
全局 CSS 样式 —> 排版 —> 列表
.list-inline | 将列表所有元素放置一行. |
---|---|
12、按钮
Bootstrap 提供了丰富的按钮样式供开发人员使用.
帮助手册位置:
全局 CSS 样式 —> 按钮
13、导航条
Bootstrap 已经提供了完整的导航条实例, 通常情况下, 我们仅需进行简单的修改即可使用.
帮助手册位置:
组件 —> 导航条
14、轮播图
Bootstrap 已经提供了完整的轮播图实例, 通常情况下, 我们仅需进行简单修改即可.
帮助手册位置:
Javascript插件 —> Carousel
轮播图 div 的定时换图属性: data-interval=“毫秒值”
注意: 多个轮播图必须修改轮播图的 ID
15、排版-对齐方式
Bootstrap 提供统一的排版方式设置, 方便开发人员对内容板式进行调整.
帮助手册位置:
全局 CSS 样式 —> 排版 —> 对齐
.text-left | 使元素内容靠左显示 |
---|---|
.text-center | 使元素内容居中显示 |
.text-right | 使元素内容靠右显示 |
16、表单元素
Bootstrap 同样提供了丰富的表单控件供开发人员来选择.
帮助手册位置:
全局 CSS 样式 —> 表单
17、补充
Bootstrap 分为完整版和压缩版.
完整版用于源码学习, 但因为文件大小问题, 不适合网络间传递.
压缩版用于网络分布, 压缩版和完整版的唯一区别, 仅为压缩版将代码间的大量空格和回车换行删除掉了, 节约了大量的空间, 功能上完全相同, 适用于网络间快速传递. 但因为没有了空格和换行, 源代码可读性极低.