Bootstrap4是一个流行的前端框架，它为开发者提供了丰富的实用类名和布局技巧，使得创建响应式和移动优先的网站变得更加简单。本文将全面解析Bootstrap4中的实用类名和布局技巧，帮助开发者更好地利用这个框架。
容器和网格系统
Bootstrap4的布局始于容器和网格系统。容器用于包裹页面内容和栅格系统，Bootstrap预先定义了.container和.container-fluid两个类。
.container：具有固定宽度，在不同屏幕尺寸下有不同的宽度设置，默认为960px，在窄屏设备上变为100%宽度。.container-fluid：宽度为100%，占据整个视口。
<div class="container">
<!-- 页面内容 -->
</div>
<div class="container-fluid">
<!-- 页面内容 -->
</div>
栅格系统
Bootstrap4的栅格系统允许你通过列（column）和行（row）的组合来创建复杂的页面布局。行必须包含在容器内，而列是行的直接子元素。
.row：创建水平行，用于放置列。.col-xs-*、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*：用于指定列在不同屏幕尺寸下的宽度。
<div class="row">
<div class="col-md-6">列1</div>
<div class="col-md-6">列2</div>
</div>
响应式布局
Bootstrap4提供了响应式布局功能，允许网站根据浏览器或设备大小自动调整布局。它使用断点（breakpoints）来定义屏幕尺寸范围，并根据每个断点调整布局。
xs：小于768pxsm：大于768pxmd：大于992pxlg：大于1200pxxl：大于1400px
<div class="col-md-4 col-lg-4">列1</div>
<div class="col-md-4 col-lg-4">列2</div>
<div class="col-md-4 col-lg-4">列3</div>
实用类名
Bootstrap4提供了丰富的实用类名，用于快速实现各种样式效果。
.text-center：文本居中对齐.text-right：文本右对齐.text-left：文本左对齐.text-uppercase：文本全部大写.text-lowercase：文本全部小写.text-capitalize：首字母大写
<p class="text-center">居中对齐的文本</p>
<p class="text-uppercase">全部大写的文本</p>
排版样式
Bootstrap4还提供了排版样式类名，用于快速实现段落、标题、列表等排版效果。
.h1至.h6：标题样式.lead：用于突出显示文本.list-unstyled：去除列表项目符号和内边距.list-inline：将列表项排列在同一行
<h1 class="h1">标题1</h1>
<p class="lead">突出显示的文本</p>
<ul class="list-unstyled">
<li>无项目符号的列表</li>
</ul>
总结
Bootstrap4是一个功能强大的前端框架，通过使用其提供的实用类名和布局技巧，开发者可以快速创建响应式和移动优先的网站。本文全面解析了Bootstrap4的布局技巧，希望对开发者有所帮助。