04-BootStrap常用高级样式

一、列表元素

1.无序列表：ul>li

2.有序列表：ol>li

3.内联列表：ul.list-inline>li

解释：添加 list-inline 属性即可使列表达到 == display：inline-block的效果。

3.自定义列表：dl>dt+dd

样式: .dl-horizontal可以使标题和描述排在一行。

二、表格元素

1、表格实现：table.table

2、表格样式：

• 条纹表格：.table-striped
• 边框表格：.table-bodered

3、表格效果：

1. 鼠标悬停：.table-hover - 悬停背景加深
2. 紧缩表格：.table-condensed - 边距减半

4、表格行，列背景：

1. 灰色 - .active
2. 绿色 - .success
3. 蓝色 - .info
4. 黄色 - .warning
5. 红色 - .danger

4、移动端响应式表格：大于768px时，水平条消失。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

三、表单元素

1、表单的基本类

• .form-group

  Boostarp表单写法，将每个的表单控件进行分组。相当于row。

• .form-control

  type:input、type:textarea 和 type:select等宽度设置为100%。

推荐label包裹在form-control中和组件一起获取最好的效果。
2、表单基本样式

1. 默认表单 - 从上往下布局。Label和控件垂直布局。

2. 水平表单：.form-horizontal

   • 可以将 Label 标签和控件组水平并排布局。
   • 需要和栅格系统配合，form-group即为row。

3. 行内表单：.form-inline

   • 将表单控件全变成一行。such as:list-inline

3、表单边框颜色

1. .has-error - 红色边框
2. .has-warning - 黄色边框
3. .has-success - 绿色边框

4、表单的Label标签

1. 标识类：.control-label

   当form表单的样式为form-horizontal时可以时使得Lable和表单控件进行垂直居中

2. 使用.label-info、danger、success等属性进行设置label的背景颜色。

5、表单控件尺寸

​ 控件高度：
​ 1..input-lg:大型
​ 2.默认高度。
​ 3..input-sm:小型

​ 控件宽度：
​ 建议外层包含一个div然后使用栅格系统的列设置。
​ 比如：col-md-12

5、表单组大小设置

​ 简化重复单个设置控件大小，直接一组表单设置尺寸。
​ 1.大型：class = “form-group form-group-lg”
​ 2.小型：class = “form-group form-group-sm”
​ (如果不添加form-group的话将会没有margin效果，控件会没有边距)

6、单选框和复选框

​ 单选框： - 基本承载容器标识 .radio
​ 复选框： - 基本承载容器标识 .checkbox
​

<!--
水平排列	
			-	将所有控件放到唯一 .radio|.checkbox 容器
			-	使用 .radio||.checkbox-inline对包围的label进行样式添加
			
垂直排列	
			-	每个控件都有单独的 .radio|.checkbox 容器
			-	这种复选框组或者单选框组再装进一个更大的容器中
-->
格式：
<div class="radio | checkbox">
  <label class="[radio-inline | checkbox-inline]">
    <input type="radio|checkbox">
      ...
    <input type="radio|checkbox">
  </label>
</div>

7、静态控件：如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 元素添加 .form-control-static 类即可。