1. bootstrap概述
1.1 什么是bootstrap?bootstrap的作用?
Bootstrap,基于HTML、CSS、JAVASCRIPT的前端框架。
该框架已经预定了一套CSS样式和与样式对应的JS代码。(对应的样式由对应的特效)
开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现。
作用:
① BootStrap使得Web开发更加快捷
② BootStrap支持响应式开发,解决了移动互联网前端开发问题
1.2 什么是响应式布局?响应式布局解决的问题?
- 响应式布局:一个网站的展示能够兼容多个中断(手机、ipad、PC等),而不需要为每个终端单独做一个展示版本。
- 此概念专为解决移动互联网浏览而诞生的。
响应式布局,使得网站仅使用一套样式,就可以在不同分辨率下展示出不同的舒适效果,大大降低了网站开发维护成本,并且能够带给用户更好的体验性
2.bootstrap环境搭建
2.1 下载资源
2.2 目录结构
2.3 bootstrap的通用简介模板
viewport:视口,即浏览器上网页的可视区域
视口作用:用于移动设备将大型页面进行比例缩放显示
视口的常见设置(了解):
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必须需要至少一个布局容器,才能为页面内容进行封装和方便的样式控制。
相当于一个画板。
帮助手册位置:全局CSS样式 -> 概览 -> 布局容器
任意元素使用了布局容器,都会成为一个布局容器,建议使用div作为布局容器
.container | 类用于固定宽度并支持响应式布局的容器 【特点】:居中,两端留白 <div class="container">...</div> |
---|---|
.container-fluid | 类用于100%宽度,占据全部视口(viewport)的容器。<div class="container-fluid>...</div> |
4. 栅格系统
4.1 简述栅格系统
为了方便在布局容器中进行网页的布局操作。
BootStrap提供了一套专门用于响应式开发布局的栅格系统。
栅格系统将一行分为12列,通过设定元素占用的列数来布局元素在页面上的展示位置。
帮助手册位置:全局CSS样式------栅格系统
作用:可以让开发人员更加轻松进行页面布局,并且轻松进行响应式开发。
4.2 栅格系统的特点及入门案例
- 栅格特点
“行(row)”必须包含在.container(固定宽度)或.container-fluid(100%%宽度)中
行使用样式“.row”列使用样式“col-*-*
” 元素内容应当放置于“列(column)”内
基本的书写方式必须试:容器—行---列
类似于HTML表格:定义一个表格—行---单元格 - 栅格参数:“col-屏幕尺寸-占用列数”
列元素的书写顺序,决定了布局顺序,先写的列元素会被先布局到行上。
列元素的占用列数,定义列元素的大小
注意:
- 一个row下,如果设置的col列数总和小于等于12,那么该row下元素在一行排列;
- 一个row下,如果设置的col列数总和大于12,那么超出的元素会另起一行排列;
- 行和列可以进行无限嵌套,嵌套方式必须为 列—行---列—行……
- 一个row元素下,有12列
4.3 栅格屏幕尺寸设置
屏幕尺寸简述:
- large:lg ------大屏幕,一般PC尺寸
- medium:md ------中等屏幕,小PC尺寸
- small:sm ------小屏幕,ipad尺寸
- x small:xs ------嘲笑屏幕,普通手机屏幕
为了方便显示元素大小,我们为展示元素都赋予了相同样式
4.4 设置屏幕尺寸时的注意事项
若设置某个屏幕尺寸的样式,那么比该尺寸大的屏幕,会沿用该设置;比该尺寸小的屏幕,会默认一个元素占12列的设置。
例如:设置了 col-md-4,那么相当于也设置了col-lg-4。其他屏幕尺寸均默认为col-sm-12,col-xs-12
4.5 列偏移
通常情况下我们需要将元素居中显示,需要左边空出一定的空白区域,这里我们就可以使用列偏移来达到效果。
col-屏幕尺寸-offet-* | 在指定屏幕尺寸下,向右偏移*个列 |
---|
<div class="col-xs-4 col-lg-offset-4" style="border: 1px solid red;">
1
</div>
5. 响应式工具
为针对性地在移动页面上展示和隐藏不同内容,bootStrap提供响应式工具。
为了让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或者显示某些元素
帮助手册位置:全局CSS样式—响应式工具
<div class="col-xs-4 visible-lg" style="border: 1px solid red;">
2
</div>
6.列表
BootStrap同样提供了实用的列表样式供开发人员使用
帮助手册位置:全局CSS样式—排版—列表
list-inline 将列表所有元素放置于一行
示例:
<ul class="list-inline">
<li>小马利亚</li>
<li>小马谷</li>
<li>Rarity</li>
</ul>
7.按钮
BootStrap提供了丰富地按钮样式供开发人员使用。
帮助手册位置:全局CSS样式—按钮
8.导航条
BootStrap已经提供了完整地导航条实例,通常情况下,我们仅需要进行简答修改即可使用。
帮助手册位置:组件—导航条
9.轮播图
BootStrap已经提供了完整地轮播图实例,通常情况下,我们仅需要简单修改即可使用。
帮助手册位置:JavaScript插件—Carousel
轮播图DIV地定时换图属性:
data-interval="毫秒值"
注意:多个轮播图必须修改轮播图的ID,小圆点中的及左右控制按里的id也要改
10.排版-对齐方式
BootStrap提供统一的排版方式设置,方便开发人员对内容版式进行调整
帮助手册位置:全局CSS样式—排版—对齐
会将元素内所有的内容都进行排版设置
text-left 居左显示
text-center
text-right
示例:
<div class=“text-center">
<img src="img/bc.jpg"/>
</div>
11.表单元素
全局CSS样式—表单
12.分页条
组件—分页
补充BootStrap:
如果对某个<li>
设置了禁用,那么最好把对应标签的href也删除,这样最为保险
13.综合案例
13.1 案例需求
请做出如图所示的页面。
要求:
1.页面顶部的三部分在PC屏幕上显示为一行,在移动设备屏幕上显示为一部分一行
2.导航条在大屏幕展示全部内容,在移动设备上需要将内容能够折叠/展开;
3.用户名/密码/确认密码不能为空,密码需要和确认密码一致,如果不符合,组织注册操作,并将错误信息展示给用户看
13.2 案例分析
利用栅格系统