列表: ul/ol/dl - bootStrap4常用CSS笔记

【列表: ul/ol/dl】列表默认样式为垂直样式，一个项目占据一行。带灰色圆角边框。

.list-group	定义列表容器类
.list-group-item	定义列表项目类
.active	[列表项目]激活状态下的列表项，蓝色背景，白色字
.disabled	[列表项目]禁用状态下的列表项，白色背景，浅灰色字
.list-group-item-action	[列表项目]鼠标移上去列表背景变成灰色
.list-group-item-{primary、secondary、success、danger、warning、info、dark、light}	定义列表项的背景色。注意使用bg-{...}不是理想的配色方案，不建议使用。

[ol/ul/dl列表示例]

1     <ul class="list-group">
2       <li class="list-group-item">默认选项样式</li>
3       <li class="list-group-item active">激活状态下样式</li>
4       <li class="list-group-item list-group-item-action">鼠标称外去显示灰色背景</li>
5       <li class="list-group-item disabled">禁用样式</li>
6     </ul>

也可以使用链接代替ul/ol/dl，示例:

1     <div class="list-group">
2       <a href="#" class="list-group-item">默认样式</a>
3       <a href="#" class="list-group-item active">激活状态下样式</a>
4       <a href="#" class="list-group-item list-group-item-action">鼠标称外去显示灰色背景</a>
5       <a href="#" class="list-group-item disabled">禁用样式</a>
6     </div>

转载于:https://www.cnblogs.com/wm218/p/10856984.html

列表: ul/ol/dl - bootStrap4常用CSS笔记相关推荐

文字排版 - bootStrap4常用CSS笔记
[文字常用标签] <h1>.<h2>.<h3>.<h4>.<h5>.<h6> 标题类标签,h1字体最大以次类推 <sm ...
导航栏(navbar) - bootStrap4常用CSS笔记
导航栏:navbar 导航栏容器可以包含以下几个常用组成: 1.品牌LOGO(.navbar-brand ) 2.导航菜单(.navbar-nav) 3.导航文本(.navbar-text) 4.折叠 ...
背景颜色 - bootStrap4常用CSS笔记
.bg-primary 重要的背景颜色 .bg-success 执行成功背景颜色 .bg-info 信息提示背景颜色 .bg-warning 警告背景颜色 .bg-danger 危险背景颜色 .bg- ...
rounded-{0 | top | right | bottom | left | circle } 边角半径设置 - bootStrap4常用CSS笔记（2019-05-16 09:38）...
.rounded 四边都带有0.25rem的半径,见下图 .rounded-0 四边都是直角,见下图: .rounded-left 左上角.左上角都带有0.25rem的半径,见下图: .rounded ...
#4 CSS表格＜table＞-表单＜form＞-列表＜ul/ol/dl＞标签的使用
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8&qu ...
html 列表标签 ul ol dl
首先先来看个截图: 这种以列表形式来显示的内容在网页中称为列表,相信大家都经常见到,在Word里也有,很多文档编辑里也都有.在HTML中的列表则有三种类型:无序列表.有序列表.定义列表. 那么我们首先 ...
ul,ol,dl区别
1.ul是无序列表,也就是说没有排列限制可以随意加li: <ul> <li>可以随意放置</li> <li>可以随意放置</li> < ...
常用CSS元素div ul dl dt ol的简单解释
几个css元素的简单解释 div ul dl dt oldiv,这个很常见,块级元素,div尽量少用,和table一样,嵌套越少越好 ol 有序列表. <ol> <li>--& ...
div+css布局必了解的列表元素ul ol li dl dt dd详解
dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div. 块级元素div尽量少用,其实和ta ...
DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

列表: ul/ol/dl - bootStrap4常用CSS笔记

列表: ul/ol/dl - bootStrap4常用CSS笔记相关推荐

最新文章

热门文章