Bootstrap 响应式实用工具
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。
超小屏幕
手机 (<768px)
……继续阅读 »
3年前 (2022-06-01) 146浏览 0评论
0个赞
Bootstrap4 按钮组
Bootstrap 4 中允许我们将按钮放在同一行上。
可以在 <div> 元素上添加 .btn-group 类来创建按钮组。
实例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple<……继续阅读 »
3年前 (2022-06-01) 166浏览 0评论
0个赞
Bootstrap4 自定义表单
Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
自定义复选框
如果要自定义一个复选框，可以设置 <div> 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 <div> 里头，然后复选框设置为 type=”checkbox”，类为 .custom-co……继续阅读 »
3年前 (2022-06-01) 114浏览 0评论
0个赞
Bootstrap 辅助类
本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。
文本
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：
类
描述
实例
.text-muted
“text-muted” 类的文本样式
尝试一下
.text-primary
“text-primary” 类的文本样式
尝试一下
.……继续阅读 »
3年前 (2022-06-01) 100浏览 0评论
0个赞
Bootstrap 过渡效果（Transition）插件
过渡效果（Transition）插件提供了简单的过渡效果。
如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
Transition.js 是 transitionEnd……继续阅读 »
3年前 (2022-05-31) 162浏览 0评论
0个赞
Bootstrap v2 教程
Bootstrap，来自 Twitter，是基于 HTML、CSS、JAVASCRIPT 的简介灵活的流行前段框架及交互组件集。
现在开始学习 Bootstrap！
内容列表
Bootstrap 简介
Bootstrap CSS 概览
Bootstrap 网格系统
Bootstrap 布局
Bootstrap 响应式设计
Bootstrap 排版
Bootstrap Glyphico……继续阅读 »
3年前 (2022-05-31) 111浏览 0评论
0个赞
Bootstrap 输入框组
本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。
向 .form-control 添加前缀或后缀元……继续阅读 »
3年前 (2022-05-30) 205浏览 0评论
0个赞
Bootstrap 字体图标(Glyphicons)
@font-face {
font-family:’Glyphicons Halflings’;src:url(https://cdn.staticfile.org/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);src:url(//cdn.staticfile……继续阅读 »
3年前 (2022-05-30) 201浏览 0评论
0个赞
Bootstrap 模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
用法
您可以切……继续阅读 »
3年前 (2022-05-30) 123浏览 0评论
0个赞
Bootstrap UI 编辑器
以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具。
1. Bootstrap Magic
这是一个 Bootstrap 主题生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一个鲜活的用户修改预览。它包括了各种各样的导入，一个颜色选择器和智能的预先输入。更神奇的是，Bootstrap 会根据用户的每个选择来重新建立框架，方便用户……继续阅读 »
3年前 (2022-05-28) 101浏览 0评论
0个赞
Bootstrap4 下拉菜单
Bootstrap4 下拉菜单依赖于 popper.min.js。
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
实例
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" dat……继续阅读 »
3年前 (2022-05-28) 251浏览 0评论
0个赞
Bootstrap 提示工具（Tooltip）插件
当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。
如果您想要单独引用该插件的功能，那么您需要引用 tooltip.js……继续阅读 »
3年前 (2022-05-27) 214浏览 0评论
0个赞
Bootstrap 弹出框（Popover）插件
弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。
如果您想要单独引用该插件的功能，那么您需要引用 popover.js，它依赖于 工具提示（Too……继续阅读 »
3年前 (2022-05-27) 345浏览 0评论
0个赞
Bootstrap 分页
本章将讲解 Bootstrap 支持的分页特性。分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
分页（Pagination）
下表列出了 Bootstrap 提供的处理分页的 class。
Class
描述
示例代码
.pagination
添加该 class 来在页面上显示分页。
<ul class="pagi……继续阅读 »
3年前 (2022-05-27) 89浏览 0评论
0个赞
Bootstrap 按钮
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
以下样式可用于<a>, <button>, 或 <input> 元素上：
类
描述
实例
.btn
为按钮添加基本样式
尝试一下
.btn-de……继续阅读 »
3年前 (2022-05-27) 277浏览 0评论
0个赞
Bootstrap4 模态框
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。
如何创建模态框
以下实例创建了一个简单的模态框效果 ：
实例
<!– 按钮：用于打开模态框 –>
<button type="button" class="btn b……继续阅读 »
3年前 (2022-05-27) 73浏览 0评论
0个赞
Bootstrap 警告（Alerts）
本章将讲解警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。
您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。
您可以通过创建一个 <div>，并向其添加一个 .al……继续阅读 »
3年前 (2022-05-26) 165浏览 0评论
0个赞
Bootstrap 代码
Bootstrap 允许您以两种方式显示代码：
第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
请确保当您使用 <pre> 和 <code> 标签时，开始和结……继续阅读 »
3年前 (2022-05-26) 202浏览 0评论
0个赞
Bootstrap 按钮下拉菜单
本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可。您也可以使用 <span class=”caret”></span> 来指示按钮作为下拉菜单。
下面的实例演示了一个基本的简单的按钮下拉菜单：
实例
<div cl……继续阅读 »
3年前 (2022-05-26) 268浏览 0评论
0个赞
Bootstrap4 多媒体对象
Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:
基础多媒体对象
要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:
实例
<div class="media border p-3"……继续阅读 »
3年前 (2022-05-15) 246浏览 0评论
0个赞
Bootstrap4 按钮
Bootstrap 4 提供了不同样式的按钮。
实例
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button&……继续阅读 »
3年前 (2022-05-15) 124浏览 0评论
0个赞
Bootstrap4 信息提示框
Bootstrap 4 可以很容易实现信息提示框。
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:
实例
<div clas……继续阅读 »
3年前 (2022-05-15) 126浏览 0评论
0个赞
Bootstrap4 颜色
Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark and .text-light:
实例
<div class="con……继续阅读 »
3年前 (2022-05-15) 83浏览 0评论
0个赞
Bootstrap 多媒体对象（Media Object）
本章我们将讲解 Bootstrap 中的多媒体对象（Media Object），如：图像、视频、音频等。
多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
接下来我们先来看个实例：
实例
<!– 左对齐 –&g……继续阅读 »
3年前 (2022-05-15) 72浏览 0评论
0个赞
Bootstrap 导航栏
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
默认的导航栏
创建一个默认的导航栏的步骤如下：
向 <nav> 标签添加 class .nav……继续阅读 »
3年前 (2022-05-15) 70浏览 0评论
0个赞
Bootstrap 教程
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Boo……继续阅读 »
3年前 (2022-05-15) 98浏览 0评论
0个赞
