本文详细介绍了Bootstrap4的网格系统，包括不同屏幕尺寸下的类应用，以及排版类的使用，如文本样式、列表样式等。此外，还讲解了Bootstrap4的颜色类，表格的多种样式，图片形状的控制，以及折叠和导航组件的实现，包括折叠导航栏的创建。内容涵盖了Bootstrap4的基础和实用特性，帮助开发者更好地理解和运用这个流行的前端框架。
详情 https://www.runoob.com/bootstrap4/bootstrap4-grid-basic.html
目录
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
Bootstrap4 更多排版类的实例：
.font-weight-bold 加粗文本
.font-weight-normal 普通文本
.font-weight-light 更细的文本
.font-italic 斜体文本
.small 指定更小文本 (为父元素的 85% )
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 abbr 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( ul 和 ol 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.pre-scrollable 使 pre 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
Bootstrap 4 提供了一些有代表意义的颜色类：
muted 柔和颜色
primary 主要颜色
success 成功颜色
info 信息颜色
warning 警告颜色
danger 危险颜色
secondary 副标题颜色
dark 深灰颜色
light 浅灰颜色
white 白色颜色
例如：class=“bg-success text-info table-primary”
Bootstrap 4 表格：
.table 类来设置基础表格的样式
.table-striped 类，您将在 tbody 内的行上看到条纹
.table-bordered 类可以为表格添加边框
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）
.table-dark（也可以是table-primary table-success等） 类可以为表格添加黑色背景
.table-sm 类用于通过减少内边距来设置较小的表格
.table-responsive 类用于创建响应式表格
你可以通过以下类设定在指定屏幕宽度下显示滚动条：
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
bootstrap4 图片形状：
.rounded 类可以让图片显示圆角效果
.rounded-circle 类可以设置椭圆形图片
.img-thumbnail 类用于设置图片缩略图(图片有边框)
使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐
.img-fluid 类来设置响应式图片
Bootstrap4 折叠：
1 .collapse 类用于指定一个折叠元素 (实例中的 < div>); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 < a> 或 < button> 元素上添加 data-toggle=“collapse” 属性。 data-target="#id" 属性是对应折叠的内容 (< div id=“demo”>)。
注意: < a> 元素上你可以使用 href 属性来代替 data-target 属性
2 默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示
3 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个简单的手风琴效果。
Bootstrap4 导航
1 如果你想创建一个简单的水平导航栏，可以在 < ul> 元素上添加 .nav类，在每个 < li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类
2 .justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐
3 .flex-column 类用于创建垂直导航
4 使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记
5 .nav-pills 类可以将导航项设置成胶囊形状。
6 .nav-justified 类可以设置导航项齐行等宽显示。
7 选项卡下拉菜单
折叠导航栏
通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。
要创建折叠导航栏，可以在按钮上添加 class=“navbar-toggler”, data-toggle=“collapse” 与 data-target="#thetarget" 类。然后在设置了 class=“collapse navbar-collapse” 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id
导航栏的表单 < form> 元素使用 class=“form-inline” 类来排版输入框与按钮
你也可以使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签
使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样
使用 .fixed-top 类来实现导航栏的固定
.fixed-bottom 类用于设置导航栏固定在底部
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
