twitter bootstrap 如何在内部工作 [关闭]

Question

我对@9​​87654322@,HTML 和脚本语言有更好的了解Javascript,PHP... 我正在尝试深入了解Bootstrap 框架。 文档很棒，没有创建页面的任何问题，一切都很好。

但我真的很讨厌在不了解内部工作原理的情况下做某事。

我了解CSS3 与浏览器特定功能一起使用，但我不能保持原样，我想更好地了解引导程序。
以及如何在不使用bootstrap.css 的情况下实现相同的功能。

我知道最好的方法就是阅读bootstrap.css，但也许有人有文章链接或任何其他资源，解释了所有这些东西是如何工作的以及如何实现的，我可以在没有引导程序的情况下实现。

谢谢。

Answer 1

最好的方法还是读取 bootstrap.css 文件。您不必从上到下阅读它。拿起一个在引导程序中制作的示例网页。查看哪些类在哪里使用。 Bootstrap 类非常直观。您很可能会看到.row、.col-sm-4、navbar、.container、.container-fluid 等类。下一步是在bottstrap.css 中搜索特定类。例如。搜索.col- 你会看到在媒体查询.col-sm-1 到.col-sm-12。然后对于其他屏幕尺寸，您会看到其他类，例如 .col-xs-1 到 .col-xs-12 对于屏幕尺寸 >= 768px 等等。他们只是给.coll-*-12 提供100% 的宽度，给col-*-6 等提供50% 的宽度。你会看到clearfix 类等。然后它会点击。每当您看到页面中使用了一个新类时，它的名称就会自我解释，您可以预测该类将做什么以及如何在框架中定义它。

这就是我用来学习 Bootstrap 的策略。尽管我觉得大多数时候我们只需要基本的引导类来实现响应。可以使用自定义 CSS 手动完成简单的事情，例如样式按钮、字体大小等。

最后，我建议您阅读以下文章来了解 .row 和 .col 的工作原理。 15px padding 和 -15px margin 在这些事情中做了什么。

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

---

P.S：如果您知道如何使用开发人员工具，那么查看 DOM 实际上是一种更好的方法。您可以查看每个类应用的 css，也可以对其进行编辑以查看其有何不同。