02 Bootstrap 排版

  1. h1~h6标签
    或者 class .small 作为副标题插入
	<h1>我是标题1 h1. <span class="small">我是副标题1 h1</span></h1> 
	<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
	<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
	<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
	<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
	<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

在这里插入图片描述
2. class=“lead”,引导主体副本
为了给段落添加强调文本,则可以添加 class=“lead”,这将得到更大更粗、行高更高的文本
在这里插入图片描述
3. 文本的强调
在这里插入图片描述
4. 缩写
元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 在这里插入图片描述
5. 地址

<address>
	<strong>Some Company, Inc.</strong><br>
	007 street<br>
	Some City, State XXXXX<br>
	<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
	<strong>Full Name</strong><br>
	<a href="mailto:#">mailto@somedomain.com</a>
</address>

在这里插入图片描述
6. 块的引用
在这里插入图片描述
7. 列表

<h4>有序列表</h4>
<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
	<dt>Description 1</dt>
	<dd>Item 1</dd>
	<dt>Description 2</dt>
	<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
	 <dt>Description 1</dt>
	 <dd>Item 1</dd>
	 <dt>Description 2</dt>
	 <dd>Item 2</dd>
</dl>

在这里插入图片描述

  1. 更多排版类

在这里插入图片描述
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值