bootstrap 部分CSS样式总结

bootstrap 基本CSS样式部分总结，主要总结了一些个人常用的CSS样式

1.垂直表单与内联表单与水平表单

垂直表单（默认）：

向父<form>元素中添加 role = “form”

标签和控件放在一个具有 class.form-group 的<div>中以获取最佳间距

向所有文本元素添加 class = “form-control”

内联表单(所有元素内联，向左对齐，标签并排)：

向<form>表单添加 class.form-inline

水平表单：

向父 <form> 元素添加 class .form-horizontal。

把标签和控件放在一个带有 class .form-group 的 <div> 中。

向标签添加 class .control-label。

2.按钮

.btn 为按钮添加基本样式

.btn-default 默认/标准按钮

.btn-primary 原始按钮样式

.btn-success 表示成功的动作

.btn-info 该样式可用于要弹出信息的按钮

.btn-warning 表示需要谨慎操作的按钮

.btn-danger 表示一个危险动作的按钮操作

.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)

.btn-lg 制作一个大按钮

.btn-sm 制作一个小按钮

.btn-xs 制作一个超小按钮

.btn-block 块级按钮(拉伸至父元素100%的宽度)

.active 按钮被点击

.disabled 禁用按钮

按钮大小

.btn-lg 这会让按钮看起来比较大。

.btn-sm 这会让按钮看起来比较小。

.btn-xs 这会让按钮看起来特别小。

.btn-block 这会创建块级的按钮，会横跨父元素的全部宽度。

按钮状态

.active 激活状态

添加disabled class 到button 按钮

3.图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。

.img-circle：添加 border-radius:50% 来让整个图片变成圆形。

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

响应式：

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展 到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：