您当前的位置:首页 > bootstrap > bootstrap4知识

bootstrap4知识-字体

时间:2020-10-29 00:21:14    来源:    作者:

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。此外,所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
<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>
<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>
<dl>
   <dt>Coffee</dt>
   <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>

 

标签 描述
h1-h6 定义了所有的 HTML 标题(h1 到 h6)的样式
Display标题类 Display 标题可以输出更大更粗的字体样式: .display-1, .display-2, .display-3, .display-4。
small small 元素用于字号更小的颜色更浅的文本
mark 使用 mark 元素来高亮文本
abbr 在文本底部的一条虚线边框
blockquote 引述内容
dl 描述性的列表
code 标记代码
kbd 键盘快捷键标记
pre 多行文本
 
类名 描述
.font-weight-bold 加粗文本
.font-weight-normal 普通文本
.font-weight-light 更细的文本
.font-italic 斜体文本
.lead 让段落更突出
.small 指定更小文本 (为父元素的 85% )
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 abbr 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
.list-unstyled 移除默认的列表样式,列表项中左对齐 (ulol 中)。 这个类仅适用于直接子列表项(如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.pre-scrollable 使 pre 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
推荐资讯