bootstrap 基本样式

html+css cooljun 133℃ 0评论

强调

直接使用HTML中用于标注强调的标签,并给他们赋予少许的样式。

<small>

对于不需要强调的inline或block类型的文本,使用small标签。

This line of text is meant to be treated as fine print.

<p>  <small>This line of text is meant to be treated as fine print.</small></p>

加粗

用增加font-weight值的方式加粗强调一段文本。

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

斜体

用斜体字强调一段文本。

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

注意! 在HTML5中可任意使用<b> 和 <i>。<b>是为了高亮词或短语而不会赋予重要含义,<i>主要被用来表示发言、技术术语等。

对齐类

简单方便将文字对齐的类。

左对齐文字。

中间对其文字。

右侧对其文字。

1.    <p class="text-left">Left aligned text.</p>
2.    <p class="text-center">Center aligned text.</p>
3.    <p class="text-right">Right aligned text.</p>

强调类

这些用去强调的工具类通过颜色来表示强调。

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

1.    <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
2.    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
3.    <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
4.    <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>5.    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML <abbr>元素的增强样式。缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。

<abbr>

如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

<abbr class=”initialism”>

为 <abbr> 标签添加 .initialism 类使其使用更小一些的字号。

HTML is the best thing since sliced bread.

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


转载请注明:cooljun小站 » bootstrap 基本样式

如果你觉得这篇文章对你有帮助,请支持我继续更新网站 !捐赠本站
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

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

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