zoukankan      html  css  js  c++  java
  • 排版 | Typography (Content) – Bootstrap 4 中文开发手册

    [

    排版 | Typography (Content) - Bootstrap 4 中文开发手册
    引导打印的文档和示例,包括全局设置、标题、正文、列表等。

    全局设置

    引导设置基本的全局显示、排版和链接样式。当需要更多的控制时,请查看文本实用程序类...用本机字体堆栈选择最好的font-family对于每个操作系统和设备。对于更具包容性和可访问性的类型扩展,我们假设浏览器默认根目录font-size(通常是16 px),这样访问者就可以根据需要自定义他们的浏览器默认值。使用$font-family-base,,,$font-size-base,和$line-height-base属性作为我们的打印基应用于<body>...设置全局链接颜色$link-color并仅在:hover...使用$body-bg设置background-color在<body>%28#fff默认情况下%29。这些样式可以在_reboot.scss中定义的全局变量_variables.scss.确保$font-size-base在rem...

    标题

    所有HTML标题,<h1>透<h6>,都是可用的。

    标题
    <H1> </ H1> H1.Bootstrap标题
    <H2> </ H2> H2.Bootstrap标题
    <H3> </ H3> H3.Bootstrap标题
    <H4> </ H4> H4.Bootstrap标题
    <H5> </ H5> H5.Bootstrap标题
    <H6> </ H6> H6.Bootstrap标题
    <h1>h1. Bootstrap heading</h1>
    <h2>h2. Bootstrap heading</h2>
    <h3>h3. Bootstrap heading</h3>
    <h4>h4. Bootstrap heading</h4>
    <h5>h5. Bootstrap heading</h5>
    <h6>h6. Bootstrap heading</h6>

    .h1透.h6类也是可用的,当您想要匹配标题的字体样式但不能使用关联的HTML元素时。打开getbootstrap.com上的示例

    <p class="h1">h1. Bootstrap heading</p>
    <p class="h2">h2. Bootstrap heading</p>
    <p class="h3">h3. Bootstrap heading</p>
    <p class="h4">h4. Bootstrap heading</p>
    <p class="h5">h5. Bootstrap heading</p>
    <p class="h6">h6. Bootstrap heading</p>

    定制标题

    使用包含的实用工具类重新创建Bootstrap 3中的小辅助标题文本。打开getbootstrap.com上的示例

    <h3>
      Fancy display heading
      <small class="text-muted">With faded secondary text</small>
    </h3>

    显示标题

    传统的标题元素被设计为在页面内容的内容中发挥最佳效果。当您需要一个突出的标题时,请考虑使用显示标题-一种更大、稍微更固执己见的标题风格。打开getbootstrap.com上的示例

    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>

    Lead

    在某一段中加上.lead...打开getbootstrap.com上的示例

    <p class="lead">
      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
    </p>

    内联文本元素

    常见的内联HTML 5元素的样式。打开getbootstrap.com上的示例

    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>

    .mark和.small类还可以应用与<mark>和<small>同时避免了标签带来的任何不必要的语义影响。虽然上面没有显示,但请随意使用<b>和<i>在HTML 5中。<b>意思是突出强调单词或短语,而不传递额外的重要性。<i>主要用于语音、技术术语等。

    文本实用程序

    更改文本对齐、转换、样式、重量和颜色文本实用程序...

    缩略语

    HTML的样式化实现<abbr>元素的缩写和缩略词,以显示悬停上的扩展版本。缩写具有默认下划线,并获得帮助光标,以便在悬停和辅助技术的用户上提供附加上下文。加.initialism缩写为略小一点的字体大小。打开getbootstrap.com上的示例

    <p><abbr title="attribute">attr</abbr></p>
    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

    区块引号

    引用文档中另一个源的内容块。包扎<blockquote class="blockquote">任何HTML的引号。打开getbootstrap.com上的示例

    <blockquote class="blockquote">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>

    命名源

    加一个<footer class="blockquote-footer">来确认来源。将源工作的名称包装在<cite>...打开getbootstrap.com上的示例

    <blockquote class="blockquote">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

    对齐

    根据需要使用文本实用程序更改区块引号的对齐方式。打开getbootstrap.com上的示例

    <blockquote class="blockquote text-center">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

    打开getbootstrap.com上的示例

    <blockquote class="blockquote text-right">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

    列表

    未定型

    删除默认值list-style和列表项%28直接子项上的左边距仅为%29。这仅适用于直接子列表项。,这意味着您还需要为任何嵌套列表添加类。打开getbootstrap.com上的示例

    <ul class="list-unstyled">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li>
      <li>Nulla volutpat aliquam velit
        <ul>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
          <li>Vestibulum laoreet porttitor sem</li>
          <li>Ac tristique libero volutpat at</li>
        </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ul>

    内联

    删除列表中的子弹,并施加一些光线margin两个班的组合,.list-inline和.list-inline-item...打开getbootstrap.com上的示例

    <ul class="list-inline">
      <li class="list-inline-item">Lorem ipsum</li>
      <li class="list-inline-item">Phasellus iaculis</li>
      <li class="list-inline-item">Nulla volutpat</li>
    </ul>

    描述列表对齐

    通过使用网格系统的预定义类%28或语义混合%29,水平对齐术语和描述。长期而言,您可以选择添加.text-truncate类以省略号截断文本。打开getbootstrap.com上的示例

    <dl class="row">
      <dt class="col-sm-3">Description lists</dt>
      <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
    
      <dt class="col-sm-3">Euismod</dt>
      <dd class="col-sm-9">
        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
        <p>Donec id elit non mi porta gravida at eget metus.</p>
      </dd>
    
      <dt class="col-sm-3">Malesuada porta</dt>
      <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
    
      <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
      <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
    
      <dt class="col-sm-3">Nesting</dt>
      <dd class="col-sm-9">
        <dl class="row">
          <dt class="col-sm-4">Nested definition list</dt>
          <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
        </dl>
      </dd>
    </dl>

    反应式排版

    反应式排版指通过简单地调整根元素的文本和组件font-size在一系列媒体查询中。引导并不能为您完成这个任务,但是如果您需要它,添加它是相当容易的。这是一个实践中的例子。随便选择font-sizeS和媒体查询您的愿望。

    html {
      font-size: 1rem;
    }
    
    @include media-breakpoint-up(sm) {
      html {
        font-size: 1.2rem;
      }
    }
    
    @include media-breakpoint-up(md) {
      html {
        font-size: 1.4rem;
      }
    }
    
    @include media-breakpoint-up(lg) {
      html {
        font-size: 1.6rem;
      }
    }
     © 2011–2017 Twitter, Inc.

    © 2011–2017 The Bootstrap Authors根据MIT许可授权的代码。根据CreativeCommonsAttributionLicense v3.0授权的文档。

    ]
    转载请保留页面地址:https://www.breakyizhan.com/javascript/26603.html
  • 相关阅读:
    OutputCache 缓存key的创建 CreateOutputCachedItemKey
    Asp.net Web Api源码调试
    asp.net mvc源码分析DefaultModelBinder 自定义的普通数据类型的绑定和验证
    Asp.net web Api源码分析HttpParameterBinding
    Asp.net web Api源码分析HttpRequestMessage的创建
    asp.net mvc源码分析ActionResult篇 RazorView.RenderView
    Asp.Net MVC 项目预编译 View
    Asp.net Web.config文件读取路径你真的清楚吗?
    asp.net 动态创建TextBox控件 如何加载状态信息
    asp.net mvc源码分析BeginForm方法 和ClientValidationEnabled 属性
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13287178.html
Copyright © 2011-2022 走看看