Bootstrap使用心得之文本_html/css_WEB
分类: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、地址让联系信息以最接近日常使用的格式呈现。在每行结尾添加
效果:
3、对齐方式 通过文本对齐class,可以简单方便的将文字重新对齐,例如: 左对齐 居中对齐 右对齐 更多排版类下表提供了 Bootstrap更多排版类的实例:
|