bootstrap中的全局样式

时间 2021-01-01

一、排版--标题（h1-h6）副标题（small）

h1:36px
h2:30px
h3:24px
h4:18px
h5:14px
h6:12px

<span></span> //内联标签实现样式

bootstrap支持普通内联元素定义class=（.h1-h6）来实现相同的功能（使用内联元素直接来引用标题的样式）

eg：<span class="h1">XX</span>

注意：在任何标题中添加一个内联子标题，只需要简单的在元素两旁添加<small>标签即可

显示的效果如下：

h1 ~ h3 下 small 元素的大小只占父元素的 65% ，那么通过计算， h1 ~ h3 下的 small 为 23.4px 、 19.5px 、 15.6px ；
h4 ~ h6 下 small 元素的大小只占父元素的 75% , 分别为： 13.5px 、 10.5px 、 9px 。
在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色： #777 ，行高为 1 ，粗度为 400

二、排版---文本

1）段落

p标签

默认：14px；
行高：20px
底部外边距：10px

2）对齐方式

.text-left
.text-center
.text-right

3）文本标记

class="lead"强调文本得到更大更粗、行高更高的文本
- eg：<p class="lead">xxx</p>
添加标记，<mark>元素或.mark 类(设置Mark标签是有黄色底边的)
- eg：<p>bootstrap<mark>框架</mark></p>
各种加线条的文本
- <del>XXXX</del> //删除的文本
- <s>XXX</s> //无用的文本
- <ins>XXX</ins> //插入的文本
- <u>XXX</u> //效果同上，下划线文本
- 效果如下：
强调样式
- <small> 设置文本为父文本大小的80%（标准字号的85%）
- <strong> 设置文本为更粗的文本（加粗700）
- <em> 设置文本为斜体
- 显示效果如下：
对齐样式设置文本对齐
- <p class="text-left">位置居左</p>
- <p class="text-center">位置居中</p>
- <p class="text-right">位置居右</p>
- <p class="text-justify">两端对齐，支持度不佳</p>
- <p class="text-nowrap">不换行</p>
- 显示效果如下：
大小写样式---设置英文文本大小写
- <p class="text-lowercase">Bootstrap小写</p>
- <p class="text-uppercase">bootstrap大写</p>
- <p class="text-capitalize">bootstrap首字母大写</p>
- 显示效果如下:
缩略语样式
- <abbr class="initialism" title="world wide web">www</abbr>
- 显示效果如下：
地址文本样式
- 使用<address>标签，设置地址，去掉了倾斜，设置了行高，底部20px
- <address>默认为display：block，需要使用标签来为封闭的地址文本添加换行
- <address>

<strong>Twitter,Inc</strong><br>

795 Folsom Ave,Suite 600<br>

San Francisco,CA 94170<br>

</address>

- 显示效果如下：
引用文本样式
- 可以在任意的HTML文件旁使用默认的<blockquote>
- 使用class.pull-right 向右对齐引用，使用class.blockquote-reverse 反向引用
- 默认的样式引用，增加了左边线，设定了字体大小和内外边距

反向引用

列表排版

三、排版--表格

带边框表格: .table-bordered

table-bordered:边框样式

显示结果如下：

条纹状表格: .table-striped

table-striped:显示斑马线样式

显示效果如下：

悬停变色: .table-hover

table-hover:鼠标所到点击之处会出现高亮或是变暗的效果

显示效果如下：

紧凑风格: .table-condensed

class="danger":会使该行红色显示，当鼠标放到改行时，颜色也会发生加深改变

效果现实如下：

< tr class = "warning" >：是指警告用户所做的一个动作

< tr class = "success" >：是指标志成功的动作

< tr class = "active" >： active是指鼠标全停在行或单元格上的显示的效果

< tr class = "info" >

< tr class = "danger" >：是指危险

显示效果如下：

四、排版---表单（1）

bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列、个性化定制等。

palceholder：在输入文本框中显示的提示性的内容

< input type = "text" class = "form-control" placeholder = "这是一个输入框" />

加上form-control样式之后，之前的输入框由长方形变为圆角矩形，样式更美观，鼠标点击会亮

< form class = "form-inline" >

效果是使表单中的各个div都横向排列

效果显示如下：

input-lg：使输入框变大

input-sm：使输入框变小

< label class = "sr-only" >这是一个输入框：</ label >

给lable添加样式"sr-only"则标签的原有的字将不会显示

给lable添加样式“control-label”代表可控制的标签

给div添加样式 “has-success”代表的是一个状态

显示的效果如下：第一个label的边框显示的已经改变了颜色

给div添加“has-worning”样式，显示的效果如下：边框改变原有的颜色变成黄色

给div添加“has-error”样式，显示效果如下：像报错信息，边框显示红色

五、排版---表单（2）

按钮

1.想要 按钮改变原有的颜色，可以进行如下操作

< button class = "btn btn-default" >这是一个按钮</ button >----默认状态
< button class = "btn btn-success" >这是一个按钮</ button >----成功状态
< button class = "btn btn-warning" >这是一个按钮</ button >----警告状态
< button class = "btn btn-info" >这是一个按钮</ button >----信息状态
< button class = "btn btn-danger" >这是一个按钮</ button >----报错状态
< button class = "btn btn-primary" >这是一个按钮</ button >----初级的，基本的，首要的
显示效果如下:

2. 改变按钮的状态，使按钮呈现一种链接的效果

< button class = "btn btn-link" >这是一个按钮</ button >

效果显示如下：

3. 改变按钮的大小

< button class = "btn btn-default btn-lg" >这是一个按钮</ button >---按钮变大
< button class = "btn btn-success btn-sm" >这是一个按钮</ button >---按钮变小

显示效果如下:

4.设置按钮默认的一个 按下去的状态，在样式中设置active即可

< button class = "btn btn-warning active" >这是一个按钮</ button >

显示效果如下：

会有阴影呈现的效果

5.设置 按钮全屏展示

< button class = "btn btn-info btn-block" >这是一个按钮</ button >

显示效果如下：

6.设置 按钮禁用状态，在样式中加入disabled

< button class = "btn btn-danger disabled" >这是一个按钮</ button >

显示效果如下：

--->

前后颜色发生改变，鼠标放置在此处，会出现一个禁用的符号（圈斜杠）

7. a标签可以设置为按钮的效果

< a class = "btn btn-success" href="" >这是a标签显示的按钮效果</ a >---只是把按钮引用的样式添加到a标签内部即可

效果显示如下：

六、bootstrap中图片及辅助类

1）bootstrap中的图片--形状

圆角 .img-rounded
圆形 .img-circle

带有边框的圆角图形 .img-thumbnail

2）bootstrap中的辅助类

文本颜色
背景颜色
设置状态
三角符号