后端开发教程 - Java、Spring Boot 实战 - msg200.com
你用 Bootstrap 吗？千万别写那些 CSS 属性
Bootstrap 是 Web 开发人员最常用的 CSS 框架。它附带一系列实用程序，如果使用得当，可以简化我们的工作并提高生产力。
如果您使用 Bootstrap 框架，这是您无需在样式表文件中写入的 CSS 规则/属性列表。
位置
您无需在 CSS 文件中编写position: relative;或position: absolute;！Bootstrap 为我们提供了一系列实用程序类，允许从 HTML 模板控制定位类型。
<div class="position-relative"></div>
<div class="position-absolute"></div>
<div class="position-sticky"></div>
<div class="position-static"></div>
<div class="position-fixed"></div>
溢出
<div class="overflow-hidden"></div>
<div class="overflow-auto"></div>
文本装饰
在 Bootstrap 中，锚文本默认带有下划线。如果您想取消此行为，只需使用text-decoration-noneclass 即可。
<a href="#" class="text-decoration-none">This is a link</a>
能见度
<!-- visibility: visible; -->
<div class="visibile"></div>
<!-- visibility: hidden; -->
<div class="invisible"></div>
字体粗细
<!-- font-weight: 300; -->
<div class="font-weight-light"></div>
<!-- font-weight: 400; -->
<div class="font-weight-normal"></div>
<!-- font-weight: 700; -->
<div class="font-weight-bold"></div>
<!-- font-weight: bolder; -->
<div class="font-weight-bolder"></div>
文本转换
<!-- text-transform: uppercase; -->
<div class="text-uppercase"></div>
<!-- text-transform: lowercase; -->
<div class="text-lowercase"></div>
<!-- text-transform: capitalize; -->
<div class="text-capitalize"></div>
展示
这是一个必不可少的 CSS 属性，作为前端开发人员，你会大量使用它。因此，Bootstrap 提供了大量的类列表，以便我们以响应式的方式display处理这些属性。
<!-- display: block; -->
<!-- All screens -->
<div class="d-block"></div>
<!-- Small devices -->
<div class="d-sm-block"></div>
<!-- Medium devices -->
<div class="d-md-block"></div>
<!-- Large devices (Tablets) -->
<div class="d-lg-block"></div>
<!-- Extra large devices (Desktop) -->
<div class="d-xl-block"></div>
<!-- display: flex; -->
<!-- All screens -->
<div class="d-flex"></div>
<!-- Small devices -->
<div class="d-sm-flex"></div>
<!-- Medium devices -->
<div class="d-md-flex"></div>
<!-- Large devices (Tablets) -->
<div class="d-lg-flex"></div>
<!-- Extra large devices (Desktop) -->
<div class="d-xl-flex"></div>
<!-- display: none; -->
...
<!-- display: inline; -->
...
<!-- display: inline-block; -->
...
弹性框属性
Bootstrap 基于 CSS Flexbox。这种布局带有许多属性，可供我们控制。
使用 Bootstrap，我们可以直接从 HTML 使用所有这些属性，并且就像我们在display属性中看到的一样，可以保证开箱即用的响应能力。
<!-- justify-content; -->
<!-- All screens -->
<div class="justify-content-center"></div>
<!-- Small devices -->
<div class="justify-content-sm-center"></div>
<!-- Medium devices -->
<div class="justify-content-md-center"></div>
<!-- Large devices (Tablets) -->
<div class="justify-content-lg-center"></div>
<!-- Extra large devices (Desktop) -->
<div class="justify-content-xl-center"></div>
<div class="justify-content-start"></div>
<div class="justify-content-end"></div>
<div class="justify-content-between"></div>
<div class="justify-content-around"></div>
<!-- align-items; -->
<div class="align-items-start"></div>
<div class="align-items-end"></div>
<div class="align-items-center"></div>
<div class="align-items-baseline"></div>
<div class="align-items-stretch"></div>
<!-- align-content; -->
<div class="align-content-start"></div>
<div class="align-content-end"></div>
<div class="align-content-between"></div>
<div class="align-content-around"></div>
<div class="align-content-center"></div>
<div class="align-content-stretch"></div>
宽度和高度
<!-- width: 25%; -->
<div class="w-25"></div>
<!-- width: 50%; -->
<div class="w-50"></div>
<!-- width: 75%; -->
<div class="w-75"></div>
<!-- width: 100%; -->
<div class="w-100"></div>
<!-- width: auto; -->
<div class="w-auto"></div>
<!-- max-width: 100%; -->
<div class="mw-100"></div>
<!-- height: 25%; -->
<div class="h-25"></div>
<!-- height: 50%; -->
<div class="h-50"></div>
<!-- height: 75%; -->
<div class="h-75"></div>
<!-- height: 100%; -->
<div class="h-100"></div>
<!-- height: auto; -->
<div class="h-auto"></div>
<!-- max-width: 100%; -->
<div class="mh-100"></div>
填充和边距
每个布局或设计都依赖于padding和margin属性。
以下是可能对您有帮助的实用程序列表：
<!-- Padding Top -->
<!-- padding-top: 0; -->
<div class="pt-0"></div>
<div class="pt-xs-0"></div>
<div class="pt-sm-0"></div>
<div class="pt-md-0"></div>
<div class="pt-lg-0"></div>
<div class="pt-xl-0"></div>
<!-- padding-top: 0.25rem; -->
<div class="pt-1"></div>
...
<!-- padding-top: 0.5rem; -->
<div class="pt-2"></div>
...
<!-- padding-top: 1rem; -->
<div class="pt-3"></div>
...
<!-- padding-top: 1.5rem; -->
<div class="pt-4"></div>
...
<!-- padding-top: 3rem; -->
<div class="pt-5"></div>
...
<!-- Padding Left -->
<div class="pl-0"></div>
...
<!-- Padding Right -->
<div class="pr-0"></div>
...
<!-- Padding Bottom -->
<div class="pb-0"></div>
...
<!-- Horizontal Padding -->
<div class="px-0"></div>
...
<!-- Vertical Padding -->
<div class="py-0"></div>
...
您可以对类使用相同的命名约定margin。只需替换pwidth即可m。
仅限屏幕阅读器
有时，我们需要在 html 标记中添加一些文本，并且希望它仅对屏幕阅读器可用，以实现可访问性。
Bootstrap 提供了一个类实用程序来执行此操作：sr-only。
<div class="sr-only"><a href="#content">Skip to Main Content</a></div>
漂浮
就我个人而言，我不再使用float属性了！但如果你在用，这里有一些免费的精华：
<div class="float-left"></div>
<div class="float-right"></div>
<div class="float-none"></div>