【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>