个人觉得,基础知识掌握之后,后面一些简单模块的实现,可以直接参考官方文档 BootStrap官网
文章目录
一、BootStrap 简述
-
BootStrap,基于 HTML、CSS、JavaScript 的前端框架;
-
该框架已经预先定义好了一套 CSS 样式与相对应的 JS 代码;开发人员只需要编写 HTML 结构,添加 BootStrap 固定的 class 样式,就可以完成指定的效果;
-
作用:
BootStrap 使得 Web 开发更加快捷、高效;
BootStrap 支持响应式开发,解决了移动互联网前端开发问题; -
响应式布局:一个网站的展示能够兼容多个终端,而不需要为每个终端单独做一个展示版本;
二、BootStrap 环境搭建
1. 基本模板创建
2. 基本模板讲解
三、布局容器
- BootStrap 必须需要至少一个布局容器,才能为页面内容进行封装和方便的样式控制,相当于一个画板;
- 任意元素使用了布局容器的样式,都会成为一个布局容器,建议使用 div 作为布局容器;
container
:居中,两端有留白;container-fluid
:占据了视口100%宽度;
四、栅格系统(网格系统)
1. 简述栅格系统
- 为了方便在布局容器中进行网页的布局操作;
- BootStrap 提供了一套专门用于响应式开发布局的栅格系统;
- 栅格系统将一行分为 12 列,通过设定元素占用的列数来布局元素在页面上展示的位置;
2. 栅格系统入门
(1)栅格特点:
- 基本的书写方式:
容器 --- 行 --- 列
;
(HTML 表格:定义表格 --- 行 --- 单元格
) - 行:必须包含在
.container
或.container-fluid
中; - 行 使用的样式
.row
,列 使用的样式col-*-*
,元素内容应当放置在 列内; - 栅格参数:
col-屏幕尺寸-占用列数
- 列元素的书写顺序,决定了布局顺序,闲书写的列元素会被先布局到行上;
- 列元素的占用列数,定义元素的大小;
3. 栅格系统特点及深入剖析
- 如果列元素 占用列数 总和 <= 12,这些元素还排在同一行;
- 如果列元素 占用列数 总和 > 12,超出的元素会另起一行排列;
- 行和列可以进行无限嵌套,嵌套方式为:行 — 列 — 行 — 列 …
4. 屏幕尺寸设置
如果没有设置当前屏幕尺寸的样式,默认一个元素占一行;
多个屏幕尺寸共同设置
- 如果设置了一个屏幕尺寸,
比这个尺寸大的屏幕,继承了当前的设置;
比这个尺寸小的屏幕,还是默认一个元素占一行; - 例如:设置了 col-md-4,那么也相当于设置了 col-lg-4,
其他屏幕尺寸均默认为 col-sm-12,col-xs-12;
5. 列偏移
- 列偏移:将对应的列元素向右侧进行推移;
- 例:
col-md-offset-4
;将元素向右偏移4个列的位置;
五、列表
.list-inline
:内联列表;
六、按钮
- 注意:任何 HTML 元素加上以下样式 都会变成按钮;
例子如下:
七、导航条
八、轮播图
- 轮播图 DIV 的定时换图属性:
data-interval="毫秒值"
; - 注意:多个轮播图必须修改轮播图的 ID;
修改完轮播图的 ID 之后,要修改 小圆点 以及 左右按钮 的 ID;
九、排版对齐方式
- 以下排版对齐方式,会将元素内所有内容都进行排版设置;
设置元素居中效果:
十、表单元素
- 水平排列的表单样式;
- 校验状态;