框架布局

UI框架的分类

• PC端UI框架
• 移动端UI框架
• 基于逻辑类封装UI框架
• 市面上的开发框架是非常之多的，有的类型框架甚至有几千种之多，对于开发者们来说是学不完 所以我们学习这些框架只要学习如何使用，以及如何快速开发就足以了 我们后面主要是介绍Bootstrap主流框架为主,其他的同类型框架希望大家能够举一反三

PC端UI框架

• Bootstrap
• LayUI
• Amaze UI
• ZUI

移动端UI框架

• MUI
• WeUI(微信端)
• framework7
• Ionic

基于逻辑类封装UI框架

• Element UI
• Vant
• uView
• View UI

常用UI框架

我们在做页面布局的时候，往往需要快速开发，那么显然用纯HTML + CSS 布局速度会比较慢
所以我们可以选用UI框架来进行布局

选用UI框架进行布局的优缺点
    优点：
        快速开发，很多UI元素已经被定义好了
        平时花一个上午做好的界面，利用框架后我们可以缩减到1-2小时内就能完成

    缺点：
        样式风格比较统一固定，若要改成自己的结构需要覆盖框架的样式
        所有需要更深的样式层级来覆盖


UI框架的组成部分
    1、常见的UI元素
        其实就是html标签的封装

    2、常用的页面组件
        页面当中经常出现的模块例如：字体图标、导航条、面包屑导航、时间轴、分页、进度条...等等

    3、常用的页面特效
        页面当中经常出现的特效例如：懒加载、选项卡、轮播图、弹出框、下拉菜单、手风琴....等等

Bootstrap

于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷，提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成

官网：https://v3.bootcss.com/

栅格系统

栅格系统主要用于响应式布局最为常见，系统会自动将我们网页看作是一行最多12列，通过多种组合搭配来完成响应式的布局效果

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">列</div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">列</div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">列</div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">列</div>
    <div>
</div>

栅格参数

流式布局容器

container 固定宽度居中
container-fluid    100%宽度

表格

<table class="table table-bordered">
  <tr>
   <td>单元格<td>
   <td>单元格<td>
  </tr>
  <tr>
   <td>单元格<td>
   <td>单元格<td>
  </tr>
</table>

颜色状态类

表单

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" placeholder="用户名" />
  </div>

  <div class="form-group">
    <label for="password">密码</label>
    <input type="text" class="form-control" id="password" placeholder="密码" />
  </div>

  <div class="checkbox">
    <label>
      <input type="checkbox">记住密码
    </label>
  </div>

  <button type="submit" class="btn btn-default">登录</button>
</form>

按钮

<a class="btn btn-default" href="#" role="button">链接按钮</a>
<button class="btn btn-default" type="submit">Button按钮</button>
<input class="btn btn-default" type="button" value="Input按钮" />
<input class="btn btn-default" type="submit" value="Submit按钮" />

按钮尺寸

<button type="button" class="btn btn-primary btn-lg"> 大按钮 </button>
<button type="button" class="btn btn-primary"> 默认尺寸 </button>
<button type="button" class="btn btn-primary btn-sm"> 小按钮 </button>
<button type="button" class="btn btn-primary btn-xs"> 超小尺寸 </button>

响应式图片

<img src="..." class="img-responsive" />

图片形状

<img src="..." alt="圆角" class="img-rounded" />
<img src="..." alt="圆形" class="img-circle" />
<img src="..." alt="缩略图" class="img-thumbnail" />

素材下载

布局模板文件