我是尚丹丹,我的博客建好啦!欢迎大家光临!

bootstrap4-

bootstrap sdd 179℃ 0评论

摘自:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201601273079.html

 

字体

在Bootstrap中使用Helvetica Neue、Helvetica、Arial和sans-serif作为默认的字体。这些字体包含了所有的主流操作系统使用的默认字体。

所有的页面文本的font-size都设置为1rem或16像素,行高line-height设置为1.5。

 

标题

在Bootstrap 4中,所有的6种标准的标题元素(H1-H6)都被设置为:font-weight为500,line-height为1.1,它们的字体大小分别为:

  • h1 – 2.25rem 或 36px
  • h2 – 1.875rem 或 30px
  • h3 – 1.5rem 或 24px
  • h4 – 1.125rem 或 18px
  • h5 – 0.875rem 或 14px
  • h6 – 0.75rem 或 12px

你也可以在HTML标签元素上使用标题作为class,得到的字体样式和相应的标题完全相同,例如:

<p class="h1">Paragraph Class H1</p>
<p class="h2">Paragraph Class H2</p>
<p class="h3">Paragraph Class H3</p>
<p class="h4">Paragraph Class H4</p>
<p class="h5">Paragraph Class H5</p>
<p class="h6">Paragraph Class H6</p>                               

另外,你还可以为标题添加内联的子标题。通过添加一个<small>元素,就可以为标题设置一个子标题(小一号)。例如:

<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>                               

Bootstrap 4还为标题元素预设了4个控制字体大小的class类。它们是:

  • display-1 – 3.5rem 或 49px
  • display-2 – 4.5rem 或 63px
  • display-3 – 5.5rem 或 77px
  • display-4 – 6rem 或 84px

使用方法如下:

<h1 class="display-1">H1 Display 1</h1>
<h1 class="display-2">H1 Display 2</h1>
<h1 class="display-3">H1 Display 3</h1>
<h1 class="display-4">H1 Display 4</h1>               
强调文本(Emphasis)

在Bootstrap 4中也有一些用于强调文本的class类,以及一些用于不同用途的特殊渲染模式的标签。这些标签可以用于强调文章中的某些句子或词语,或者作为代码段等。

强调文本的class类和标签有:

  • lead :class类,用于段落的强调。
  • <mark>:标签,用于高亮文本。
  • <abbr>:标签,代表缩写。在文本下出现一条虚线,鼠标滑过时呈问号状态,并显示title属性中设置的文本。
  • initialism:将缩写文本渲染为小号字体。
  • <code>:标签,用于渲染一段代码。

例如下面的例子:

<pclass="lead">We are Bootstrapper and we care about your website's responsive! </p>
<p>Did you know that <mark>Bootstrap 4</mark> has several new features? Believe me!</p>
<abbrtitle="Doctor">Dr.</abbr> Bootstrap is here to help! <br/>
<abbrtitle="Limited"class="initialism">Ltd.</abbr>
is used in many companies so I am using it as well!
<p>The <code>$myClass</code>
variable is used to specify the complete package of codes. </p>                              
引用(Blockquotes)

如果要添加引用文本或任何要插入正文的引用的块,可以使用带blockquote class类的<blockquote>标签。

在引用块中,有3个标签可以使用:

  • <blockquote>:引用块。
  • <cite>:引用块的来源。
  • <footer>:包含引用来源和作者的元素。

为了更好的显示结果,建议在引用块中使用<p>标签作为段落。

<blockquote class="blockquote">
    <p>照片这东西不过是生命的碎壳;纷纷的岁月已过去,瓜子仁一粒粒咽了下去,
         滋味各人自己知道,留给大家看的惟有那狼籍的黑白的瓜子壳。</p>
    <footer>——出自张爱玲的小说 <cite>《连环套》</cite></footer>
</blockquote>                              

转载请注明:尚丹丹的博客 » bootstrap4-

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址