官网:列表组 - Bootstrap框架 (bootstrapdoc.com)
菜鸟教程:Bootstrap 列表组 | 菜鸟教程 (runoob.com)
1.什么是bootstrap
bootstrap是一个用于快速开发web应用程序和网站的前端框架。基于HTML、CSS和JavaScript封装
响应式
ElementUI 更适合用于企业内部的管理系统、后台管理等应用场景,而 Bootstrap 更适合用于构建响应式的 Web 网站、博客等前端页面。
2.Bootstrap5响应式容器
容器是Bootstrap一个基本的构建块,它包含、填充和对齐给定设备或视口中的内容。
Bootstrap需要一个容器元素来包裹网站的内容
- .container类用于固定宽度并支持响应式布局的容器。
- .container-fluid类用于100%宽度,占据全部视口(viewport)的容器
3.Bootstrap 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
要进行格栅系统操作,首先就要创建格栅系统的容器。
“container”和“row”共同组成格栅容器,“row”代表的就是一行。
创建格栅容器后,设置名为col-md-的div,当位数为1时,表示每个div的宽度占1/12,所以每行最多可以放置12个子div。
如果超过12个,则会在下一行显示。
3.1嵌套列
3.2列偏移
列偏移是通过类名(offset-*-*)来设置的。第一个*可以是sm、ms、lg、xl,表示屏幕设备类型,第二个星号*可以是1到11的数字。
3.3列排序
order-* 必须给每一个div都设置才能生效。
如果只有一个设置了,则会俺设置了的进行排序,没设置的不进行排序。
数字1-5是有效的,其余数字不生效。
order-first、order-last:也可以进行排序,优先级比order-*靠前
4.Bootstrap 排版
4.1标题
h1~h6:既可以用标签,也可以用class类
4.1.1:class="display-1"
突出显示更大的标题:class="display-1"
4.2.2.class="lead"
突出显示段落:class="lead"
4.3.3small
如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本(父元素大小的85%)
4.3.1<small class=' text-mutedclass'>
创建字号更小,颜色更浅
4.2text-center文字居中
.lead | 使段落突出显示 | 尝试一下 |
.small | 设定小文本 (设置为父文本的 85% 大小) | 尝试一下 |
.text-left | 设定文本左对齐 | 尝试一下 |
.text-center | 设定文本居中对齐 | 尝试一下 |
.text-right | 设定文本右对齐 | 尝试一下 |
.text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 | 尝试一下 |
.text-nowrap | 段落中超出屏幕部分不换行 | 尝试一下 |
.text-lowercase | 设定文本小写 | 尝试一下 |
.text-uppercase | 设定文本大写 | 尝试一下 |
.text-capitalize | 设定单词首字母大写 | 尝试一下 |
.initialism | 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 | 尝试一下 |
.blockquote-reverse | 设定引用右对齐 | 尝试一下 |
.list-unstyled | 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) | 尝试一下 |
.list-inline | 将所有列表项放置同一行 | 尝试一下 |
.dl-horizontal | 该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例 | 尝试一下 |
.pre-scrollable | 使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 |
对于较长的文本,可以使用类.text-truncate用省略号截断文本。在一行中显示一段文本但没有足够的可用空间时,它特别有用。