文章: 阅读:

Bootstrap4 分页

网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap4 可以很简单的实现分页效果。当前页可以使用 .active 类来高亮显示。.disabled 类可以设置分页链接不可点击。可以将分页条目设置为不同的大小。.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目。.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航。
CSSBootstrap

阅读全文 >>

Bootstrap4 进度条

进度条可以显示用户任务的完成过程。进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他。可以在进度条内添加文本，如进度的百分比。默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条。可以使用 .progress-bar-striped 类来设置条纹进度条。使用 .progress-bar-animated 类可以为进度条添加动画。进度条可以设置多种颜色。
CSSBootstrap

阅读全文 >>

Bootstrap4 徽章

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 span 元素上即可。 徽章可以根据父元素的大小的变化而变化。使用 .badge-pill 类来设置药丸形状徽章。
CSSBootstrap

阅读全文 >>

Bootstrap4 按钮

Bootstrap4 提供了不同样式的按钮。按钮类可用于 a, button, 或 input 元素上。Bootstrap4 可以设置按钮的大小。通过添加 .btn-block 类可以设置块级按钮。按钮可设置为激活或者禁止点击的状态。.active 类可以设置按钮是可用的，disabled 属性可以设置按钮是不可点击的。注意 a 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。
CSSBootstrap

阅读全文 >>

Bootstrap4 信息提示框

Bootstrap4 可以很容易实现信息提示框。提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现。提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接。可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
CSSBootstrap

阅读全文 >>

Bootstrap4 Jumbotron 超大屏幕

Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。可以通过在 div 元素 中添加 .jumbotron 类来创建 jumbotron。
CSSBootstrap

阅读全文 >>

Bootstrap4 图像形状

.rounded 类可以让图片显示圆角效果，.rounded-circle 类可以设置椭圆形图片，.img-thumbnail 类用于设置图片缩略图 (图片有边框)，使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐，图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。我们可以通过在 img 标签中添加 .img-fluid 类来设置响应式图片。
CSSBootstrap

阅读全文 >>

Bootstrap4 表格

Bootstrap4 通过 .table 类来设置基础表格的样式。通过添加 .table-striped 类，将在 tbody 内的行上看到条纹。.table-bordered 类可以为表格添加边框。.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）。.table-dark 类可以为表格添加黑色背景。联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格。
CSSBootstrap

阅读全文 >>

Bootstrap4 颜色

Bootstrap4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light。
CSSBootstrap

阅读全文 >>

Bootstrap4 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要，定义列数。Bootstrap4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
CSSBootstrap

阅读全文 >>

Bootstrap4 小工具

Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。使用 border 类可以添加或移除边框。Bootstrap4 提供了一些类来设置边框颜色。使用 rounded 类可以添加圆角边框。.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动。可以设置浮动 (.float- * -left right - * 为 sm, md, lg 或 xl) 的方向依赖于屏幕的大小。元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度。元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度。
CSSBootstrap

阅读全文 >>

Bootstrap4 弹性布局

Bootstrap4 通过 flex 类来控制页面的布局。Bootstrap3 与 Bootstrap4 最大的区别就是 Bootstrap4 使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap3。.flex-row 可以设置弹性子元素水平显示，这是默认的。使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
CSSBootstrap

阅读全文 >>

Bootstrap4 基础知识

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

阅读全文 >>

Bootstrap 附加导航（Affix）插件

附加导航（Affix）插件允许指定 div 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 div 会锁定在某个位置，不会随着页面其他部分一起滚动。如果想要单独引用该插件的功能，那么需要引用 affix.js。或者，正如 Bootstrap 插件概览 一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
CSSBootstrap

阅读全文 >>