0

Twitter Boostrap を使用していて、その一般的な boostrap.css およびその他の Boostrap 関連の css ファイルがあり、独自のクラスに特定の Boostrap クラスのいくつかと同一の属性を持たせたいとしましょう。私の理解では、css ブートストラップ ファイルを直接変更するのではなく、custom.css ファイルを作成して拡張する必要があります。

したがって、ブーストラップファイルには触れずに。自分のクラスのブーストラップ クラスを複製するにはどうすればよいですか? 唯一の方法は、boostrap.css ファイルからコピーして貼り付けることです。それとも何か方法はありますか

.myownclass {
    -- some command to replicate class 'alert alert-error' without repeating the CSS that has already been written
}
4

4 に答える 4

2

css プリプロセッサを使用できます。他のユーザーがすでに引用している他の方法も問題ありませんが、css プリプロセッサを使用するのが最善の方法です。

Bootstrap は LESS を使用して構築されているため、 LESSを使用できます。ここを見てください: http://bootstrap.lesscss.ru/less.html .

SASSも使えます。私によると、SASSの方が優れています。ここにチュートリアルがあります: http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-1/

CSS プリプロセッサとは

ブラウザーは、レンダリングされる DOM 要素のスタイリング手法として、CSS のみを理解できます。言語には独自の機能セットがあるため、CSS では、クリーンで再利用可能なルールのチャンクを作成するには不十分な場合があります。例えば。複数のセレクターでルールのコレクションを再利用できない、変数が利用できないため、スタイルシート全体でデータがあいまいになる可能性があります。これらの制限のほとんどを克服するために、基本的な機能を拡張する高度な CSS 記述方法を提供するプリプロセッサーの概念が生まれました。この高度なコードは、ブラウザが理解するそれぞれのコンパイラ (使用しているプリプロセッサによって異なります) を使用して、通常の CSS コードとして後でコンパイルされます。

プリプロセッサを使用する必要がありますか?

私の意見では、次のプロジェクトにプリプロセッサを採用するかどうかの決定は、多くの分析の後、専門知識レベルと、最も重要なプロジェクト要件とチーム全体のワークフローにのみ依存する必要があります。以下に、決定に役立つヒントをいくつか示します。

  • 初心者向けではありません:初心者で、CSS の素晴らしい世界を探求し始めている場合は、何らかのフレームワークやプリプロセッサに移行する前に、通常の CSS に慣れることをお勧めします。使用する言語の中核となる概念を理解し、使用できるようにすることは非常に重要です。これは、他のプログラミング言語と同様に CSS にも当てはまります。

  • あなたはフロントエンド開発者のチームですか? フロントエンド開発者のチームとして、プリプロセッサを採用することは素晴らしい動きです。ただし、チームの誰かが巨大な CSS ファイルを処理し、それに応じてそれらを構造化する方法を本当に知っている場合に限ります。この言語が提供する強力な機能を利用することにより、最初に CSS 全体を再利用可能なチャンクに構造化し、CSS 編成の戦略を定義することが重要です。例えば。タイポグラフィ、フォーム、レイアウトなどに複数の CSS ファイルを使用しますか? 変数を広範囲に使用する必要があるテーマ対応 UI を使用しますか?

  • 障壁を越える気はありますか？プリプロセッサを採用するということは、より多くのプログラミング概念を CSS コーディング アプローチに実装することになるということです。基本的なプログラミング言語には、プリプロセッサを使用して学習および実装する必要がある多くの概念があります。つまり、間違いなくプログラミング スキルをブラッシュアップする必要があり、CSS コードの見方が永遠に変わる可能性があります。この障壁を乗り越え、自信を持って変化を受け入れる準備ができていると感じているなら、これはあなたのためのものです.

于 2012-12-28T01:29:07.723 に答える
2

CSS では、これは不可能です。これを行う唯一の方法は、html タグでクラスを連鎖させることです。

<div class="alert alert-error myownclass"></div>

使用量が少ない場合は、次のようにできます。

 .myownclass {
   .alert
   .alert-error;
 }

これにより、あるクラスから別のクラスに設定がコピーされます。結果は、クラスの内容を直接コピーした場合と同じになります。

Sass を使用している場合は、クラスの内容をコピーしなくても実行できます。以下に示すように、クラスを参照するだけです。これはコンテンツをコピーするのではなく、CSS コードの正しい位置でカスタム クラスを参照します。

.myownclass {
   @extend .alert;
   @extend .alert-error;
}

参照: Sass @extend

于 2012-12-28T01:33:45.600 に答える
1

要素に 2 つのクラスを与えることができます。元の Bootstrap クラスと、独自に作成したクラスです。次に、次のようにターゲットにします。

HTML

<h1 class="original_class myownclass">Hello</h1>

CSS

.original_class.myownclass {
  // css code
}

概念を説明する小さな jsfiddle を次に示します: http://jsfiddle.net/ApEpr/

これには、CSS プリプロセッサーを使用する必要はありません。これは通常の古い CSS です。

于 2012-12-28T01:17:16.947 に答える
1

コピー/貼り付けを避けるには、LESS を使用する必要があります。

.myClass {
    .bootstrapClass;
}

または、TBS が移植された他の CSS プリプロセッサーを使用することもできます (Sass には 1 つあり、他のものについてはわかりません)。

于 2012-12-28T01:17:19.083 に答える