参考:
Bootstrap5 教程 | 菜鸟教程
https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html
Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网
https://v5.bootcss.com/docs/getting-started/introduction/
之前用bootstrap2和3比较多,最近用到了5,发现好多地方不一样了,所以学习一下。主要写没用过的特性,随缘更新。
文字格式
<div class="container mt-3">
<!-- 高亮文本 -->
<p>用 mark 元素(或 .mark 类)来 <mark>高亮</mark> 文本。</p>
<!-- Display 标题可以输出更大更粗的字体样式, 有1-4 -->
<h1 class="display-1">Display 1</h1>
<!-- abbr是画虚线,title是鼠标Hover时显示的内容 -->
<p>The <abbr title="World Health Organization">WHO</abbr> was...</p>
<br/>
<blockquote class="blockquote">
<p>For 50 years, WWF has been ... globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
</dl>
<!-- code类似markdown里`xxx` -->
<code>span</code>, <code>section</code>
</div>
效果:
其他格式:
名称 | 效果 | 记忆方法 |
---|---|---|
<kbd> | 黑底白字 | keyboard display |
<pre> | 保持原有格式 | |
.small | 更小的文本,是父元素的85% | |
.lead | 使段落更突出 | 就是字更大、行距更大 |
.text-start | 左对齐 | 默认从左到右,所以start表示左 |
.text-center | 文字居中 | |
.text-end | 右对齐 | 跟start相反 |
.text-justify | 段落中超出屏幕的文字自动换行 | |
.text-nowrap | 段落中超出屏幕的文字不换行 | |
.text-lowercase , .text-uppercase ,text-capitalize | 设置小写、大写 | 字面意思 |
.list-inline | 将所有列表项放在同一行 |
表格
这个变化不大。多了:
.table-dark
黑底白框白字。如果再加.table-striped
就是黑底条纹效果,加.table-hover
就是黑底悬停效果.table-borderless
是无任何边框的表格.table-sm
是通过减小内边距从而创建较小的表格- 可以在
<tr>
上使用一些颜色类控制表格的背景色,像是.table-primary|success|info
等等
- 也可以给表头颜色:
<thead class="table-primary">
- 响应式表格用
.table-responsive-sm
最后的字母可以根据屏幕尺寸更换
徽章badges
徽章用于显示消息条数或者未读项,它的大小会跟随父元素的大小变化。用的时候只要加上.badge
即可。<span class="badge bg-primary">主要</span>
- 颜色控制同上
- 药丸型:加
rounded-pill