Bootstrap基础知识

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 分为完整版和压缩版.

​ 完整版用于源码学习, 但因为文件大小问题, 不适合网络间传递.

​ 压缩版用于网络分布, 压缩版和完整版的唯一区别, 仅为压缩版将代码间的大量空格和回车换行删除掉了, 节约了大量的空间, 功能上完全相同, 适用于网络间快速传递. 但因为没有了空格和换行, 源代码可读性极低.