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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Bootstrap使用心得之文本_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3318字，纯文字阅读大概需要5分钟。

内容图文

分类：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全部内容，希望文章能够帮你解决Bootstrap使用心得之文本_html/css_WEB-ITnose所遇到的程序开发问题。
                        如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
                    

                

                
内容备注

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
                    

                

                
内容手机端

                

                    

                    

                        
扫描二维码推送至手机访问。

                        
本文链接：https://qyyshop.com/info/407798.html

                    

                

                
                

                
来源：【匿名】