twitter bootstrap如何在内部工作

时间:2016-04-25 06:13:42

标签: html css twitter-bootstrap css3 web

我基本了解CSSHTML以及更好的脚本语言JavascriptPHP ...我试图深入研究Bootstrap框架。 文档很好,没有创建页面的任何问题,一切都很好。

但我真的很讨厌做某事而不了解这是如何在内部工作的。

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

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

感谢。

1 个答案:

答案 0 :(得分:4)

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

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

最后,我建议您阅读以下文章,了解.row.col的工作原理。 15px填充和-15px边距在这些方面做了什么。

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

P.S:如果您知道如何使用开发人员工具,那么浏览DOM实际上是一种更好的方法。您可以看到每个类应用的CSS,也可以编辑它以查看它是如何产生差异的。