Bootstrap(3) 排版

Bootstrap 排版

Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。在这里插入图片描述如果在标题内添加<small>标签或者添加small类名,将会得到浅
颜色的小一号字体

在这里插入图片描述
想要到更大更粗、行高更高的文本添加lead类名
在这里插入图片描述Bootstrap 提供了一些用于强调文本的类,如下面实例所示:

<small>设置文本为父文本大小的 85%</small><br>
<strong>设置文本为更粗的文本</strong><br>
<em>设置文本为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

结果如下所示:
在这里插入图片描述
HTML 元素提供了用于缩写的标记,比如 WWW 或 HTTP。Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

在这里插入图片描述引用(Blockquote)

blockquote-reverse 设定引用右对齐

<blockquote class="blockquote-reverse">
		<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>From WWF's website</footer>
	</blockquote>

在这里插入图片描述移除默认的列表样式list-unstyled
将所有列表项放置同一行list-inline
dl-horizontal该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中
pre-scrollable使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值