1.container
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
</div>
</div>
2.container-fluid # 全屏
<div class="container-fluid">
</div>
3.grid
<576px Extra small .col- None (auto)
≥576px Small .col-sm- 540px
≥768px Medium .col-md- 720px
≥992px Large .col-lg- 960px
≥1200px Extra large .col-xl- 1140px
<div class="row">
<div class="col col-lg-9 main">
</div>
<div class="col col-lg-3 d-none d-lg-block aside">
</div>
</div>
<div class="row row-cols-4"> # 用于快速指定跨断点的列数
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<div class="col-auto">
4.content
4.1引用
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
4.2 无样式列表
<ul class="list-unstyled">
</ul>
4.3 横项列表
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
4.3 图片
class="img-fluid"
class="img-thumbnail"
class="rounded float-left"
class="rounded float-right"
class="rounded mx-auto d-block"
class="img-fluid img-thumbnail"
4.4 表格
<table class="table table-striped"> # 斑马条纹
<table class="table table-hover"> # 悬停状态
4.5 图形
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>
4.6 文本
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>
<div class="badge badge-primary text-wrap" style="width: 6rem;"> # 覆盖
<div class="text-nowrap bd-highlight" style="width: 8rem;"> # 不覆盖
<a href="#" class="text-decoration-none">Non-underlined link</a> # 无装修
<div class="col-2 text-truncate"> # 截断
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
4.7 定位,固定
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<div class="fixed-top">...</div> # 置顶
<div class="fixed-bottom">...</div> # 置底
<div class="sticky-top">...</div> # 滑动固定 , position: sticky as position: relative.
<div class="visible">...</div> # 可见
<div class="invisible">...</div> # 不可见
4.8 大小
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
class="mw-100" # max-width: 100%;
class="mw-100" # max-height: 100%;
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
4.9 overflow
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
5.0 spacing
<div class="row mx-md-n5">
<div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>
m - for classes that set margin
p - for classes that set padding
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
5.1 embed
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
5.2 display
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
5.3 colors
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
5.4 close-icon
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
5.5 clearfix
<div class="clearfix">...</div>
5.6 clearfix- 一行2列
<div class="d-flex clearfix">
<div class="float-start">
......
</div>
<div class="float-start">
......
</div>
</div>
5.7
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p><a href="#" class="pe-none">This link</a>
<p><a href="#" class="pe-auto">This link</a>
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
5.8 Media object
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
