Bootstrap使用心得之文本

WEB前端

本文主要介绍下Bootstrap文本常用的一些class。包括标题、页面主体、强调、小号文本、着重、斜体、缩略语、地址对齐、强调、描述、水平排列的描述。

1、h1~h6标题
HTML中的所有标题标签,从<h1>到<h6>均可用。另外,还提供了.h1到.h6 class,为的是给inline属性的文本赋予标题的样式,在标题内还可以包含<small>标签或.small元素,用来标记副标题。例如:

1
2
3
4
5
6
<h1>h1.一级标题</h1>
<h2>h2.二级标题</h2>
<h3>h3.三级标题</h3>
<h1>h1.一级标题<small>副标题</small></h1>
<h2>h2.二级标题<small>副标题</small></h2>
<h3>h3.三级标题<small>副标题</small></h3>

效果:
20150707121248

2、页面主体和普通段落
Bootstrap将全局font-size设置为14px,line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外,<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px),通过添加.lead可以让段落突出显示,字体为21px,font-weight:为300。例如:

1
2
<p>raykaeso,做一个有为程序员!</p>
<p class="lead">raykaeso,做一个有为程序员!</p>

a、小号文本
对于不需要强调的inline或block类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%,有斜体的效果。标题元素中嵌套的<small>元素被设置不同的font-size。你还可以为行内元素赋予.small以代替任何<small>标签,例如:

1
<small>raykaeso,做一个有为程序员!</small>

b、着重
通过增加font-weight强调一段文本,例如:

1
<strong>raykaeso,做一个有为程序员!</strong>

c、斜体
用斜体强调一段文本,还可以使用HTML5中定义的<b>和<i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示,<i>大部分用于发言、技术短语等情况。例如:

1
<em>raykaeso,做一个有为程序员!</em>

d、强调class
这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

1
2
3
4
5
6
<p class="text-muted">这是一段html文本....</p>
<p class="text-primary">这是一段html文本....</p>
<p class="text-success">这是一段html文本....</p>
<p class="text-info">这是一段html文本....</p>
<p class="text-warning">这是一段html文本....</p>
<p class="text-danger">这是一段html文本....</p>

e、缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性,为缩略语添加.initialism可以将其font-size设置的更小些。例如:

1
2
<abbr title="attribute">html</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

f、地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式,例如:

1
2
3
4
5
<address>
<strong>地址</strong><br>
湖北xx街xx大厦8888<br>
<abbr title="Phone">电话:</abbr> (123) 456-7890
</address>

效果:
20150707122225

3、对齐方式
通过文本对齐class,可以简单方便的将文字重新对齐,例如:

1
2
3
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>

更多排版类

下表提供了 Bootstrap更多排版类的实例:

描述
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.dl-horizontal 该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例
.pre-scrollable 使 <pre> 元素可滚动 scrollable

来源:Bootstrap使用心得之文本

Bootstrap使用心得之文本” 评论

    亿恩科技 评论:
    2017年1月5日 下午2:13

    说到点子上了,谢谢分享

发表评论

电子邮件地址不会被公开。 必填项已用*标注