请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 414|回复: 1

Bootstrap 文本/排版

[复制链接]
  • TA的每日心情
    开心
    2019-3-9 15:52
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    342

    主题

    344

    帖子

    1576

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1576
    admin实名认证 发表于 2018-11-8 16:38:41 | 显示全部楼层 |阅读模式
    Bootstrap的默认设置
    Bootstrap的全局默认字体大小为14px,行高为1.428。
    这适用于<body>所有段落。
    此外,所有<p>元素的底部边距等于其计算行高的一半(默认为10px)。
    Bootstrap与浏览器默认值
    在本章中,我们将介绍一些HTML元素,这些元素的Bootstrap样式与浏览器默认值略有不同。
    1、<h1> - <h6>
    默认情况下,Bootstrap将按以下方式设置HTML标题(<h1>to <h6>)的样式:
    1. <div class="container">
    2.   <h1>h1 Bootstrap heading (36px)</h1>
    3.   <h2>h2 Bootstrap heading (30px)</h2>
    4.   <h3>h3 Bootstrap heading (24px)</h3>
    5.   <h4>h4 Bootstrap heading (18px)</h4>
    6.   <h5>h5 Bootstrap heading (14px)</h5>
    7.   <h6>h6 Bootstrap heading (12px)</h6>
    8. </div>
    复制代码
    运行结果:h1-h6分别对应不同的文字大小,如下图:
    QQ图片20181108154243.png


    2、small(小)
    在Bootstrap中,HTML <small>元素用于在任何标题中创建较轻的辅助文本:
    1. <div class="container">
    2.   <h1>Lighter, Secondary Text</h1>
    3.   <p>The small element is used to create a lighter, secondary text in any heading:</p>      
    4.   <h1>h1 heading <small>secondary text</small></h1>
    5.   <h2>h2 heading <small>secondary text</small></h2>
    6.   <h3>h3 heading <small>secondary text</small></h3>
    7.   <h4>h4 heading <small>secondary text</small></h4>
    8.   <h5>h5 heading <small>secondary text</small></h5>
    9.   <h6>h6 heading <small>secondary text</small></h6>
    10. </div>
    复制代码
    运行结果:所有添加small元素的h标签将会把文字缩小,字体颜色变浅,如下图:
    QQ图片20181108160103.png

    3、mark(标记)
    Bootstrap将以<mark>下列方式设置HTML 元素的样式:
    1. <div class="container">
    2.   <h1>Highlight Text</h1>   
    3.   <p>Use the mark element to <font color="#ff0000"><mark>highlight</mark></font> text.</p>
    4. </div>
    复制代码
    运行结果:highlight单词将显示灰度背景,如下图:
    QQ图片20181108155821.png

    4、abbr(简介)
    Bootstrap将以<abbr>下列方式设置HTML 元素的样式:
    1. <div class="container">
    2.   <h1>Abbreviations</h1>
    3.   <p>The abbr element is used to mark up an abbreviation or acronym:</p>
    4.   <p>The <font color="#ff0000"><abbr title="World Health Organization">WHO</abbr></font> was founded in 1948.</p>
    5. </div>
    复制代码
    运行结果:当鼠标放到who上面会弹出文字框“World Health Organization”,如下图所示:
    QQ图片20181108155515.png

    5、blockquoteBootstrap将以<blockquote>下列方式设置HTML 元素的样式:
    1. <div class="container">
    2.   <h1>Blockquotes</h1>
    3.   <p>The blockquote element is used to present content from another source:</p>
    4.   <blockquote>
    5.     <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    6.     <footer>From WWF's website</footer>
    7.   </blockquote>
    8. </div>
    复制代码
    运行结果:blockquote是引用,表示想文本添加引用,被引用的文本左侧会出现一条3px左右宽度的竖线条,高度随引用文本的高度而定,如下图:

    QQ图片20181108160707.png
    要在右侧显示引用,请使用以下.blockquote-reverse类:
    1. <div class="container">
    2.   <h1>Blockquotes</h1>
    3.   <p>To show the quote on the right use the class .blockquote-reverse:</p>
    4.   <blockquote class="blockquote-reverse">
    5.     <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    6.     <footer>From WWF's website</footer>
    7.   </blockquote>
    8. </div>
    复制代码
    如果想把表示引用的竖线显示在右侧,请使用上面的代码,使用blockquote的class="blockquote-reverse"类样式,结果如下图:

    QQ图片20181108161041.png
    5、dl(列表)Bootstrap将以<dl>下列方式设置HTML 元素的样式:
    1. <div class="container">
    2.   <h1>Description Lists</h1>   
    3.   <p>The dl element indicates a description list:</p>
    4.   <dl>
    5.     <dt>Coffee</dt>
    6.     <dd>- black hot drink</dd>
    7.     <dt>Milk</dt>
    8.     <dd>- white cold drink</dd>
    9.   </dl>     
    10. </div>
    复制代码
    这类似于一般html标签中的dl,dt,dd展示列表,运行结果如下图:
    QQ图片20181108161433.png
    7、code(代码)Bootstrap将以<code>下列方式设置HTML 元素的样式:
    1. <div class="container">
    2.   <h1>Code Snippets</h1>
    3.   <p>Inline snippets of code should be embedded in the code element:</p>
    4.   <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
    5. </div>
    复制代码
    运行结果如下图:
    QQ图片20181108161856.png
    8、KBD(键盘输入添加背景keybackground)Bootstrap将以<kbd>下列方式设置HTML 元素的样式:
    1. <div class="container">
    2.   <h1>Keyboard Inputs</h1>
    3.   <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
    4.   <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
    5. </div>
    复制代码
    运行结果:kbd将包含在中间的文字加上了背景,一般是用于提示用户这是需要使用键盘输入的,如下图:
    QQ图片20181108162122.png
    9、pre(代码标签)Bootstrap将以<pre>下列方式设置HTML 元素的样式:
    1. <pre>
    2. Text in a pre element
    3. is displayed in a fixed-width
    4. font, and it preserves
    5. both      spaces and
    6. line breaks.
    7. </pre>
    复制代码
    运行结果类似与dz论坛的代码展示,对就是你现在看到的上面的代码被背景和边框包裹起来一样,如下图所示:
    QQ图片20181108162615.png
    10、语境颜色和背景
    Bootstrap还有一些上下文类,可用于提供“通过颜色的意义”。
    文本颜色的类是:.text-muted, .text-primary,.text-success,.text-info, .text-warning,和.text-danger:
    1. <div class="container">
    2.   <h2>Contextual Colors</h2>
    3.   <p>Use the contextual classes to provide "meaning through colors":</p>
    4.   <p class="text-muted">This text is muted.</p>
    5.   <p class="text-primary">This text is important.</p>
    6.   <p class="text-success">This text indicates success.</p>
    7.   <p class="text-info">This text represents some information.</p>
    8.   <p class="text-warning">This text represents a warning.</p>
    9.   <p class="text-danger">This text represents danger.</p>
    10. </div>
    复制代码
    运行结果:可以根据英文单词来辅助学习,效果如下图,后面我们还将学习btn-类的样式
    QQ图片20181108162957.png
    为背景色的类别是:.bg-primary, .bg-success,bg-info,bg-warning,和.bg-danger:
    1. <div class="container">
    2.   <h2>Contextual Backgrounds</h2>
    3.   <p>Use the contextual background classes to provide "meaning through colors":</p>
    4.   <p class="bg-primary">This text is important.</p>
    5.   <p class="bg-success">This text indicates success.</p>
    6.   <p class="bg-info">This text represents some information.</p>
    7.   <p class="bg-warning">This text represents a warning.</p>
    8.   <p class="bg-danger">This text represents danger.</p>
    9. </div>
    复制代码
    运行结果如下图,这是为文字背景色,bg-即background
    QQ图片20181108163448.png
    了解更多排版样式请前往bootstrap中文网。

    代码素材html文档下载: bootstrap-paiban.html (4.81 KB, 下载次数: 0)
    maomivip@mail.com
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    46

    积分

    新手上路

    Rank: 1

    积分
    46
    PaulHag 发表于 2019-2-26 16:58:16 | 显示全部楼层
    不错不错
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|寿光赢创志诚信息技术有限公司 ( 鲁ICP备19000917号 )

    GMT+8, 2019-3-25 23:57 , Processed in 0.065066 second(s), 25 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表