ASP.Net MVC 3 アプリケーションでTwitter の Bootstrapを使用したいと考えています。bootstrap.css をダウンロードして、プロジェクトの Content フォルダーに追加しました。_Layout.cshtml を開き、ファイルへのリンクを追加しました。
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
アプリケーションを実行すると、スタイルシートが適用されません。_Layout.cshtml ファイルから Site.css と bootstrap.css の両方を参照するにはどうすればよいですか?
ここでの問題は、CSS の継承、カスケード、および特異性だと思います。Twitter の Bootstrap はすべてのスタイルをリセットすることに注意してください。
'Site.css が bootstrap.css の前にある場合、ブートストラップのみが適用されます (最初は気づきませんでした)。順序を逆にすると、両方が機能します。変'
実際、これは完全に理にかなっています。Site.cssすべてのスタイル宣言がロードされ、その直後にBootstrap.cssロードされ、ほとんどの (すべてではないにしても) がリセットされるため、内部の宣言Bootstrap.cssが適用されます。おそらく、Bootstrap.cssスタイルが定義されていないか、Site.csshtml IDまたはクラスを使用して非常に具体的なスタイルが定義されているため、両方が機能しているように見えます。
順序を逆に (Bootstrap.css最初に)、最初にすべてのスタイルをリセットしてから、他のスタイルを適用します。が 2 番目に読み込まれるためSite.css、そこで定義されたスタイルがサイトに適用されます。
自分の興味のために、'Site.css' と 'Bootstrap.css' の両方で定義されている HTML ドキュメント内でインライン スタイルを定義してみて、スタイル定義を追加/削除してスタイルがどのように適用されるかを確認してください。
CSS カスケードの適切な説明を見つけようとしましたが、見つけた最良のグラフィックと簡単な説明はこれでした。
外部スタイル シートと埋め込みスタイル シート内のセレクターが競合するが、特定性が同じである場合、最終的なタイ ブレーカーはルールの出現順序に基づきます。後で宣言されたルールが優先されます。これは、1 つのシート内のルールの順序だけでなく、(X)HTML ページのヘッダーにシートがリンク、インポート、または埋め込まれた順序にも適用されます。
HTTP 要求を削減するために、ブートストラップ ファイルから単一の .css ファイルに CSS をコピー アンド ペーストできます。
すべてのブートストラップ コードを最初に配置し、その後に個人用の CSS を配置して、整理します。
しかし、あなたがしたことはうまくいくはずです。マークアップがどのように見えるかの例を JSFiddle に投稿できますか?
詳細については、次を参照してください。