返回顶部

Bootstrap4文字排版怎么操作?

[复制链接]
弃梦人Lv.1 显示全部楼层 发表于 2022-7-6 13:14:51 |阅读模式 打印 上一主题 下一主题
  Bootstrap4默认设置

  Bootstrap4默认的font-size为16px,line-height为1.5。

  默认的font-family为"HelveticaNeue",Helvetica,Arial,sans-serif。

  此外,所有的<p>元素margin-top:0、margin-bottom:1rem(16px)。

  <h1>-<h6>

  Bootstrap中定义了所有的HTML标题(h1到h6)的样式。请看下面的实例:

  实例

[HTML] 纯文本查看 复制代码
<div class="container">
  <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
  <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
</div>

  Display标题类

  Bootstrap还提供了四个Display类来控制标题的样式:.display-1,.display-2,.display-3,.display-4。

  实例
[HTML] 纯文本查看 复制代码
<div class="container">
  <h1>Display 标题</h1>
  <p>Display 标题可以输出更大更粗的字体样式。</p>
  <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>
</div>


  <small>

  在Bootstrap4中HTML<small>元素用于创建字号更小的颜色更浅的文本:

  实例

 
[HTML] 纯文本查看 复制代码
<div class="container">
  <h1>更小文本标题</h1>
  <p>small 元素用于字号更小的颜色更浅的文本:</p>       
  <h1>h1 标题 <small>副标题</small></h1>
  <h2>h2 标题 <small>副标题</small></h2>
  <h3>h3 标题 <small>副标题</small></h3>
  <h4>h4 标题 <small>副标题</small></h4>
  <h5>h5 标题 <small>副标题</small></h5>
  <h6>h6 标题 <small>副标题</small></h6>
</div>

  <mark>

  Bootstrap4定义<mark>为黄色背景及有一定的内边距:

  实例

[HTML] 纯文本查看 复制代码
<div class="container">
  <h1>高亮文本</h1>    
  <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
</div>


  <abbr>

  Bootstrap4定义HTML<abbr>元素的样式为显示在文本底部的一条虚线边框:

  实例

[HTML] 纯文本查看 复制代码
<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>


  <blockquote>

  对于引用的内容可以在<blockquote>上添加.blockquote类:

  实例

[HTML] 纯文本查看 复制代码
<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <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>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>


  <dl>

  Bootstrap4定义HTML<dl>元素的样式如下:

  实例

[HTML] 纯文本查看 复制代码
<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>


  <code>

  Bootstrap4定义HTML<code>元素的样式如下:

  实例

[HTML] 纯文本查看 复制代码
<div class="container">
  <h1>代码片段</h1>
  <p>可以将一些代码元素放到 code 元素里面:</p>
  <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>


  <kbd>

  Bootstrap4定义HTML<kbd>元素的样式如下:

  实例

[HTML] 纯文本查看 复制代码
<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>


  <pre>

  Bootstrap4定义HTML<pre>元素的样式如下:

  实例
[HTML] 纯文本查看 复制代码
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>






回复

使用道具 举报

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

本版积分规则

达内教育:成立于2002年。致力于面向IT互联网行业,培养软件开发工程师、测试工程师、系统管理员、智能硬件工程师、UI设计师、网络营销、会计等职场人才 达内使命:缔造年轻人的中国梦、缔造达内员工的中国梦 达内愿景:做管理一流的教育公司
  • 商务合作

  • 微信公众号

  • Powered by Discuz! X3.4 | Copyright © 2002-2021, 达内教育 Tedu.cn
  • 京ICP备08000853号-56 |网站地图 | 京公网安备 11010802029508号