列表 表单 加载中 选项卡 文本 按钮 对话框 Flex布局

列表

文字列表

  • 标题标题标题标题标题标题标题标题

  • 标题标题标题标题标题标题标题标题

链接列表

右边显示自定义图标

右边显示badge

注意: Bootstrap badge用作未读消息数量,暂时只有一种颜色

右边显示文字,如状态

li标签,但是可以点击

  • 标题标题标题标题标题标

  • 标题标题标题标题标题标

换行

  • 不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行

  • 一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行

  • 两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行

标题和内容

标题和左边图片

注意: 需指定图片父元素宽度

标题和左边大图

标题和右边图

标题和圆形图片

注意: 需指定图片父元素宽度

标题,内容和图片

控制只有标题和图片可点击

  • 只有标题和图片可以点击

    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    标题标题标题标题标题标题标题标题标题

  • 只有标题和图片可以点击

    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    标题标题标题标题标题标题标题标题标题

列表项目激活状态

列表分割线 .list-divider

list-indented

各类样式汇总

常见类型
列表标题
开始列表内容
标题内容组合
没有标题和文本
没有标题和文本

标题标题标题标题标题标题标题标题

默认的左右结构（最常见的设置列表）
标题标题
文本文本
标题标题
标题下面有帮助文本
文本文本
展示内容的描述列表
左名称
右详情
左名称
名称下面有进一步说明
右详情
展示内容的详细列表
上名称上名称上名称上名称上名称上名称上名称上名称上名称上名称上名称上名称上名称
下文本
标题
文本
整体右边有状态
标题 标题右边有状态
文本
标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
整体右边有状态
标题标题
标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
整体右边有状态
标题标题
标题标题
文本文本
整体右边有状态
展示名称和详情
左名称
右详情
左名称左名称
右详情右详情右详情右详情右详情右详情右右详情右详右
左名称
右详情右详情右详情右详情右详情右详情右详情右详情 右详情右详情右详情右详情右详情右详情右详情右详情
标题 标题右边有状态
文本
表单列表混合
退款说明退款说明退款说明退款说明退款说明退款说明退款说明退款说
元
退款说明
明退款说明退款说明退款
标题标题标题标题标题标题标题标题标题
标题标题标题
小的列表
  • 期限说明：
    99月
  • 产品规模：
    9000000000万元
  • 收益分配方式：
    月
  • 募集账户：
    123123123
  • 募集账户名称：
    xx
  • 开户行：
    光大银行

小缩略图+链接+简介列表

表单

支持控件概览

基础设置
基础设置
详细设置
元
清空消息列表
单独一行文本

Radio

性别

Checkbox,每个一行

爱好

Checkbox带左边label

Checkbox

开关

表单命令项

清空消息列表
清空所有聊天记录
清空缓存数据

表单输入项

整行

其他风格按钮

Inset form

Horizontal form

表单输入项2

表单输入项3

右边按钮

只读

加载中

加载中

选项卡



Tab 1 Tab 2 Tab 3

文本

Fusce dapibus, tellus ac cursus.

Nullam id dolor id nibh.

Duis mollis, est non commodo.

Maecenas sed diam eget risus.

Etiam porta sem malesuada.

Donec ullamcorper nulla non.

按钮

对话框

$.alert

$.confirm

alert

confirm

带标题

Flex布局

justify-center

1
2
3
4
5
6
7
8

align-center

1
2
3

align-center

1
2
3

.flex-center

1
2
3
TOP