Bootstrap 3 示例

Bootstrap 网格系统

• Bootstrap 适用于所有设备的一列网格布局
• Bootstrap 适用于所有设备的两列网格布局
• Bootstrap 平板电脑的两列网格布局和台式机
• Bootstrap 两个横向模式下的平板电脑和桌面的列网格布局
• Bootstrap 适用于所有设备的三列网格布局
• Bootstrap 三列网格布局平板电脑和台式机
• Bootstrap 三横向模式下的平板电脑和桌面的列网格布局
• Bootstrap 多视图四列可转换网格布局 -台式机 4 列，平板电脑 2 列，移动设备 1 列
• 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 制作响应式图片
• 使用 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 pager的侧边对齐

Bootstrap 标签和徽章

• 使用 Bootstrap 创建内联标签
• Bootstrap 带强调类的内联标签
• 使用 Bootstrap 创建内联徽章

Bootstrap 进度条

• 使用 Bootstrap 创建进度条
• 用标签创建 Bootstrap 进度条
• 使用 Bootstrap 创建剥离的进度条
• 使用 Bootstrap 创建动画进度条
• 使用 Bootstrap 创建堆叠进度条
• Bootstrap 带重点类的进度条
• Bootstrap 带强调类的条纹进度条

Bootstrap 实用程序组件和类

• Bootstrap jumbotron
• Bootstrap 井
• Bootstrap 上下文背景类
• Bootstrap 关闭图标
• Bootstrap 下拉菜单的插入符号
• Bootstrap 内容块居中对齐
• Bootstrap 显示隐藏内容
• Bootstrap .sr-only 帮助类
• Bootstrap .text-hide 帮助类
• Bootstrap .pull-left 辅助类
• Bootstrap .pull-right 辅助类
• Bootstrap .clearfix 帮助类

Bootstrap 按钮

• Bootstrap 中可用的按钮样式
• 更改 Bootstrap 按钮的大小
• 使用 Bootstrap 创建块级按钮
• 使用锚元素创建禁用的 Bootstrap 按钮
• 使用 input 和 button 元素创建禁用的 Bootstrap 按钮
• 使用 Bootstrap 创建有状态按钮
• 使用 Bootstrap 创建单个切换按钮
• 使用 Bootstrap 创建按钮组
• 使用 Bootstrap 创建按钮复选框
• Bootstrap 按钮复选框与预检查选项
• 使用 Bootstrap 创建按钮单选
• 带有预选选项的Bootstrap按钮单选
• Bootstrap 按钮工具栏
• Bootstrap 按钮组的高度大小
• 使用 Bootstrap 创建对齐的按钮组
• 通过 JavaScript 启用 Bootstrap 按钮
• Bootstrap $().button('toggle')方法
• Bootstrap $().button('loading')方法
• Bootstrap $().button('reset')方法
• Bootstrap $().button(string) 方法

Bootstrap 下拉菜单

• 向 Bootstrap 导航栏添加下拉菜单
• 向 Bootstrap 导航添加下拉菜单
• 向 Bootstrap 按钮添加下拉菜单
• 向拆分按钮添加下拉菜单
• 向按钮组添加下拉菜单
• 通过数据属性向任何元素添加下拉菜单
• 通过 JavaScript 向任何元素添加下拉菜单
• Bootstrap $().dropdown('toggle') 方法

Bootstrap 工具提示

• 使用 Bootstrap 创建工具提示
• 通过数据属性设置Bootstrap tooltips的位置
• 通过 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('destroy')方法

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('destroy')方法

Bootstrap 警报消息

• 使用 Bootstrap 创建警报消息
• 使用 Bootstrap 创建错误或危险警报消息
• 使用 Bootstrap 创建成功或确认警报消息
• 使用 Bootstrap 创建信息警报消息
• 通过数据属性关闭 Bootstrap 警报消息
• 通过 JavaScript 关闭 Bootstrap 警报消息
• Bootstrap $().alert() 方法
• Bootstrap $().alert('close')方法
• 在 Bootstrap 警报框完全关闭时显示一条消息

Bootstrap 选项卡

• 使用 Bootstrap 创建基本选项卡组件
• 通过数据属性创建 Bootstrap 动态选项卡
• 通过 JavaScript 创建 Bootstrap 动态选项卡
• 通过 JavaScript 激活各个 Bootstrap 选项卡
• 设置 Bootstrap 选项卡的方向
• Bootstrap $().tab 方法
• 显示活动选项卡和上一个选项卡的名称

Bootstrap 模态

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

Bootstrap 手风琴

• 使用 Bootstrap 创建手风琴小部件
• 通过数据属性展开和折叠元素
• 通过 JavaScript 展开和折叠元素
• Bootstrap .collapse(options)方法
• Bootstrap .collapse('toggle')方法
• Bootstrap .collapse('show')方法
• Bootstrap .collapse('hide')方法
• 当可折叠元素完全关闭时显示警告消息

Bootstrap 轮播

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

Bootstrap 预输入

• 使用本地数据集创建 Twitter 预输入
• 使用外部数据集创建 Twitter 预输入

Bootstrap 滚动监听

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

Bootstrap 附加导航

• 通过数据属性向元素添加 Bootstrap 附加导航
• 通过 JavaScript 向元素添加 Bootstrap 附加导航
• 在导航菜单已附加时显示警告消息