03-BootStrap常用基础样式

版权声明：Unruly https://blog.csdn.net/weixin_41660948/article/details/86483680

一、常用的排版元素

1、基本样式

1. 标题元素：h1~h6

2. 小型标题：small | .small

3. 段落突出：.lead

4. 高亮显示：mark - 黄色背景

5. 关键显示：code - 和此块一致

6. 代码块段：pre - 和这个一样的背景

7. 删除线、下划线、加粗、斜体

   del、u、strong、em

8. 文字对齐：

   1. 左对齐 - .text-left
   2. 右对齐 - .text-right
   3. 中间对齐 - .text-center
   4. 两端对齐 - .text-justify

9. 大小写转换：

   1. 小写 - .text-lowercase
   2. 大写 - .text-uppercase
   3. 驼峰 - .text-capitalize

10. 缩略语：<abbr title="内容">attr</abbr>

11. 引用：blockquote

    1. 引用源标明：footer
    2. 引用内容右对齐：blockquote-reverse

12. 标题下划线：page-header

13. lable的颜色：.lable-info、.lable-danger、……

二、按钮元素

1.可作为按钮的标签或者元素：

​ a、button、input

​ 添加.btn即可变成boostrap按钮元素

2.按钮样式

1. 默认样式 - class = btn btn-default
2. 深色样式 - class = btn btn-primary
3. 天蓝样式 - class = btn btn-info
4. 绿色样式 - class = btn btn-success
5. 黄色样式 - class = btn btn-warring
6. 红色样式 - class = btn btn-danger
7. 链接样式 - class = btn btn-link

3.按钮尺寸

1. 大图标 - class = btn btn-lg
2. 默认标 - class = btn btn-default
3. 小图标 - class = btn btn-sm
4. 超小标 - class = btn btn-xs
5. 块图标 - class = btn btn-block
   

4.按钮状态

1. 禁用状态 - class = disabled
2. 激活状态 - class = active

三、图片元素

1、响应式图片

​ class=img-responsive

2、图片样式

1. 圆角图 - class = img-rounded
2. 圆形图 - class = img-circle
3. 缩略图 - class = img-thumbnail

四、辅助类

1、文本、链接情景色

• text-primary
• text-success
• text-info
• text-warning
• text-danger
• text-muted

2、背景色

• bg-primary
• bg-success
• bg-info
• bg-warning
• bg-danger

3、快速浮动、清除浮动、内容居中、隐藏显示

1. pull-left - 左浮动
2. pull-right - 右浮动
3. clearfix - 清除浮动
4. center-block - 内容变成块元素，并且居中
5. show - 显示
6. hidden - 隐藏
7. sr-only - 隐藏在屏幕阅读器显示

4、特殊符号

关闭符号 - span.close

三角符号 - span.caret