Bootstrap学习笔记(三)表格

表格： 

☑  .table：基础表格

  ☑  .table-striped：斑马线表格

  ☑  .table-bordered：带边框的表格

  ☑  .table-hover：鼠标悬停高亮的表格

  ☑  .table-condensed：紧凑型表格

  ☑  .table-responsive：响应式表格

表单：

1. 在<form>元素上使用类名“form-horizontal”主要有以下几个作用：

•       1、设置表单控件padding和margin值。
•       2、改变“form-group”的表现形式，类似于网格系统的“row”。你只需要在<form>元素中添加类名“form-inline”即可。

内联表单实现原理非常简单，欲将表单控件在一行显示，就需要将表单控件设置成内联块元素（display:inline-block）
2.控件在各种表单风格中样式不出错，需要添加类名“form-control”，

3. Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式

4.表单控件(复选框和单选按钮水平排列)

1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

• 向父 <form> 元素添加 role="form"。
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

转载于:https://www.cnblogs.com/EmilyGarden/p/8492082.html