美文网首页
2, bootstrap文本处理和排版

2, bootstrap文本处理和排版

作者: 码农老王 | 来源:发表于2016-08-23 16:16 被阅读268次

    标题和副标题

    标题还是传统的 <h1> - <h6>表示.
    副标题是 small 标签, 内嵌在h标签中.

    <h1>我是标题 <small>我是子标题</small></h1>
    

    引导主题副本

    <h2>引导主题副本</h2>
    <p class="lead">这是一个演示引导主体副本用法的实例。</p>
    

    各种文本的样式

    <small>本行内容是在细体</small>
    <strong>本行内容是在粗体</strong>
    <em>本行内容是斜体</em>
    <p class="text-warning">warning</p>
    <p class="text-danger">danger</p>
    
    其他样式 效果
    .lead 使段落突出显示
    .small 设定小文本 (设置为父文本的 85% 大小)
    .text-left 文本居左
    .text-right 文本局右
    .text-center 文本居中
    .text-muted 淡化的文本
    .text-primary 蓝色的基本提示
    .text-success 绿色的成功提示
    .text-info 蓝灰的info信息
    .text-warning 褐色的警告信息
    .text-danger 红色的危险信息
    .text-justify 文本对齐,超出屏幕自动换行
    .text-nowrap 不换行
    .text-lowercase 字母小写
    .text-uppercase 字母大写
    .text-capitalize 单词首字母大写

    缩写

    abbr标签
    .initialism样式控制文本变小

    <abbr title="World Wide Web">WWW</abbr><br>
    <abbr title="Real Simple Syndication" class="initialism">--->RSS</abbr>
    
    整体效果

    引用

    blockquote标签
    .blockquote-reverse 样式 控制其文本局右
    其可以内嵌footer标签, 展示为淡化的文本
    footer可以内嵌cite标签, 展示为引用的文本

    <blockquote>这是一个向左对齐的引用。
        <footer>淡化文本 <cite title="引用内容">引用文本</cite></footer>
    </blockquote>
    
    <blockquote class="blockquote-reverse">这是一个向右对齐的引用。
        <footer>淡化文本 <cite title="引用内容">引用文本</cite></footer>
    </blockquote>
    
    引用的demo

    代码块

    code标签 和 pre标签
    code标签是一行代码
    pre是一块代码

    在上述两个标签中 '<' '>' 这两个符号需要用 &lt; 和 &gt; 转义

    相关文章

      网友评论

          本文标题:2, bootstrap文本处理和排版

          本文链接:https://www.haomeiwen.com/subject/zkcnsttx.html