0

私は新しい Web アプリに取り組んでおり、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 のグリッド システムを使用する場合は、ガイドラインを作成する Photoshop および Illustrator 用のプラグインがあります (パディング、列数、マージンを指定することもできます)。

ブートストラップは CSS に基づいています。Illustrator で何かをデザインするときは、画像などのアセットをエクスポートする必要がありますが、できる限り多くのことに CSS を利用することも重要です。画像を background-image として使用するよりも、CSS の background-color を適用する方が高速であることを覚えておいてください。

私は紙に傷をつけ、すぐに html に渡します。Chrome 開発者ツールを使用すると、適用される CSS スタイルを簡単に変更したり、新しいルールを適用したりできます。

于 2014-01-30T00:32:37.133 に答える
0

Bootstrap (特に新しい「モバイル ファースト」機能) を最大限に活用するには、仕様ではなく、出発点として Illustrator ファイルを使用することをお勧めします。

Bootstrapファイルをそのままにして、選択的なオーバーライドを含む2番目のファイルを作成することを提案した他のコメンターに同意します。これは Bootstrap 3 でははるかに簡単です。フラットな設計により、独自の宣言で上書きすることが少なくなるためです。

私は常にプレーンな Bootstrap を使用してページの静的バージョンをレイアウトすることから始め、次にインスペクタを使用してスタイル (ボディの背景、タイポグラフィ、色など) を視覚的に目立つように優先順位に従って入念に選択します。私は通常、元のデザインに近いものの、わずかに異なる (多くの場合、より優れた) デザインに仕​​上げます。

幸運を！あまり激しく戦わなければ、Bootstrap はすぐに使える多くの機能を提供します。

于 2013-10-15T21:41:06.503 に答える