Twitter Bootstrap の `.sidebar` クラス スタイルをオーバーライドするにはどうすればよいですか?

Twitter Bootstrap スタイルのオーバーライド

Web 開発では、Twitter Bootstrap のようなフレームワークを使用すると、強固な基盤を提供できます。ただし、Bootstrap は堅牢なスタイルのセットを提供しますが、場合によってはデザインの特定の側面をカスタマイズしたり上書きしたりする必要がある場合があります。

そのようなシナリオの 1 つは、.sidebar クラスのデフォルトの左フローティング動作の変更を含みます。ブートストラップフレームワーク。これを実現するには、いくつかのオプションがあります。

Bootstrap CSS ファイルの変更

元の Bootstrap CSS ファイル (通常は bootstrap.css) を開いて、フロートを見つけます。 .sidebar クラスの left プロパティ。値を右に変更するだけです。ただし、この変更は今後のブートストラップの更新中に上書きされる可能性があることに注意してください。

CSS プリプロセッサ (SASS など) を使用します

次のような CSS プリプロセッサを使用している場合Sass では、新しいスタイルシート (site-specific.scss) を作成し、カスタム ルールを記述することができます。例:

.sidebar {
  float: right;
}

カスタム スタイルシートで CSS をオーバーライド

または、カスタム スタイルシート (サイト固有の.css など) を作成し、それを後に含めることもできます。 HTML 内の Bootstrap スタイルシートセクション:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

site-specific.css ファイルでは、.sidebar float プロパティをオーバーライドできます:

.sidebar {
  float: right;
}

ブートストラップの後にカスタム スタイルシートを読み込むことで、優先することができます。デフォルトのスタイルを変更します。

以上がTwitter Bootstrap の `.sidebar` クラス スタイルをオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。