WEE

WEE

  • 首页
  • 起步
  • 全局样式
  • 组件库

›Form

WEEUI

  • About 关于
  • Installation 安装
  • Theme 主题

Basic

  • Grid 栅格
  • Container 布局容器
  • Layout 布局
  • Colors 色彩
  • Font 字体
  • Icon 图标

Form

  • Button 按钮
  • Checkbox 按钮
  • Input 输入框
  • inputnumber 输入框
  • select 下拉选择
  • Cascader 级联选择
  • switch 开关
  • slider 滑动输入条
  • upload 上传
  • rate 评分
  • Transfer 穿梭框
  • Pagination 分页
  • avatar 头像
  • form 表单

Notice

  • Alert 警告
  • message 消息提示
  • modal 对话框
  • loading 等待
  • notification 通知

Navigation

  • nav 导航
  • tabs 选项卡
  • dropdown 下拉菜单
  • steps 步骤向导
  • breadcrumb 面包屑

Others

  • table 表格
  • tooltip 文字提示
  • popover 弹窗框
  • card 卡片
  • timeline 时间轴
  • image 图片
  • carousel 走马灯
  • collapse 折叠面板
  • charts 图表

Button 按钮

按钮使用

按钮标签分为:

<a> 、<button> 、<input type="submit">、<input type="reset">

Anchor
<a class="wee-btn">Anchor</a>
<button class="wee-btn">Button</button>
<input class="wee-btn" type="submit" value="Submit input">
<input class="wee-btn" type="reset" value="Reset input">

按钮颜色

<button class="wee-btn">default</button>
<button class="wee-btn wee-btn-light">light</button>
<button class="wee-btn wee-btn-dark">dark</button>
<button class="wee-btn wee-btn-link">btn-link</button>
<button class="wee-btn wee-btn-primary">primary</button>
<button class="wee-btn wee-btn-secondary">secondary</button>
<button class="wee-btn wee-btn-success">success</button>
<button class="wee-btn wee-btn-info">info</button>
<button class="wee-btn wee-btn-warning">warning</button>
<button class="wee-btn wee-btn-danger">danger</button>

按钮尺寸

按钮有大、中、小三种尺寸。

  • .wee-btn-lg 大按钮
  • .wee-btn-sm 小按钮

分别把按钮设为大、小尺寸,默认为常用中级按钮。

大按钮(lg) Primary Success

默认按钮 Primary Success

小按钮(sm) Primary Success

<p>
  <span class="wee-btn wee-btn-lg">大按钮(lg)</span>
  <span class="wee-btn wee-btn-lg wee-btn-primary">Primary</span>
  <span class="wee-btn wee-btn-lg wee-btn-success">Success</span>
</p>
<p>
  <span class="wee-btn">默认按钮</span>
  <span class="wee-btn wee-btn-primary">Primary</span>
  <span class="wee-btn wee-btn-success">Success</span>
</p>
<p>
  <span class="wee-btn wee-btn-sm">小按钮(sm)</span>
  <span class="wee-btn wee-btn-sm wee-btn-primary">Primary</span>
  <span class="wee-btn wee-btn-sm wee-btn-success">Success</span>
</p>

按钮类型

按钮类型:默认按钮、胶囊按钮、矩形按钮、圆形按钮、实心按钮、空心按钮、Block按钮。

默认按钮

<button class="wee-btn">default</button>
<button class="wee-btn wee-btn-primary">primary</button>
<button class="wee-btn wee-btn-secondary">secondary</button>
<button class="wee-btn wee-btn-success">success</button>
<button class="wee-btn wee-btn-info">info</button>
<button class="wee-btn wee-btn-warning">warning</button>
<button class="wee-btn wee-btn-danger">danger</button>
<button class="wee-btn wee-btn-light">light</button>
<button class="wee-btn wee-btn-dark">dark</button>

胶囊按钮

<button class="wee-btn wee-btn-round">default</button>
<button class="wee-btn wee-btn-primary wee-btn-round">primary</button>
<button class="wee-btn wee-btn-secondary wee-btn-round">secondary</button>
<button class="wee-btn wee-btn-success wee-btn-round">success</button>
<button class="wee-btn wee-btn-info wee-btn-round">info</button>
<button class="wee-btn wee-btn-warning wee-btn-round">warning</button>
<button class="wee-btn wee-btn-danger wee-btn-round">danger</button>
<button class="wee-btn wee-btn-light wee-btn-round">light</button>
<button class="wee-btn wee-btn-dark wee-btn-round">dark</button>

矩形按钮

<button class="wee-btn wee-btn-square">default</button>
<button class="wee-btn wee-btn-primary wee-btn-square">primary</button>
<button class="wee-btn wee-btn-secondary wee-btn-square">secondary</button>
<button class="wee-btn wee-btn-success wee-btn-square">success</button>
<button class="wee-btn wee-btn-info wee-btn-square">info</button>
<button class="wee-btn wee-btn-warning wee-btn-square">warning</button>
<button class="wee-btn wee-btn-danger wee-btn-square">danger</button>
<button class="wee-btn wee-btn-light wee-btn-square">light</button>
<button class="wee-btn wee-btn-dark wee-btn-square">dark</button>

圆形按钮

<Button type="button" class="wee-btn wee-btn-circle">W</Button>
<Button type="button" class="wee-btn wee-btn-primary wee-btn-circle">A</Button>
<Button type="button" class="wee-btn wee-btn-outline-primary wee-btn-sm wee-btn-circle">R</Button>
<Button type="button" class="wee-btn wee-btn-danger wee-btn-lg wee-btn-circle">Z</Button>

空心按钮

<button class="wee-btn">default</button>
<button class="wee-btn wee-btn-outline-primary">primary</button>
<button class="wee-btn wee-btn-outline-secondary">secondary</button>
<button class="wee-btn wee-btn-outline-success">success</button>
<button class="wee-btn wee-btn-outline-info">info</button>
<button class="wee-btn wee-btn-outline-warning">warning</button>
<button class="wee-btn wee-btn-outline-danger">danger</button>
<button class="wee-btn wee-btn-outline-light">light</button>
<button class="wee-btn wee-btn-outline-dark">dark</button>

Block按钮

<button class="wee-btn wee-btn-primary wee-btn-block">primary</button>
<button class="wee-btn wee-btn-outline-success wee-btn-round wee-btn-block">success</button>
<button class="wee-btn wee-btn-danger wee-btn-square wee-btn-block">danger</button>
← Icon 图标Next →
  • 按钮使用
  • 按钮颜色
  • 按钮尺寸
  • 按钮类型
    • 默认按钮
    • 胶囊按钮
    • 矩形按钮
    • 圆形按钮
    • 空心按钮
    • Block按钮
WEE
Resource
WeeKit——Web UI组件设计库React-wee——React版本组件库Muss——基础SASS库,快速编写CSS样式Zebra——前端JS基础类库Universal-website——通用建站模板Rainbow——Web渐变配色方案
Charts
React-echarts-packetRechartjs
More
BlogGitHubStar
Facebook Open Source
Copyright © 2020 WEE·ZHIKING