常用标签元素样式


Backman 支持所有 Bootstrap3 的样式与功能,但是却又与 Bootstrap 有所不同,比如许多元素默认就被带上了样式,因此很多地方不再需要记忆繁多的 Bootstrap 样式名与页面结构,从而降低了新手的上手条件也提高了平均开发效率

标题


<h1><h6> 标签

h1.Heading 标题

h2.Heading 标题

h3.Heading 标题

h4.Heading 标题

h5.Heading 标题
h6.Heading 标题

段落


<p>标签

这是一段文字段落


水平线


<hr>标签


行内代码


<code>标签

javascript alert('Hello World!');

链接


<a>标签, 带有默认颜色,悬浮颜色变浅

这是一个a标签链接

列表


<ul><li>无序列表标签,默认样式如下:

<ol><li>有序列表标签,默认样式如下

  1. 云渠道
  2. 云成交
  3. 云到访
  4. 云报备
  5. 鑫房宝

通过添加.list-unstyled 可取消列表样式,样式效果如下:
说明 该样式只影响直接子元素

通过添加.list-inline 可以让列表内联,样式效果如下:
说明 该样式只影响直接子元素


表格


<table> 标签,表格文本默认居中

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

支持大部分table属性:

Header Header2 Header3
Data Data Data
Data
Data Data Data

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

通过添加 .table-condensed 可以让表格更加紧凑,单元格中的内补(padding)均会减半。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

通过添加 .table-unborder 可以让表格无边框

item content
姓名 遇善房
地址 时代TIT广场

通过在外层包囊 <div class="table-responsive"></div> 可以让表格具有响应式特性,也就是说内容较多的表格在屏幕较小无法友好的显示全部内容时,在下方显示左右滚动条,让表格可以左右滚动!
说明 该样式由 Bootstrap 提供,且已做兼容 Backman 处理

# First Name Last Name Username age email job join-time address
1 Mark1 Otto @mdo 23 mdo@hotmail.com Customer Service Specialist 2016/11/11 Rome1232, Youth building, No.34 West Beisanhuan Road, Beijing, China
2 Jacob Thornton @fat 27 thornton@163.com Senior PHP Engineer 2016/11/11 Room 403, No.37, SiFan Residential Quarter, BaoShan District
3 Larry the Bird @twitter 26 Larry@gmail.com Web Software Engineer 2016/11/11 Room 204, building No.102, East TaiShan Residential, BaoYin, JiangSu

注意 当给表格添加样式 .table 时,将显示为 Bootstrap3 的表格效果。两种表格显示模式相互独立互不影响!

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter