【Bootstrap学习 day2】

Bootstrap5排版

使用标题标签

-

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

	
h1 Bootstrap 标题
	
h2 Bootstrap 标题
	
h3 Bootstrap 标题
	
h1 Bootstrap 标题
	
h1 Bootstrap 标题
	
h1 Bootstrap 标题

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

	
Display 标题 
	
Display标题可以输出更大更粗的字体样式.。
	
Display 1
	
Display 2
	
Display 3
	
Display 4

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

这是Bootstrap5中正常样式的段落。
这是Bootstrap5中突出显示的段落。

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

	

		文本标题
		更小且颜色更浅
	

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

这个段落字体更小
这是常规段落

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

这个段落左边对齐
这个段落居中对齐
这个段落右边对齐

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

文本将在屏幕宽度等于或大于576px窗口及以上居中对齐。
文本将在屏幕宽度等于或大于768px窗口及以上居中对齐
文本将在屏幕宽度等于或大于992px窗口及以上居中对齐
文本将在屏幕宽度等于或大于1200px及以上居中对齐

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

设定bootstrap文本小写
设定bootstrap文本大写
设定bootstrap单词首字母大写

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

	

		这是一个很长很长很长非常长的段落
	

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

	

	这是一个很长很长很长非常长的段落