Twitter的Bootstrap垂直节奏

Question

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

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

---

编辑:澄清我的意思......

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

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

我可以从一个垂直节奏的通用解决方案开始,这将有助于实现我想要的东西,但我想知道是否有其他人已经开始这个,或者想知道另一种方法来实现这一目标.

---

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

也许只是一个好的基于垂直节奏的CSS模板将是一个很好的起点.优选地,继续开发的东西已经可用,经过深思熟虑和适应性强.

Answer 1

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

正如它在自述文件中所说,这是您自己项目的起点.

Answer 2

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

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