UI框架

UI框架概念:

  • 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。

作用:

  • 基于框架开发，效率高，稳定性高。

目标：

  • 使用 BootStrap框架快速开发响应式网页

image.pngimage.pngimage.png

Bootstrap使用步骤

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

1. 下载

首页 → BootStrap3中文文档 → 下载BootStrap
image.png

2. 使用

1. 引入： BootStrap提供的CSS代码

  1. <link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

2. 调用类：使用BootStrap提供的样式

  • container：响应式布局版心类

BootStrap栅格系统

image.png

  • 栅格化是指将整个网页的宽度分成若干等份
  • BootStrap3默认将网页分成12等份 |
    | 超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 | | —- | —- | —- | —- | —- | | 响应断点 | <768px | >=768px | >=992px | >=1200px | | 容器宽度 | xs | sm | md | lg | | 类前缀 | col-xs-* | col-sm-* | col-md-* | col-lg-* | | 列数 | 12 | 12 | 12 | 12 | | 列间隙 | 30px | 30px | 30px | 30px |
  • .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
  • .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
  • 分别使用.row类名和.col类名定义栅格布局的行和列。

注意:
1. container类自带间距15px;
2. row类自带间距-15px
image.png

全局样式

掌握BootStrap手册用法，使用全局CSS样式美化标签
分类：

  • 布局样式
  • 内容美化样式

手册用法：
BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类
image.png

<button class="基本样式类  具体样式类">成功</button>

布局类：表格

  • table : 基本类名, 初始化表格默认样式
  • table-bordered : 边框线
  • table-striped : 隔行变色
  • table-hover : 鼠标悬停效果
  • table-responsive : 表格宽溢出滚动

image.png

美化内容类：按钮

  • btn : 基准样式
  • btn-info; btn-success : 设置按钮背景色
  • btn-block : 设置按钮为块元素
  • btn-lg; btn-sm; btn-xs : 设置按钮大小

image.png

布局类：表单

  • form-control : 设置表单元素input, select, textarea的样式
  • checkbox 和 radio : 设置复选框和单选框的样式
  • form-inline : 设置表单元素水平排列
  • disabled : 设置表单禁用状态样式
  • input-lg; input-sm, input-sm : 设置表单元素的大小

image.png

美化内容类：图片

  • img-responsive: 图片自适应
  • img-rounded : 图片设置圆角
  • img-circle : 图片设置正圆
  • img-thumbnail : 图片添加边框线

image.png

布局类：辅助类

  • pull-right : 强制元素右浮动
  • pull-left : 强制元素左浮动
  • clearfix : 清除浮动元素的影响
  • text-left : 文本左对齐
  • text-right : 文本右对齐
  • text-center : 文本居中对齐
  • center-block : 块元素居中

    布局类：响应式工具

    （不同屏幕尺寸隐藏或显示页面内容）
    image.png

组件

  • BootStrap提供的常见功能，包含了HTML结构和CSS样式。

30px

  • 引入BootStrap样式
  • 复制结构，修改内容

image.png

使用Glyphicons字体图标实现网页中的图标效果
Glyphicons字体图标的使用步骤

  • HTML页面引入BootStrap样式文件
  • 准备字体文件 (注意路径)
  • 空标签调用对应类名
  • glyphicon
  • 图标类

插件的概念及使用方法

学习路径
1. 了解插件
2. 插件分类
3. 插件使用

使用BootStrap插件实现常见的交互效果
思考

  • 只有HTML和CSS的下拉菜单，单击后能弹出子菜单吗？

image.png

插件

  • BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript

image.png

插件的使用步骤

  • 引入BootStrap样式
  • 引入js文件：jQuery.js + BootStrap.min.js

image.png
复制HTML结构, 并适当调整结构或内容

定制步骤

  • 导航菜单 → 定制
  • 输入目标变量值
  • 编译并下载，使用定制后的框架

image.png