自定义引导程序的有效方法？

Question

我正在寻找一种自定义引导布局的有效方法。 目前我使用 layoutit.com 获取基本布局，然后使用软件括号进行编辑。 我对 less 进行了更改以进行自定义。 但这很复杂……我的问题是：

-Layoutit 很棒，但是有些容器的放置很奇怪，所以你必须手动更改它

-Brackets 仅向您显示用于特定 html 的 css 规则（就像 firefox 一样），但它不能显示应用较少的规则，并且它可以处理缩小的 css 内容（顺便说一句），因此您无法真正进行更改以一种快速有效的方式

- 在 firefox 中编辑效果很好，但它只编辑 css，无法保存更改。

那么我可以做些什么来快速布局和定制有效？ 有什么帮助吗？

Answer 1

在 SASS 和 LESS 中自定义它非常简单，也是最有效的方法——因为这是您的问题。 Take a look 在源代码中，特别是从第 240 行开始的 variables.less 文件中。

// Number of columns in the grid system
@grid-columns:              12;

// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;

将这两个值更改为您想要的值，基本上就完成了。

如果您使用的是容器，您还需要查看该文件的底部。

/ Small screen / tablet
@container-tablet:             ((720px + @grid-gutter-width));
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            ((940px + @grid-gutter-width));
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      ((1140px + @grid-gutter-width));
@container-lg:                 @container-large-desktop;

您可以在此处自定义容器的大小。

Bootstrap 还带有 mixins，因此您可以使用语义名称创建自己的网格。以下示例将提供一个宽度为容器大小 50% 的居中列。

.post {
  @include make-lg-column(6);
  @include center-block;
}