0

我正在开发一个新的网络应用程序，我想在 Illustrator 中创建我的 GUI 模型，然后使用 Twitter Bootstrap 在 HTML5 和 CSS3 中实现它们。我知道如何使用 CSS 类来创建我的页面，但我想知道自定义 Twitter Bootstrap 以尽可能匹配我的模型的过程。我说的是颜色、排版、边距、填充、边框、按钮样式等等。我想为这个以及我将要从事的每个未来项目创建完全不同的主题。

我是一名程序员，但我也喜欢 GUI 设计，所以我想知道专业设计师是如何让所有部件都适合的。

提前致谢。

4

3 回答 3

0

我对 Bootstrap 很陌生，但普遍的共识似乎是保留实际的 Bootstrap.css 并创建不同的 CSS 文件来覆盖 Bootstrap。例如，在这个片段（顺便说一下，SCSS）中，我将一个部分评论为“常规”，并为我的网站放置了一些默认覆盖。最值得注意的是从圆形到方形的重新设计的输入框。

/********
GENERAL
*********/
html, body {
        height: 100%;
}
.wrap {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}
body {
    a {
        color: #FF4329;
        &:hover {
            text-decoration: none;
        }
    }
    input[type="text"], .btn {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}

另请注意，您可以自定义从 Bootstrap 下载的文件，因此如果您打算在网格系统上使用，那么您只需要下载这些文件。

于 2013-10-15T17:47:54.303 回答
0

为了充分利用 Bootstrap（尤其是新的“移动优先”功能），我建议使用 Illustrator 文件作为起点，而不是规范。

我同意其他评论者的意见，他建议保留 Bootstrap 文件并编写具有选择性覆盖的第二个文件。这使用 Bootstrap 3 更容易，因为扁平化设计意味着更少地使用您自己的声明来破坏。

我总是从使用简单的 Bootstrap 布局静态版本的页面开始，然后使用检查器（例如正文背景、排版、颜色）按优先顺序有条不紊地挑选样式，因为它们在视觉上对我来说很突出。我通常会得到与原始设计相近但略有不同（通常更好）的东西。

祝你好运！如果你不努力争取，Bootstrap 提供了很多开箱即用的功能。

于 2013-10-15T21:41:06.503 回答
0

如果您打算使用 Bootstrap 的网格系统，Photoshop 和 Illustrator 的插件可以为您创建指南（您甚至可以指定填充、列数和边距）。

Bootstrap 基于 CSS。当您在 Illustrator 中设计某些东西时，您必须导出图像等资源，但尽可能使用 CSS 也很重要。请记住，应用 CSS 背景颜色而不是为此目的使用图像作为背景图像更快。

我在纸上划痕并立即传递给 html。使用 chrome 开发人员工具，您可以轻松更改应用的 css 样式、应用新规则等

于 2014-01-30T00:32:37.133 回答