一、排版--标题(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>
<abbr title></abbr>
</address>
-
-
显示效果如下:
-
-
引用文本样式
-
可以在任意的HTML文件旁使用默认的<blockquote>
-
使用class.pull-right 向右对齐引用,使用class.blockquote-reverse 反向引用
-
默认的样式引用,增加了左边线,设定了字体大小和内外边距
-
<blockquote>框架</blockquote>
-
反向引用
<blockquote class="blockquote-reverse">框架</blockquote>
-
列表排版
三、排版--表格
-
带边框表格: .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中的辅助类
-
文本颜色
-
背景颜色
-
设置状态
-
三角符号