Atitit 外观ui调整法 表单与表格列表

Atitit 外观ui调整法 表单与表格列表

 

目录

1. 标准规范  Bootstrap 1

2. 基本实例   基本元素 lable 输入控件 1

3. 布局调整 1

3.1. 布局 上下  垂直布局（推荐） 1

3.2. 水平排列的表单（） 1

3.3. 内联表单  左右布局 一般用在搜索界面 1

3.4. 静态控件 2

 

 

1. 标准规范  Bootstrap 
2. 基本实例   基本元素 lable 输入控件
3. 布局调整
   1. 布局 上下  垂直布局（推荐）

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

窗体顶端

Email address

Password

 

1. 1. 水平排列的表单（）

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了

 

1. 1. 内联表单  左右布局 一般用在搜索界面

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

 

 

1. 1. 静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

窗体顶端

Email

email@example.com

窗体底端

 

 

全局 CSS 样式 · Bootstrap v3 中文文档.html

 

窗体底端