【Bootstrap学习 day2】

Bootstrap5排版

使用标题标签<h1>-<h6>
可以使用类.h1-.h6来设置标题

<div class="container">
	<p class="h1">h1 Bootstrap 标题</p>
	<p class="h2">h2 Bootstrap 标题</p>
	<p class="h3">h3 Bootstrap 标题</p>
	<p class="h4">h1 Bootstrap 标题</p>
	<p class="h5">h1 Bootstrap 标题</p>
	<p class="h6">h1 Bootstrap 标题</p>
</div>

Display标题类
Bootstrap5还提供了使标题更突出的类，当我们需要标题突出时可以使用这些标题类。突出标题以更大的字体显示，并且会对其进行加粗。

<div class="container">
	<h1>Display 标题 </div>
	<p>Display标题可以输出更大更粗的字体样式.。</p>
	<h1 class="display-1">Display 1</h1>
	<h1 class="display-2">Display 2</h1>
	<h1 class="display-3">Display 3</h1>
	<h1 class="display-4">Display 4</h1>

使用类突出显示段落
还可以通过在段落上添加类.lead来突出段落

<p>这是Bootstrap5中正常样式的段落。</p>
<p class="lead">这是Bootstrap5中突出显示的段落。</p>

自定义标题
我们可以使用带有类.text-muted class的标签来显示更小且颜色更浅的文本。

<div class="container">
	<h2>
		文本标题
		<small class="text-muted">更小且颜色更浅</small>
	</h2>
</div>

也可以添加类.small指定更小文本(为父元素的85%)

<p class="small">这个段落字体更小</p>
<p>这是常规段落</p>

文本对齐
可以使用文本对齐类轻松地将文本左对齐、右对齐和居中对齐。

<p class="text-start">这个段落左边对齐</p>
<p class="text-center">这个段落居中对齐</p>
<p class="text-end">这个段落右边对齐</p>

还可以使用响应式文本对齐类根据屏幕大小对齐文本

<p class="text-sm-center">文本将在屏幕宽度等于或大于576px窗口及以上居中对齐。</p>
<p class="text-md-center">文本将在屏幕宽度等于或大于768px窗口及以上居中对齐</p>
<p class="text-lg-center">文本将在屏幕宽度等于或大于992px窗口及以上居中对齐</p>
<p class="text-xl-center">文本将在屏幕宽度等于或大于1200px及以上居中对齐</p>

文本转换
可以将文本转换为小写、大写、设定单词首字母大写

<p class="text-lowercase">设定bootstrap文本小写</p>
<p class="text-uppercase">设定bootstrap文本大写</p>
<p class="text-capitalize">设定bootstrap单词首字母大写</p>

截断长文本
对于较长的文本，可以使用类.text-truncate用省略号截断文本。在一行中显示一段文本但没有足够的可用空间时，它特别有用。

<div class="row">
	<div class="col-sm-2 text-truncate">
		这是一个很长很长很长非常长的段落
	</div>
</div>

文本换行和溢出
通过类名（.text-wrap）可以设置文字在超过盒子宽度时自动换行
通过类名（.text-nowrap）可以阻止文字的换行，此时文字会溢出盒子

<div class="row">
	<div class="col-sm-2 text-nowrap">
	这是一个很长很长很长非常长的段落
	</div>
</div>