Bootstrap4

Bootstrap4 文字排版

Bootstrap4 文字排版 Bootstrap 4 默认设置 Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。 默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。 此外,所有的 元素 margin-top: 0 、 margin-bot... »

Bootstrap4 导航栏

Bootstrap4 导航栏 导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 元素并添加 class=”navbar-nav” 类。 然后在 元素上添加 .nav-item 类, 元素上使... »

Bootstrap4 颜色

Bootstrap4 颜色 Bootstrap 4 提供了一些有代表意义的颜色类:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: 实例 代表指定意义的文本颜色 柔和... »

Bootstrap4 面包屑导航(Breadcrumb)

Bootstrap4 面包屑导航(Breadcrumb) 面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。 Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中的 ::bef... »

Bootstrap4 表格

Bootstrap4 表格 Bootstrap4 基础表格 Bootstrap4 通过 .table 类来设置基础表格的样式,实例如下: 实例 Firstname Lastname Email John Doe john@example.com Mary Moe mary@example.com July Dooley july@example.com 条纹表格 通过添加 .table-strip... »

Bootstrap4 表单

Bootstrap4 表单在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。Bootstrap4 表单布局 堆叠表单 :垂直方向 内联表单:水平方向Bootstrap 提供了两种类型的表单布局:堆叠表单以下实例使用两个输入框,一个复选框,一个提交按钮来创建堆叠表单:实例内联表单所有内联表单中的元素... »

Bootstrap4 图像形状

Bootstrap4 图像形状 圆角图片 .rounded 类可以让图片显示圆角效果: 实例 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 缩略图 .img-thumbnail 类用于设置图片缩略图(图片有边框): 实例 图片对齐方式 使用 .float-right 类来设置图片右对齐,使用 .float-left 类设置图片左对齐: 实例 响应式图片 图像有各种各样的尺... »

Bootstrap4 表单控件

以下实例使用两个 input 元素,一个是 text,一个是 password :实例 用户名: 密码: Bootstrap textarea以下实例演示了 textarea 的样式。最后一个是禁用的:实例 Option 1 Option 2 Option 3使用 .radio-inline 类可以让选项显示在同一行上:实例Option 1Option 2Option 3Boots... »

Bootstrap4 Jumbotron

Bootstrap4 Jumbotron

Bootstrap4 JumbotronJumbotron会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息。我们可以通过在 元素 中添加 .jumbotron 类来创建 jumbotron:实例 菜鸟教程 学的不仅是技术,更是梦想!!! »

Bootstrap4 输入框组

Bootstrap4 输入框组

Bootstrap4 输入框组 我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。 使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加在输入框的后面。 最后,我们还需要使用 .input-group-text 类来设置文本的样式。 Bootstrap4 实例 @ @msc... »

Bootstrap4 信息提示框

Bootstrap4 信息提示框

Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框。 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例 成功! ... »

Bootstrap4 自定义表单

Bootstrap4 自定义表单 Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。 自定义复选框 如果要自定义一个复选框,可以设置 为父元素,类为 .custom-control 和 .custom-checkbox,复选框作为子元素放在该 里头,然后复选框设置为 type=”checkbox”,类为 .custom-control-input。 复选... »

Bootstrap4 按钮

Bootstrap4 按钮Bootstrap 4 提供了不同样式的按钮。实例基本按钮主要按钮次要按钮成功信息警告危险黑色浅色链接按钮类可用于 , , 或 元素上:实例链接按钮按钮按钮设置边框实例主要按钮次要按钮成功信息警告危险黑色浅色不同大小的按钮Bootstrap 4 可以设置按钮的大小:实例大号按钮默认按钮小号按钮块级按钮通过添加 .btn-block 类可以设置块级按钮:实例按钮 1激活和... »

Bootstrap4 轮播

Bootstrap4 轮播

Bootstrap4 轮播 轮播是一个循环的幻灯片: 如何创建轮播 以下实例创建了一个简单的图片轮播效果 : 实例 轮播图片上添加描述 在每个 内添加 来设置轮播图片的描述文本:: 实例 第一张图片描述标题 描述文字! 以上实例中使用的类说明 类 描述 .carousel 创建一个轮播 .carousel-indicators 为轮播添加一个指示符,就是轮播图底下的一个个小点,轮播的过程可以显示目... »

Bootstrap4 按钮组

Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 元素上添加 .btn-group 类来创建按钮组。 实例 Apple Samsung Sony 提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。 实例 Apple Samsung Sony 垂直按钮组 可以使用 .btn-group-vertical 类来创建垂直的按钮组: ... »

Bootstrap4 模态框

Bootstrap4 模态框 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 如何创建模态框 以下实例创建了一个简单的模态框效果 : 实例 打开模态框 模态框头部 × 模态框内容.. 关闭 模态框尺寸 我们可以通过添加 .modal-sm 类来创建一个小模态框,.modal-lg 类可... »

Bootstrap4 徽章(Badges)

Bootstrap4 徽章(Badges)

Bootstrap4 徽章徽章主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 添加到 元素上即可。 »

Bootstrap4 提示框

Bootstrap4 提示框 提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。 如何创建提示框 通过向元素添加 data-toggle=”tooltip” 来来创建提示框。 title 属性的内容为提示框显示的内容: 鼠标移动到我这 注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。 以下实例可以在... »

Bootstrap4 进度条

Bootstrap4 进度条

Bootstrap4 进度条 进度条可以显示用户任务的完成过程。 创建一个基本的进度条的步骤如下: 添加一个带有 .progress 类的 。 接着,在上面的 内,添加一个带有 class .progress-bar 的空的 。 添加一个带有百分比表示的宽度的 style 属性,例如 style=”width:70%” 表示进度条在 70% 的位置。 实例 进度条高度 进度... »

Bootstrap4 弹出框

Bootstrap4 弹出框 弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle=”popover” 来来创建弹出框。 title 属性的内容为弹出框的标题,data-content 属性显示了弹出框的文本内容: 多次点我 注意: 弹出框要写在 jQuery 的初始化代码里: 然后... »

Bootstrap4 分页

Bootstrap4 分页网页开发过程,如果碰到内容过多,一般都会做分页处理。.pagination-lg 类设置大字体的分页条目,.pagination-sm 类设置小字体的分页条目:实例 Previous 1 2 3 Next Previous 1 2 3 Next面包屑导航 .breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航:实例 Ph... »

Bootstrap 滚动监听(Scrollspy)

Bootstrap 滚动监听(Scrollspy) 滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 如何创建滚动监听 以下实例演示了如何创建滚动监听: 实例 <!-- The navbar - The elements are used to jump to a section in the scrollable... »

Bootstrap4 列表组

Bootstrap4 列表组

Bootstrap4 列表组大部分基础列表组都是无序的。要创建列表组,可以在 元素上添加 .list-group 类, 在 元素上添加 .list-group-item 类:实例 First item Second item Third item激活状态的列表项通过添加 .active 类来设置激活状态的列表项:实例 Active item Second item Third ite... »

Bootstrap4 小工具

Bootstrap4 小工具Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 »

Bootstrap4 卡片

Bootstrap4 卡片 简单的卡片 我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片,实例如下: 实例 简单的卡片 Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。 头部和底部 .card-header类用于创建卡片的头部样式, .card-footer 类用于创建卡片的底部样式: 实例 头部 内容 ... »

Page 1 of 212