。。。。。。。。。。。
在 Bootstrap 4 中 HTML 元素用于创建字号更小的颜色更浅的文本
Bootstrap 4 定义 为黄色背景及有一定的内边距。
Bootstrap 4 定义 HTML 元素的样式为显示在文本底部的一条虚线边框
更多排版类:在class中加
.lead,让段落更突出
.text-justify,设定文本对齐,段落中超出屏幕部分文字自动换行
.initialism,显示在 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
.list-unstyled, 移除默认的列表样式,列表项中左对齐 (中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
。。。。。。。。。。。
,是表头,默认加粗字体
。。。。。。。。。。。
。。。。。。。。。。。
。。。。。。。。。。。
.table-hover 类可以为表格的每一行添加鼠标悬停效果(默认灰色背景)
。。。。。。。。。。。
。。。。。。。。。。。
。。。。。。。。。。。
鼠标悬停效果 - 黑色背景表格
。。。。。。。。。。。
.table-light,浅灰色,可以是表格行的背景
.table-dark,深灰色,可以是表格行的背景
。。。。。。。。。。。
。。。。。。。。。。。
.table-responsive 类用于创建响应式表格:在屏幕宽度小于 992px 时会创建水平滚动条,如果可视区域宽度大于 992px 则显示不同效果(没有滚动条)
你可以通过以下类设定在指定屏幕宽度下显示滚动条:
。。。。。。。。。。。
.rounded 类可以让图片显示圆角效果
。。。。。。。。。。。
。。。。。。。。。。。
。。。。。。。。。。。
。。。。。。。。。。。
图像有各种各样的尺寸,我们需要根据屏幕的大小自动适应。
我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。
Jumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息,Jumbotron 里头可以放一些 HTML标签,也可以是 Bootstrap 的元素。
。。。。。。。。。。。
Bootstrap 4 可以很容易实现信息提示框。
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接
提示: × (×) 是 HTML 实体字符,来表示关闭操作,而不是字母 “x”
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果
Bootstrap 4 提供了不同样式的按钮,按钮类可用于 通过添加 .btn-block 类可以设置块级按钮
按钮可设置为激活或者禁止点击的状态。
.active 类可以设置按钮是可用的, disabled 属性可以设置按钮是不可点击的。 注意 元素不支持 disabled 属性,你可以通过添加 .disabled 类来禁止链接的点击。
Bootstrap 4 中允许我们将按钮放在同一行上。
徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到
元素上即可。 徽章可以根据父元素的大小的变化而变化
徽章(Badges),可以嵌入元素内
进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下:
添加一个带有百分比表示的宽度的 style 属性,例如 style=”width:70%” 表示进度条在 70% 的位置。默认颜色蓝色
进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改它
进度条可以设置多种颜色
网页开发过程,如果碰到内容过多,一般都会做分页处理。
Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在
当前页可以使用 .active 类来高亮显示
.disabled 类可以设置分页链接不可点击
可以将分页条目设置为不同的大小。
大部分基础列表组都是无序的,要创建列表组,可以在通过添加 .active 类来设置激活状态的列表项
.disabled 类用于设置禁用的列表项
要创建一个链接的列表项,可以将
元素上你可以使用 href 属性来代替 data-target 属性,默认情况下折叠的内容是隐藏的,你可以添加 .show 类让内容默认显示
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线
下拉菜单中的可用项与禁用项
.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。
如果要禁用下拉菜单的选项,可以使用.disabled 类。
指定向上弹出的下拉菜单
如果你希望下拉菜单向上弹出,可以将
Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
.collapse 类用于指定一个折叠元素 (实例中的
); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示,需要在
注意:
使用 data-parent 属性来确保所有的折叠元素在指定的父元素下,这样就能实现在一个折叠选项显示时其他选项就隐藏。
如果你想创建一个简单的水平导航栏,可以在元素上添加 .nav类,在每个 使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。
.nav-pills 类可以将导航项设置成胶囊形状。
如果你要设置选项卡是动态可切换的,可以在每个链接上添加 data-toggle=”tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。
导航栏上的选项可以使用
提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。) 必须匹配导航栏上的链接选项 (
title 属性的内容为提示框显示的内容
注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。
默认情况下提示框显示在元素上方。
弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。
title 属性的内容为弹出框的标题,data-content 属性显示了弹出框的文本内容
注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。
默认情况下弹出框显示在元素右侧。
默认情况下,弹出框在再次点击指定元素后就会关闭,你可以使用 data-trigger=”focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框
提示:如果你想实现在鼠标移动到元素上显示,移除后消失的效果,可以使用 data-trigger 属性,并设置值为 “hover”
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。
注意可滚动项元素上的 id (