Bootstrap 3的部分功能技巧和诀窍你可能还不知道（第2部分）

Bootstrap 3 太棒了。它不仅提供了前端框架的所有基础知识，而且还提供了大量加速开发的帮手。这些助手可以被用来快速的原型或建立一个非常强大和可靠的前端基础，为一个长期的应用程序。这是一个后续的 Bootstrap 3 Tips and Tricks You Might Not Know，甚至更多的技巧和诀窍。这些帖子中的大部分内容都直接来自文档本身。所以，希望你能立刻认出其中的一些，而其他的，你会想知道你是怎么错过的。

我错过了什么 Part I?

如果你好奇地想看看我们已经讨论过的其他一些技巧和技巧，你可以在这里读到它们。一个简短的总结是：

• How to Enable Bootstrap 3 Hover Dropdowns
• Don’t forget Container Fluid for Full Width Rows
• Media Query Break Points
• Different Grid Columns at Different Device Sizes
• Nested Columns
• Changing Column Collapse Order
• Lead Class
• Blockquote Reverse
• Flatten a List
• Labels for Screen Readers
• Image Responsive Class
• Image Shapes Classes

可选地从列中移除 Gutter填充。

Bootstrap允许您根据需要自定义并编译自己的构建。这是任何颜色，容器大小，和排水沟的填充尺寸。但是，有时您会遇到一个实例，您只需要一个没有填充的行。大多数情况下，您只需单独选择列并用 CSS消除填充。但是，您可以构建自己的实用程序类助手来执行此操作。此实用工具类将涵盖所有列大小，并且仍然支持完全响应。下面是 CSS片段：

下面是如何在HTML中使用它：

最后，这里有一个很好的演示 CodePen:

参见 Optionally Remove the Gutter Padding from Columns 上的示例 Nicholas Cerminara (@ncerminara) 和 CodePen。

定制容器尺寸

不管你喜不喜欢，有时你会做一个不遵循网格系统的设计，或者一个喜欢在整个页面和/或站点的不同行上使用不同网格列大小的设计人员。引导列自动填充到它的父容器。因此，如果您需要一个较小的容器或更大的容器，您可以轻松地扩展Bootstrap核心并创建您自己的容器类。下面是一个例子：

现在，您唯一需要担心的是溢出问题，如果您制造的容器更大，那么设备窗口就会变大。例如，对于 .container-large 类，如果用户的浏览器窗口为 1200px，就会产生这个严重的溢出问题。这是解决办法。

最后，这里有一个很好的演示它的行动。请注意，在断点处，列是如何保持响应的。请抬头！您必须在全屏浏览器中查看演示(而不是嵌入，以查看其全部效果。

参见 Optionally Remove the Gutter Padding from Columns 上的示例 Nicholas Cerminara (@ncerminara) 和 CodePen。

使用标题类来节省时间和保持语义

一个设计有时会有一些元素，这些元素并不总是与拥有语义标记的最佳实践相匹配。我的意思是，通常你的 h1 标签后面跟着一个 h2 等等。当这种情况发生时，这不一定是件坏事，它只是值得注意的事情，因为在一天结束时，最重要的事情之一是确保你的标记是以一种便于谷歌和其他机器人阅读的方式构造的。

您可以用不同的类交换标题样式。看看下面的示例代码，可以看到它的作用：

参见 Use Heading Classes to Save Time and Stay Semantic 上的示例 Nicholas Cerminara (@ncerminara) on CodePen.

响应视频嵌入保持高宽比

当Bootstra3.2发布时，它提供了一个额外的助手类，以使 iframes (像 Youtube嵌入式)更容易响应，同时保持一定的纵横比。使用这些代码非常容易，只需将以下代码添加到标记中：

注意， iframe 是如何不包含 frameborder="0"的。这是因为 Bootstrap实际上会用这个助手类来规范任何丑陋的轮廓。

参见 Bootstrap 3 Responsive Video Embeds that Maintain Aspect Ratio 上的示例 Nicholas Cerminara (@ncerminara) on CodePen.

响应实用程序类需要显示属性

随着Bootstrap 3.2的发布，他们更新了响应性实用工具类的工作方式。通常，您只需指定 .visible-xs， .visible-sm， .visible-md，和 .visible-lg 在不同的设备宽度上隐藏或显示某些元素。现在，您实际上还必须指定 block， inline， 或 inline-block的“状态”。这将使您的控制最大化，但是如果您对要使用的是什么感到困惑，只需使用块即可。以下是一些例子：

扩展类，不要覆盖它

我经常看到前端代码，开发人员完全覆盖引导样式来自定义按钮和其他元素，而不是扩展现有的类。很快就会乱七八糟的。如果只是扩展现有的类，那么维护起来就容易多了。例如，让我们制作一个完全平坦和黄色的按钮，名为 .btn-yellow 来演示原理。使用颜色作为类名可能是个坏主意。要当心！可能会使您的CSS维护比需要的更难。这个例子可以做到这一点，但是您应该做一些类似 btn-custom-name的事情。

参见 Yellow Bootstrap Button 上的示例 Nicholas Cerminara (@ncerminara) on CodePen.

通过这种方式，您仍然可以使用 .btn-lg 或 .btn-block 来自定义您的按钮。现在，我还将创建一个名为 .btn-xxl的类：

参见 Yellow Bootstrap Button XXL 上的示例 Nicholas Cerminara (@ncerminara) on CodePen.

从长远来看，通过扩展类来构建基本 CSS是非常有帮助的，并且可以真正加快前端开发。

* { box-sizing: border-box; }

我最喜欢的关于Bootstrap 3 和 2的事情是，它为所有元素和伪元素采用了新的 box-sizing: border-box 属性(：前和：后)。对于一些人来说，这可能更明显，但这样做改变了 CSS box-model的工作方式。启用时，宽度和高度属性包括填充和边框，但不包括边距。从外行的角度来看，如果添加填充，元素的大小就不会增加。相反，元素的内容越来越接近盒子的中心。

Bootstrap 2没有使用这种方法，我想最近切换的人会被这种方法抛弃，因为它违背了大多数人最初接受 CSS教育的方式。不过，在你习惯了它之后，它开始使响应性的Web开发变得更加容易，即使没有 Bootstrap，它也可能成为您的新默认。我认为这样做的想法是保罗·爱尔兰在这篇文章中首先提出的。下面是一个演示，说明如果这对您来说是新的，它是如何工作的：

参见 Box Sizing Demo: Change the Padding with this Range Input 上的示例 Nicholas Cerminara (@ncerminara) on CodePen.

您的Respond.js包含可能都是错误的

Respond.js 是将媒体查询引入传统浏览器的极好的填充(在本例中，Bootstrap 3使用IE8)。确保 respond.js实际工作，将使您的跨浏览器测试更加容易。我了解到 Respond.js可能基于以下两点而失败：

1. 它在文档中的位置
2. 如果从 CDN加载样式

在 CSS之后加载 respond.js

如果由于任何原因，您在样式之前加载了 respond.js ，这将导致多填充失败。您需要在样式之后加载 respond.js。如果您有内联样式，那么在技术上也应该在此之后加载 respond.js。

CDN可以创建跨域错误。

Respond.js 通过 Ajax请求 CSS的副本。如果您的 CSS位于不同的域中，例如 CDN，则它将无法加载 CSS资产。建议您创建一个代理页面来启用跨域通信。你可以在他们的 official docs上读到。不过，最快也是最简单的解决方案是自己托管 Bootstrap 3资产和 Respond.js资产(不要使用 CDN)。对于大多数人来说，这是一种简单的快速修复方法。您应该评估为特定项目放弃 CDN的利弊，因为使用 CDN具有明显的性能优势。

结论

这一切都是为了使用合适的工具来完成这项工作。有时候，靴带对你来说是一个很好的选择，而其他时候则不然。重要的是要记住，Bootstrap是在考虑可扩展性的情况下构建的。您可以根据您的需要挑选和选择要使用的部件以及使用或构建的部件。它不会为你做所有的前端工作，但它肯定会使前端开发更加容易。

原文：https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-still-might-not-know