好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Bootstrap使用心得之文本_html/css_WEB-ITnose

分类:WEB前端 时间: 2015年7月7日

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

1、h1~h6标题

HTML中的所有标题标签,从

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

 

h1.一级标题

h2.二级标题

h3.三级标题

h1.一级标题副标题

h2.二级标题副标题

h3.三级标题副标题

效果:

2、页面主体和普通段落

Bootstrap将全局font-size设置为14px,line-height为1.428。这些属性直接赋给 和所有段落元素。另外,

(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px),通过添加.lead可以让段落突出显示,字体为21px, font-weight

:为

300。

例如:

 

raykaeso,做一个有为程序员!

raykaeso,做一个有为程序员!

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

raykaeso,做一个有为程序员! 

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

 raykaeso,做一个有为程序员!  

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

raykaeso,做一个有为程序员! 

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

 

这是一段html文本....

这是一段html文本....

这是一段html文本....

这是一段html文本....

这是一段html文本....

这是一段html文本....

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

html HTML 

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

 
地址 湖北xx街xx大厦8888 电话: (123) 456-7890

效果:

3、对齐方式

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

 

左对齐

居中对齐

右对齐

更多排版类

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

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

      

查看更多关于Bootstrap使用心得之文本_html/css_WEB-ITnose的详细内容...

  阅读:31次

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://www.haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]