2019年12月31日

Bootstrap4（13）： 列表组

摘要： 一、创建列表组大部分基础列表组都是无序的。要创建列表组，可以在 元素上添加 .list-group 类, 在 元素上添加 .list-group-item 类: First item Second item Third item 尝试一下 »二、激活状态的列表项通过添加 .active 类来设置激活状态的列表项： Active item Second item Thi... 阅读全文

posted @ 2019-12-31 20:00 springsnow 阅读(814) 评论(0) 推荐(0)

Bootstrap4（12）： 分页

摘要： 一、分页效果网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap 4 可以很简单的实现分页效果。要创建一个基本的分页可以在 元素上添加 .pagination 类。然后在 元素上添加 .page-item 类：: Previous 1 2 3 Next 尝试一下 »二、当前页页码状态当前页可以使用 .active 类来高亮显示： Previous ... 阅读全文

posted @ 2019-12-31 19:48 springsnow 阅读(1504) 评论(0) 推荐(0)

Bootstrap4（11）： 进度条

摘要： 一、进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下：添加一个带有 .progress 类的 。 接着，在上面的 内，添加一个带有 class .progress-bar 的空的 。 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。 尝试一下 »二、进度条高度进度条高度默认为 16px。我们可以使用... 阅读全文

posted @ 2019-12-31 19:39 springsnow 阅读(465) 评论(0) 推荐(0)

Bootstrap4（10）： 徽章（Badges）

摘要： 一、徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 元素上即可。 徽章可以根据父元素的大小的变化而变化:测试标题 New 测试标题 New 测试标题 New 测试标题 New 测试标题 New 测试标题 New尝试一下 »二、各种颜色类型的徽章以下列出了所有颜色类型的徽章:主... 阅读全文

posted @ 2019-12-31 19:29 springsnow 阅读(530) 评论(0) 推荐(0)

Bootstrap4（9）： 按钮组

摘要： 一、创建按钮组Bootstrap 4 中允许我们将按钮放在同一行上。可以在 元素上添加 .btn-group 类来创建按钮组。 Apple Samsung Sony 尝试一下 »提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。 Apple Samsung Sony 尝试一下 »二、垂直按钮组可以使用 .btn-group-vertical ... 阅读全文

posted @ 2019-12-31 19:09 springsnow 阅读(562) 评论(0) 推荐(0)

Bootstrap4（8）： 按钮

摘要： 一、不同样式的按钮基本按钮 主要按钮 次要按钮 成功 信息 警告 危险 黑色 浅色 链接尝试一下 »按钮类可用于 a, button, 或 input 元素上:链接按钮 按钮 尝试一下 »二、按钮设置边框主要按钮 次要按钮 成功 信息 警告 危险 黑色 浅色尝试一下 »三、不同大小的按钮大号按钮 默认按钮 小号按钮尝试一下 »四、块级按钮通过添加 .btn-block 类可以设置块级按钮：按钮... 阅读全文

posted @ 2019-12-31 18:58 springsnow 阅读(471) 评论(0) 推荐(0)

Bootstrap4（7）： 表格设置 信息提示框

摘要： 一、提示框 提示框可以使用 .alert 类（无背景）, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light ,.alert-dark或 .alert-light 类来实现: 成功! 指定操作成功提示信息。 ... 阅读全文

posted @ 2019-12-31 18:44 springsnow 阅读(1037) 评论(0) 推荐(0)

Bootstrap4（6）： 图像设置、超大屏幕Jumbotron

摘要： 一、圆角图片.rounded 类可以让图片显示圆角效果：尝试一下 »二、椭圆图片.rounded-circle 类可以设置椭圆形图片:尝试一下 »三、缩略图.img-thumbnail 类用于设置图片缩略图(图片有边框):尝试一下 »四、图片对齐方式使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:尝试一下 »五、响应式图片图像有各种各样的尺寸，... 阅读全文

posted @ 2019-12-31 18:30 springsnow 阅读(1544) 评论(0) 推荐(0)

Bootstrap4（5）： 表格设置

摘要： 一、Bootstrap4 基础表格：.tableBootstrap4 通过 .table 类来设置基础表格的样式，实例如下: Firstname Lastname Email John Doe john@example.com ... 阅读全文

posted @ 2019-12-31 18:22 springsnow 阅读(1063) 评论(0) 推荐(0)

Bootstrap4（4）： 颜色设置

摘要： 一、文本颜色类：text-***Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: 代表指定意义的文本颜色 ... 阅读全文

posted @ 2019-12-31 17:16 springsnow 阅读(6231) 评论(4) 推荐(0)

Bootstrap4（3）： 文字排版

摘要： 一、Bootstrap 4 默认设置Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。此外，所有的 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。二、排版元素1、h1... 阅读全文

posted @ 2019-12-31 16:34 springsnow 阅读(909) 评论(0) 推荐(0)

Bootstrap4（2）： 网格系统

摘要： Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要，定义列数：Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。一、网格类：col-*-*">Bootstrap 4 网格系统有以下 5 个类:.col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等... 阅读全文

posted @ 2019-12-31 15:07 springsnow 阅读(507) 评论(0) 推荐(0)

Bootstrap4（1）：安装使用

摘要： 一、概述Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app ... 阅读全文

posted @ 2019-12-31 14:41 springsnow 阅读(806) 评论(0) 推荐(0)

导航