找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 676|回复: 0

排版(Typography)

[复制链接]

296

主题

38

回帖

1272

积分

管理员

积分
1272
发表于 2021-4-5 22:13:30 | 显示全部楼层 |阅读模式
一.head类
#.h1-.h6
<p class="h1">h1. Bootstrap heading</p>

二.自定义head标签
<h1>
        define head element
        <small class="text-muted">With faded secondary text</small>
</h1>

三.Display headings类
#.display-1-.display-6
<h1 class="display-1">Display 1</h1>

四.Lead类
<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>

五.Inline text elements(文本样式)
mark
del
s
ins
u
small
strong
em

六.文本样式类
.mark
.small
.text-decoration-underline
.text-decoration-line-through

七.Abbreviations(缩略语)
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

八.Blockquotes(块引用)
1.简单
<blockquote class="blockquote"></blockquote>

2.系统
<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

九.list列表
1.list-style(无样式)
<ul class="list-unstyled"></ul>

2.Inline(行内)
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
</ul>

3.Description list alignment(dl对齐)
<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>
</dl>

回复

使用道具 举报

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

本版积分规则

QQ|Archiver|手机版|小黑屋|外汇论坛 ( 粤ICP备16021788号 )

GMT+8, 2024-5-13 08:26 , Processed in 0.087836 second(s), 18 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表