本文共 8603 字，大约阅读时间需要 28 分钟。
【Bootstrap5】精细学习记录
Bootstrap模板
Bootstrap 模板 Hello, world!
Bootstrap一切以源码为重，大体和html差不多（其中网格系统算是创新且重要的），需要时查源码。
Bootstrap特性
移动设备优先
响应式图像
全局显示、排版和链接
等……
具体可见
多阅读源码！
Bootstrap网格系统
网格系统将container容器分为12列，行row最好在container内，列在行row内，再通过"col--"定义在不同视口情况下占的列数。
基本网格结构：
.......
Bootstrap v5.0.0源码：
可以通过以下代码，不断调整视口大小自己感觉。
bootstrap-learning hello world
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
列偏移
即设置列的margin-left，通过查阅源码，bootstrap5.0.0可以通过
offset-i i偏移的列数（0，11）offset-xx-i xx:md,sm,···
列嵌套
顾名思义，在row里面再填列row就可以了。
新列的网格系统均参考父元素。
列排序
Bootstrap5.0.0中，排序使用order
order-i i表示顺序order-xx-i xx:md,sm,···默认顺序层级相同，层级相同时，靠前的排前面
Bootstrap排版
text
Bootstrap5.0.0源码：
.text-start { text-align: left !important;}.text-end { text-align: right !important;}.text-center { text-align: center !important;}.text-decoration-none { text-decoration: none !important;}.text-decoration-underline { text-decoration: underline !important;}.text-decoration-line-through { text-decoration: line-through !important;}.text-lowercase { text-transform: lowercase !important;}.text-uppercase { text-transform: uppercase !important;}.text-capitalize { text-transform: capitalize !important;}.text-wrap { white-space: normal !important;}.text-nowrap { white-space: nowrap !important;}/* rtl:begin:remove */.text-break { word-wrap: break-word !important; word-break: break-word !important;}/* rtl:end:remove */.text-primary { color: #0d6efd !important;}.text-secondary { color: #6c757d !important;}.text-success { color: #198754 !important;}.text-info { color: #0dcaf0 !important;}.text-warning { color: #ffc107 !important;}.text-danger { color: #dc3545 !important;}.text-light { color: #f8f9fa !important;}.text-dark { color: #212529 !important;}.text-white { color: #fff !important;}.text-body { color: #212529 !important;}.text-muted { color: #6c757d !important;}.text-black-50 { color: rgba(0, 0, 0, 0.5) !important;}.text-white-50 { color: rgba(255, 255, 255, 0.5) !important;}.text-reset { color: inherit !important;} 更多可参考，然后多阅读源码就行了。
Bootstrap基础组件
代码
内联代码代码块代码中<: < >: >
表格
实测：Bootstrap5.0.0还有一些bug😅
最好先使用Bootstrap3或者4。
--------------------后面以bootstrap3为准--------------------
一些样式就不说了。
表单
垂直表单（默认）
内联表单
水平表单
按钮
图片
辅助类
Bootstrap组件
字体图标
下拉菜单
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。
···太多了，不想写了😭，菜鸟教程已经写得很全了，只需要自己注意一下版本问题就行了，下面就记录一下关键类吧！（相信xdm都会vscode的Emmet吧）···
按钮组
#基本按钮组div.btn-group>button[type=button].btn.btn-defualt*3#按钮工具栏div.btn-tool[role=toolbar]>(div.btn-group>button[type=button].btn.btn-default)*3#按钮大小btn-group-xx xx:sm,lg···#嵌套#垂直按钮组div.btn-group-vertical>(···)
按钮下拉菜单
基本：
按钮下拉菜单大小：
调整按钮的类即可。
按钮上拉菜单
向父 .btn-group 容器添加 .dropup 即可。
输入框组
基本输入框组：
1.把前缀或后缀元素放在一个带有 class .input-group 的中。2.接着，在相同的内，在 class 为 .input-group-addon 的 内放置额外的内容。3.把该 放置在 元素的前面或者后面。div.input-group>(span.input-group-addon{@}+input[type=text].form-control)
按钮插件：
使用.input-group-addon替代.input-group-btn来包裹按钮div.input-group>(span.input-group-button{@}+input[type=text].form-control) 导航元素
标签式导航菜单
ul.nav.nav-tabs>(li.active>a[href=#]+(li>a[href=#])*5)
胶囊式导航菜单
ul.nav.nav-pills>(li.active>a[href=#]+(li>a[href=#])*5)
垂直导航菜单
在使用.nav、.nav-pills或.nav-tabs的同时使用.nav-stacked
两端对齐导航
在使用.nav、.nav-pills或.nav-tabs的同时使用.nav-justified
菜单项内容
.tab-content与.tab-pane和data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。
首页
菜鸟教程 —— 学的不仅是技术，更是梦想！！！
导航栏
默认导航栏
1.向
响应式导航栏
# 菜鸟教程
表单导航栏
# 在原本标签位置：
导航栏按钮
# 不在form中的button# .navbar-btn 可被使用在 和 元素上。
导航栏文本
导航栏组件对齐
.navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。
导航栏固定在顶底部
# 顶部 # 底部 # 随着页面移动的顶底部
反色导航栏
面包屑组
分页
分页（Pagination）
ul.pagination>(li>a[href=#]{«}+(li>a[href=#]{$}*5)+li>a[href=#]{»}) 翻页（Pager）
ul.pager>(li.previous>a[href=#]{←pre}+li.next>a[href=#]{next→}) 标签
默认标签主要标签成功标签信息标签警告标签危险标签
徽章
50# 当内部为空时，自动隐藏42# pull-right、pull-left 调整徽章位置# 相对标签更圆润
超大屏幕
1.创建一个带有 class .jumbotron. 的容器2.除了更大的，字体粗细 font-weight 被减为 200
页面标题
如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的中div.page-header
缩略图
1.在图像周围添加带有 class .thumbnail 的 标签。2.这会添加四个像素的内边距（padding）和一个灰色的边框。3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。
警告
普通：
成功！很好地完成了提交。信息！请注意这个信息。警告！请不要提交。错误！请进行一些更改。
可取消：
# 同时添加alert-dismissable
进度条
其他样式：
# 在 progress-bar 基础上添加 progress-bar-* ( * = success、info、warning、danger) 决定进度条颜色# 条纹的进度条 在 progress 基础上添加 progress-striped# 运动起来 在 progress 基础上添加 active# 堆叠起来 div.progress元素内部 添加多个 div.progress-bar
多媒体对象
媒体对象可以用更少的代码来实现媒体对象（如：图像、视频、音频等）与文字的混排。
左对齐
这是一些示例文本...
列表组
ul.list-group>(li.list-group-item)*5
列表组竖直排列，可以使用一下css代码获得水平排列列表组。
.list-group-horizontal .list-group-item { display: inline-block;}.list-group-horizontal .list-group-item { margin-bottom: 0; margin-left:-4px; margin-right: 0;}.list-group-horizontal .list-group-item:first-child { border-top-right-radius:0; border-bottom-left-radius:4px;}.list-group-horizontal .list-group-item:last-child { border-top-right-radius:4px; border-bottom-left-radius:0;} 面板
基本
这是一个基本的面板
其他样式：
panel-primarypanel-successpanel-infopanel-warningpanel-danger
面板内部结构：
panel-heading1.使用 .panel-heading class 可以很简单地向面板添加标题容器。2.使用带有 .panel-title class 的-
来添加预定义样式的标题。panel-bodypanel-footer其他结构：如： table、ul……
Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。
div.well
Bootstrap插件
转载地址：http://vsgnz.baihongyu.com/