Twitter的Bootstrap垂直节奏

时间:2012-03-17 15:30:07

标签: css twitter-bootstrap vertical-rhythm

是否有任何现有的插件/扩展/方法来维持Twitter的Bootstrap项目的垂直节奏?

创建良好的垂直节奏模板是一项艰巨的任务,我宁愿使用预先制作的解决方案。我对创意建议持开放态度,我只是希望我的网页最终能够很好地对齐。


编辑:澄清我的目标...

垂直节奏是一种用于确保页面上的每个元素根据水平网格排列的技术。这是通过将每个项目的高度,填充和边距设置为符合标准单位线尺寸来实现的。如果段落中的一行文本高20px(包括边距和填充),那么标题4也可能是20px高,标题1可能是40px高。这样可以保持文本在列之间的节奏。

我想将此技术与bootstrap(来自twitter)结合使用,但要让一切看起来都不错,要做很多工作。例如,所有按钮都需要符合与段落文本等相同的垂直高度定义...在引导程序中使用的其他标准控件也都需要规则来适当地定义它们的高度。

我可以从垂直节奏的通用解决方案开始,这对于实现我想要的东西有很长的路要走,但我想知道是否有其他人已经开始这个,或者想知道另一种方法来实现这一点。 / p>


编辑:假设没有什么比我想要的更好......

也许只有一个好的基于垂直节奏的css模板才是一个很好的起点。优选地,继续开发的东西已经可以使用,经过深思熟虑并且具有适应性。

4 个答案:

答案 0 :(得分:8)

由于没有人像你建议的那样链接到实际的垂直节奏样板,我拿了我使用的那个,评论它,并在这里创建了一个github repo https://github.com/jonschlinkert/vertical-rhythm

正如自述文件中所述,这是您自己项目的起点。

答案 1 :(得分:5)

我认为你所追求的是被理解的。问题是:你正在寻找一个维度的网格模式(根据例如比例线高度设置的“垂直节奏”......从某种程度上说,它测量和对齐给定页面上的东西Y轴)......但是以这种方式做事可能与Bootstrap预先存在的12列网格系统(相反,测量和对齐页面的X轴上的东西)不一致。您希望“按比例”框架中每个“行”的高度。但是:请记住,Bootstrap的设计旨在通过仅仅为了看起来不错而促进比例性,而且还要使页面响应 - 即允许页面元素在垂直方向上“流动”,并流畅地嵌套。而且,从这个意义上说,可能已经考虑了与沿Y轴测量的元素高度有关的问题......我记得基本CSS文件中的大多数印刷元素具有成比例的em尺寸,和/或同样比例顶部一般来说,事情并非如此随意,以至于框架以你正在考虑的方式尖叫着需要额外的造型。

即便如此:Bootstrap的基本CSS文件并不是那么广泛,以至于你不可能自己调整各种元素类和ID的高度而不会有太多麻烦。在任何情况下,你都不太可能需要对每个样式元素都这样做,对吗?实际上,作为一个框架,Bootstrap包含许多元素的样式,这些元素甚至可能不在您正在设计前端的应用程序中。 (示例:您的应用程序是否有下拉菜单?很棒。您可以设置下拉菜单的“垂直节奏”。但是:您是否也在导航栏中使用药片或标签?没有药丸,你说?嗯,你可以只需在样式表中删除几百行代码,就可以省去必须将“垂直节奏”应用于那些不需要的元素的工作。)另外,对于剩下的元素和你的元素事实上需要,只需使用文本编辑器来查找 - 替换行高,顶部和底部填充,边距,字体大小等的值...并测试它。作为一个CSS框架,很明显Bootstrap是如何布局的;相关元素排序很好,并且大部分在样式表的代码中组合在一起。完成基本CSS文件的完整调整后,只需缩小修改后的样式表...以替换预先存在的缩小版本......或者,如果要优化,可以从CloudFront中提供它。

答案 2 :(得分:4)

Compass CSS Authoring Framework明确支持基于vertical rhythm的排版。对于初学者,您可以查看此简短video tutorial

答案 3 :(得分:2)

您是否看过Square Grid CSS框架?

http://thesquaregrid.com/

  

基于35的设计师和开发人员的简单CSS框架   等宽列。它旨在减少开发时间和帮助   你创建结构美观的网站。

方形网格提供标准水平网格,但它也使用28px的标准“方形”维护垂直网格。它实际上只是一个网格,而不是像Bootstrap这样的完整CSS库(即没有按钮,菜单等)。

我曾经在一个项目中发现它非常直观,但我最终决定跟踪垂直和水平网格太难了,特别是在考虑响应式设计时。

您可以将这两者结合起来,或者至少看看方形网格源代码,这是非常简单的CSS,以获得有关如何调整Bootstrap以满足您的需求的一些想法。