Bootstrap 4 示例

Bootstrap 网格系统

• Bootstrap 平板电脑的两列网格布局和台式机
• Bootstrap 三横向模式下的平板电脑和桌面的列网格布局
• 适用于所有设备的 Bootstrap 自动布局列
• Bootstrap 列的大小基于内容的宽度
• Bootstrap 适用于所有设备的多列网格布局
• Bootstrap 嵌套网格列布局
• Bootstrap 行内列的垂直对齐方式
• Bootstrap 行内各个列的垂直对齐方式
• Bootstrap 对一行中的网格列重新排序
• Bootstrap 偏移网格列
• Bootstrap 紧凑网格列
• Bootstrap 固定布局
• Bootstrap 流畅布局
• Bootstrap 响应式布局

Bootstrap 排版

• Bootstrap 标题
• Bootstrap 标题和辅助文本
• Bootstrap 显示标题
• Bootstrap 段落
• Bootstrap 文本格式
• Bootstrap 文本对齐方式
• Bootstrap 文本转换
• Bootstrap 文本强调类
• 在 Bootstrap 中格式化块引用

Bootstrap 表

• 使用 Bootstrap 创建简单表
• 使用 Bootstrap 创建暗表
• 具有备用背景的 Bootstrap 表
• Bootstrap 条纹暗表
• Bootstrap 带边框的表格
• 使用 Bootstrap 创建无边框表格
• 在表格行上启用悬停状态
• Bootstrap 压缩表
• 使用 Bootstrap 为表头设置浅色背景
• 使用 Bootstrap 为表头设置深色背景
• Bootstrap 表行强调类
• Bootstrap 响应式表格

Bootstrap 列表

• 使用 Bootstrap 创建列表
• Bootstrap 无样式有序和无序列表
• 内嵌有序和无序列表项
• 使用 Bootstrap 创建水平定义列表
• Bootstrap 列表组
• 带有链接项目的Bootstrap列表组
• 带有自定义内容的Bootstrap链表组
• Bootstrap 列出具有重点类别的组
• Bootstrap linked list groups with emphasis classes

Bootstrap 表单

• 使用 Bootstrap 创建垂直表单
• 使用 Bootstrap 创建水平表单
• 使用 Bootstrap 创建内联表单
• Bootstrap 静态表单控件
• 使用 Bootstrap 垂直堆叠放置单选按钮和复选框
• 在 Bootstrap 中内嵌单选按钮和复选框
• 使用 Bootstrap 调整输入和选择框的高度
• 使用 Bootstrap 调整表单控件的网格大小
• 使用 Bootstrap 禁用表单控件
• 使用 Bootstrap 一次性禁用所有表单控件
• 使用 Bootstrap 创建只读输入
• 在表单控件周围放置块帮助文本
• 在表单控件周围放置内嵌帮助文本
• Bootstrap 表单验证
• 以工具提示样式显示 Bootstrap 验证反馈
• Bootstrap 中支持的表单控件

Bootstrap 自定义表单

• 使用 Bootstrap 创建自定义复选框
• 使用 Bootstrap 创建自定义单选按钮
• 在 Bootstrap 中禁用自定义复选框和单选按钮
• 使用 Bootstrap 创建切换开关
• 使用 Bootstrap 创建自定义选择菜单
• Bootstrap 自定义选择菜单的高度尺寸
• 使用 Bootstrap 创建自定义范围输入
• 为 Bootstrap 自定义指定 min、max 和 step 属性范围
• 使用 Bootstrap 创建自定义文件输入

Bootstrap 输入组

• 使用 Bootstrap 创建前置和附加输入
• 在 Bootstrap 中使用复选框和单选按钮创建输入组
• 在 Bootstrap 的输入组中放置多个输入
• 在 Bootstrap 的输入组中放置多个插件
• 在 Bootstrap 的输入组中放置按钮
• 在 Bootstrap 的输入组中放置下拉按钮
• 在输入组中放置分段下拉按钮组引导
• Bootstrap 输入组的高度大小

Bootstrap 按钮

• 使用 Bootstrap 创建按钮
• 在 Bootstrap 中创建轮廓按钮样式
• 更改 Bootstrap 按钮的大小
• 使用 Bootstrap 创建块级按钮
• 使用锚元素创建禁用的 Bootstrap 按钮
• 使用 input 和 button 元素创建禁用的 Bootstrap 按钮
• 在 Bootstrap 中启用按钮的活动状态
• 在 Bootstrap 中创建微调按钮

Bootstrap 按钮组

• 使用 Bootstrap 创建按钮组
• 使用 Bootstrap 创建按钮工具栏
• Bootstrap 按钮组的高度大小
• 在 Bootstrap 中创建嵌套按钮组
• 在 Bootstrap 中创建垂直堆叠的按钮组
• 使用 Bootstrap 创建对齐按钮组
• 在 Bootstrap 中创建切换按钮
• 使用 Bootstrap 创建按钮复选框
• 使用 Bootstrap 创建按钮单选

Bootstrap 图片

• 使用 Bootstrap 制作缩略图、圆角和圆形图像
• 使用 Bootstrap 制作响应式图片
• 使用 Bootstrap 制作响应式视频
• 使用 Bootstrap 水平对齐图像
• Bootstrap 媒体对象
• Bootstrap 圆形媒体对象
• Bootstrap 嵌套媒体对象
• Bootstrap 中媒体对象的水平对齐
• Bootstrap 中媒体对象的垂直对齐方式
• 在 Bootstrap 中创建媒体列表

Bootstrap 卡

• 使用 Bootstrap 创建卡片
• 使用 Bootstrap 创建正文卡片
• 在 Bootstrap 中为卡片添加页眉和页脚
• 在 Bootstrap 卡中放置列表组
• 在 Bootstrap 中创建具有多种内容类型的卡片
• 在 Bootstrap 中自定义卡片背景
• 在 Bootstrap 中自定义卡片边框和文字
• 使用 Bootstrap 创建卡片组
• 使用 Bootstrap 创建卡片组
• 使用 Bootstrap 创建卡片列
• 使用 Bootstrap 创建水平卡片
• 在 Bootstrap 中创建背景有图片的卡片
• 在 Bootstrap 中对齐卡片内的文本
• 在 Bootstrap 中设置卡片大小
• 使整个卡片在 Bootstrap 中可点击

Bootstrap 图标

• 在 Bootstrap 中包含字体很棒的图标
• 在 Bootstrap 中的按钮内放置图标
• 在 Bootstrap 的下拉菜单中使用图标
• 在 Bootstrap 的扩展表单控件中使用图标
• 在 Bootstrap 的选项卡中使用图标
• 在 Bootstrap 的胶囊导航中使用图标

Bootstrap 导航

• 使用 Bootstrap 创建基本导航
• Bootstrap nav 居中对齐
• Bootstrap nav 右对齐
• Bootstrap nav的垂直对齐方式
• 使用 Bootstrap 创建基本选项卡
• 在 Bootstrap 的选项卡中添加图标
• 使用 Bootstrap 创建基本的胶囊导航
• 在 Bootstrap 中向胶囊导航添加图标
• 使用 Bootstrap 创建垂直堆叠胶囊导航
• 在 Bootstrap 的选项卡中添加下拉菜单
• 在 Bootstrap 中向胶囊导航添加下拉菜单
• 使用 Bootstrap 创建填充导航
• 使用 Bootstrap 创建对齐导航

Bootstrap 导航栏

• 使用 Bootstrap 创建导航栏
• 在 Bootstrap 中将徽标图像添加到导航栏
• 在 Bootstrap 的导航栏中添加下拉菜单和搜索框
• 在 Bootstrap 的导航栏中放置搜索表单
• 更改 Bootstrap 导航栏的配色方案
• 创建固定到顶部的 Bootstrap 导航栏
• 创建固定在底部的 Bootstrap 导航栏
• 使用 Bootstrap 创建置顶导航栏

Bootstrap 面包屑和分页

• 使用 Bootstrap 创建面包屑
• 在 Bootstrap 中更改面包屑分隔符
• 使用 Bootstrap 创建分页
• Bootstrap 分页与禁用和活动状态
• 对 Bootstrap 中的禁用链接使用 span 元素分页
• 更改 Bootstrap 分页的大小
• Bootstrap分页居中对齐
• Bootstrap分页右对齐

Bootstrap 徽章

• 使用 Bootstrap 创建徽章
• 在 Bootstrap 徽章上添加重点类
• 使用 Bootstrap 创建胶囊徽章
• 显示带有 Bootstrap 徽章的计数器

Bootstrap 进度条

• 使用 Bootstrap 创建进度条
• 在 Bootstrap 中为进度条添加标签
• 在 Bootstrap 中更改进度条的高度
• 使用 Bootstrap 创建剥离的进度条
• 使用 Bootstrap 创建动画进度条
• 动态更改 Bootstrap 进度条的值
• 使用 Bootstrap 创建堆叠进度条
• 在 Bootstrap 中创建多色进度条
• 在 Bootstrap 中创建多色条纹进度条

Bootstrap 微调器

• 使用 Bootstrap 创建边框微调器
• 使用 Bootstrap 创建彩色微调器
• 使用 Bootstrap 创建不断增长的微调器
• 使用 Bootstrap 创建彩色的生长微调器
• 使用 Bootstrap 创建小型微调器
• 使用 CSS 自定义 Bootstrap 微调器的大小
• 在 Bootstrap 中的按钮内放置微调器
• 在 Bootstrap 中更改微调器的对齐方式

Bootstrap Jumbotron

• 创建 jumbotron 以在 Bootstrap 中展示内容
• 在 Bootstrap 中创建全宽 jumbotron

Bootstrap 模态

• 使用 Bootstrap 创建模态
• 通过数据属性启动 Bootstrap 模态框
• 通过 JavaScript 启动 Bootstrap 模态框
• 在 Bootstrap 中更改模态的大小
• 根据触发器改变模态内容Bootstrap 中的按钮
• 通过 Ajax 在 Bootstrap 模态中加载内容
• 通过数据属性防止 Bootstrap 模态在点击外部时消失
• 防止 Bootstrap 模态通过点击暗区隐藏JavaScript
• 防止 Bootstrap 模态在按下转义键时隐藏通过 JavaScript 生成密钥
• Bootstrap .modal(options)方法
• Bootstrap .modal('toggle')方法
• Bootstrap .modal('show')方法
• Bootstrap .modal('hide')方法
• Bootstrap .modal('handleUpdate') 方法
• 在 Bootstrap 模态窗口完全关闭时显示消息

Bootstrap 下拉菜单

• 通过数据属性创建下拉菜单
• 向 Bootstrap 导航栏添加下拉菜单
• 将下拉菜单添加到 Bootstrap 导航
• 向 Bootstrap 按钮添加下拉菜单
• 向拆分按钮添加下拉菜单
• 向按钮组添加下拉菜单
• 在垂直堆叠的按钮组中添加下拉菜单
• 在 Bootstrap 中创建 dropleft 和 dropright 菜单
• 在 Bootstrap 中创建右对齐下拉菜单
• 在 Bootstrap 中为下拉项添加标题
• 在 Bootstrap 的下拉菜单中禁用项目
• 通过 JavaScript 向任何元素添加下拉菜单
• Bootstrap $().dropdown('toggle') 方法
• Bootstrap $().dropdown('show') 方法
• Bootstrap $().dropdown('hide') 方法
• Bootstrap $().dropdown('update') 方法
• 获取Bootstrap点击下拉链接的文字内容

Bootstrap 选项卡

• 使用 Bootstrap 创建基本选项卡
• 通过数据属性创建 Bootstrap 动态选项卡
• 通过 JavaScript 创建 Bootstrap 动态选项卡
• 通过 JavaScript 激活各个 Bootstrap 选项卡
• Bootstrap $().tab('show') 方法
• 获取Bootstrap中活动选项卡和上一个选项卡的名称

Bootstrap 工具提示

• 使用 Bootstrap 创建工具提示
• 通过数据属性设置 Bootstrap 工具提示的位置
• 通过 JavaScript 设置 Bootstrap 工具提示的位置
• 通过 JavaScript 设置 Bootstrap 工具提示的标题文本
• 通过 JavaScript 在 Bootstrap 工具提示中插入 HTML 内容
• 通过 JavaScript 设置 Bootstrap 工具提示的显示隐藏时间
• 通过 JavaScript 为 Bootstrap 工具提示创建自定义模板
• 通过 JavaScript 为 Bootstrap 工具提示设置容器元素
• Bootstrap $().tooltip(options)方法
• Bootstrap .tooltip('show')方法
• Bootstrap .tooltip('hide')方法
• Bootstrap .tooltip('toggle')方法
• Bootstrap .tooltip('dispose')方法
• Bootstrap .tooltip('enable')方法
• Bootstrap .tooltip('disable')方法
• Bootstrap .tooltip('toggleEnabled')方法
• Bootstrap .tooltip('update')方法
• 在 Bootstrap 工具提示淡出过渡完成时显示消息

Bootstrap 弹出框

• 使用 Bootstrap 创建弹出框
• 通过数据属性设置 Bootstrap 弹出框的位置
• 通过 JavaScript 设置 Bootstrap 弹出框的位置
• 通过 JavaScript 设置 Bootstrap 弹出框的标题文本
• 在鼠标悬停时触发 Bootstrap 弹出框，而不是通过 JavaScript 点击
• 通过 JavaScript 在 Bootstrap 弹出框内插入 HTML 内容
• 通过 JavaScript 设置 Bootstrap 弹出框的显示隐藏时间
• 通过 JavaScript 为 Bootstrap 弹出框创建自定义模板
• 通过 JavaScript 为 Bootstrap 弹出框设置容器元素
• Bootstrap $().popover(options) 方法
• Bootstrap .popover('show')方法
• Bootstrap .popover('hide')方法
• Bootstrap .popover('toggle')方法
• Bootstrap .popover('dispose')方法
• Bootstrap .popover('enable') 方法
• Bootstrap .popover('disable')方法
• Bootstrap .popover('toggleEnabled')方法
• Bootstrap .popover('update')方法
• 在 Bootstrap 弹出框淡出过渡完成时显示一条消息

Bootstrap 警报消息

• 使用 Bootstrap 创建警报消息
• 使用 Bootstrap 创建成功、错误、警告和信息警报消息
• 使用 Bootstrap 创建主要、次要、深色和浅色警报消息
• 在 Bootstrap 警报中放置其他内容
• 在 Bootstrap 警报中匹配链接颜色
• 通过数据属性关闭 Bootstrap 警报消息
• 通过 JavaScript 关闭 Bootstrap 警报消息
• Bootstrap $().alert() 方法
• Bootstrap $().alert('close')方法
• 在 Bootstrap 警报框完全关闭时显示消息

Bootstrap 手风琴

• 使用 Bootstrap 创建手风琴
• 在 Bootstrap 中使用加减号图标创建手风琴
• 通过数据属性展开和折叠元素
• 通过 JavaScript 展开和折叠元素
• Bootstrap .collapse(options)方法
• Bootstrap .collapse('toggle')方法
• Bootstrap .collapse('show')方法
• Bootstrap .collapse('hide')方法
• 在可折叠元素完全关闭时显示消息

Bootstrap 轮播

• 使用 Bootstrap 创建轮播
• 通过数据属性激活 Bootstrap 轮播
• 通过 JavaScript 激活 Bootstrap 轮播
• 从 Bootstrap 轮播中移除自动滑动
• Bootstrap .carousel(options)方法
• Bootstrap .carousel('cycle')方法
• Bootstrap .carousel('pause')方法
• Bootstrap .carousel(number) 方法
• Bootstrap .carousel('prev')方法
• Bootstrap .carousel('next')方法
• 在 Bootstrap 轮播项目滑动完成时显示消息

Bootstrap 预输入

• 使用本地数据集创建 Twitter typeahead
• 使用外部数据集创建 Twitter typeahead

Bootstrap 滚动监听

• 使用 Bootstrap 创建滚动监听
• 通过数据属性向导航栏添加滚动监听行为
• 通过 JavaScript 向导航栏添加滚动监听行为
• Bootstrap .scrollspy('refresh') 方法
• 在被scrollspy高亮时显示菜单项的名称
• 通过 JavaScript 在 Bootstrap 滚动监听中启用平滑滚动

Bootstrap toast

• 使用 Bootstrap 创建 toast
• 在 Bootstrap 中垂直堆叠 toast
• 使用 CSS 在屏幕上放置 BootstrapToast
• 停止使用 Bootstrap 中的数据属性自动隐藏 toast
• 在 Bootstrap 中使用 JavaScript 禁用 toast 自动隐藏
• 在 Bootstrap 中使用 JavaScript 增加 toast 自动隐藏时间
• Bootstrap .toast('show')方法
• Bootstrap .toast('hide')方法
• Bootstrap .toast('dispose')方法
• 在 Bootstrap toast 完全关闭时显示消息