web-dev-qa-db-ja.com

変更方法bootstrapパネルフッターの色

bootstrapパネルがあり、フッターの色をヘッダーのように変更したいのです。panel-primaryクラスの横にpanel-footerを追加しましたが、原色に変更したので、パネルフッターの色を変更するには？

コード：

<div class="panel panel-primary">
     <div class="panel-heading">                  
          Panel Heading
     </div><!--.panel-heading-->

     <div class="panel-body">
           Panel Body
     </div><!--.panel-body-->

     <div class="panel-footer panel-primary">
            Panel Footer
      </div><!--.panel-footer-->
</div>
htmltwitter-bootstrappanel
7
Bayu Anggara

パネルフッタークラスに適用するカスタムクラスを作成する必要があります。

パネルフッターは、前景にあることを意図していないため、状況に応じたバリエーションを使用する場合、色と境界線を継承しないとは限らないことに注意してください。 docs を参照してください。

.panel-footer.panel-custom {
    background: red;
    color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary">
    <div class="panel-heading">Panel Heading</div>
    <!--.panel-heading-->
    <div class="panel-body">Panel Body</div>
    <!--.panel-body-->
    <div class="panel-footer panel-custom">Panel Footer</div>
    <!--.panel-footer-->
</div>
10
vanburen

そのためには、適切なCSSを変更する必要があります。

Bootatrap 3のデフォルトは次のとおりです。

.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

このスタイルはオーバーライドできます（panel-primaryクラスをpanel-footerに追加しないでください。Bootstrap CSS）の構造のため）。

1
max

これをチェックしてください：

[〜＃〜] css [〜＃〜]

.panel-footer{
  background-color:#337ab7;
  border-color: #337ab7;
  color: #FFFFFF;

 }

bootstrap cssをオーバーライドしますが、これは良い解決策ではありません。より良い方法は、独自のクラスを宣言して色を変更することです。

jsfiddle

1
Mario Kurzweil

Bootstrap 4.1 を使用している場合は、単にコンテキスト背景色クラスを追加できます。 Bootstrap 4.1のように、パネルはカードに置き換えられました。あなたの質問に対する可能な更新された答えは次のようになります：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<div class="container">

    <div class="card mt-4" style="width: 18rem;">
        <div class="card-header bg-success text-light">
            Card Title Here
        </div>
        <div class="card-body bg-warning">
            For example, a card with Brazilian flag colors. No explicit CSS is being used here.
        </div>
        <div class="card-footer bg-primary text-center">
            <a href="#" class="btn btn-outline-light">A White Button On Blue BG</a>
        </div>
    </div>

</div>
0
victorf

おそらく、これらのパネルのCSSを表示できますか？

別のCSSタグの方が「panel-primary」タグよりも優先度が高いためと考えられます。 Firefox/Chromeでウェブ開発ツールを使用して、何が上書きされているかを確認してみてください。

0
kainr2