25

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

创建好的垂直节奏模板是一项相当费力的任务，我宁愿使用预烘焙的解决方案。我愿意接受创造性的建议，我只希望我的页面最终能很好地对齐。

编辑：澄清我的追求...

垂直节奏是一种用于确保页面上的每个元素都按照水平网格排列的技术。这是通过将每个项目的高度、填充和边距设置为符合标准单位行大小来实现的。如果段落中的一行文本是 20px 高（包括边距和填充），那么标题 4 也可能是 20px 高，而标题 1 可能是 40px 高。这保持了跨栏文本的节奏。

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

我可以从垂直节奏的通用解决方案开始，这对于实现我想要的目标大有帮助，但我想知道是否有其他人已经开始这样做，或者对实现这一目标的另一种方法有任何想法。

编辑：假设没有什么像我想要的......

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

4

4 回答 4

8

由于没有人按照您的建议链接到实际的垂直节奏样板，因此我采用了我使用的那个，对其进行了评论，并在此处为它创建了一个 github 存储库https://github.com/jonschlinkert/vertical-rhythm

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

于 2012-10-04T02:46:32.750 回答
5

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

即便如此：Bootstrap 的基本 CSS 文件并没有那么庞大，以至于您不可能自己调整各种元素类和 ID 的高度而没有太多麻烦。无论如何，您不太可能真的需要对每个样式元素都这样做，对吗？事实上，作为一个框架，Bootstrap 包含许多元素的样式，这些元素甚至可能不在您为其设计前端的应用程序中。（示例：您的应用程序有下拉菜单吗？很好。您可以设置下拉菜单的“垂直节奏”。但是：您是否还在导航栏中使用药丸或标签？没有药丸，你说？好吧，你可以只需删除样式表中的几百行代码，就可以省去将“垂直节奏”应用于那些不需要的元素的工作。）否则，实际上确实需要，只需使用文本编辑器查找 - 替换行高、顶部和底部填充、边距、字体大小等的值......并对其进行测试。作为一个 CSS 框架，Bootstrap 的布局非常清晰；相关元素被很好地排序，并且大部分都在样式表的代码中组合在一起。完成基本 CSS 文件的调整后，只需缩小修改后的样式表......以替换预先存在的缩小版本......或者，如果您想优化，也许只需从 CloudFront 提供它。

于 2012-04-01T09:54:23.473 回答
4

Compass CSS 创作框架明确支持基于垂直节奏的排版。对于初学者，您可以查看这个简短的视频教程。

于 2012-12-30T10:16:17.860 回答
2

你看过 Square Grid CSS 框架吗？

http://thesquaregrid.com/

一个面向设计人员和开发人员的简单 CSS 框架，基于 35 个等宽列。它旨在减少开发时间并帮助您创建结构精美的网站。

Square Grid 提供标准的水平网格，但它也保持垂直网格，使用 28px 的标准“正方形”。它实际上只是一个网格，而不是像 Bootstrap 那样的完整 CSS 库（即没有按钮、菜单等）。

我曾经做过一个项目，发现它非常直观，尽管我最终认为跟踪垂直和水平网格对我来说太难了，尤其是在考虑响应式设计时。

您可以将两者结合起来，或者至少看一下方形网格源代码，它是非常简单的 CSS，以了解如何调整 Bootstrap 以满足您的需求。

于 2012-06-23T19:27:55.973 回答