42

次のCSSコードを使用して、Twitterブートストラップのモーダルヘッダーの背景色を変更しようとしています。

.modal-header
 {
     padding:9px 15px;
     border-bottom:1px solid #eee;
     background-color: #0480be;
 }
 .modal-header .close{margin-top:2px}
 .modal-header h3{margin:0;line-height:30px}

しかし、このコードはモーダル ヘッダーの角を角張らせます。上記のコードを使用する前は、角が丸い形でした。上記の背景色でモーダルヘッダーの角を丸くするにはどうすればよいですか?? ありがとう

4

9 に答える 9

75

以下の css を使用できます。これをカスタム css に入れて、ブートストラップ css をオーバーライドします。

.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #0480be;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }
于 2013-10-09T03:30:45.247 に答える
4

パーティーには少し遅れましたが、別の解決策があります。

モーダルのクラスを次のように調整するだけでalert-danger機能しますが、モーダルの上部の丸い角が削除されます。

modal-header回避策は、要素に追加のクラスを与えることですpanel-heading。たとえば、

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header panel-heading"> <!-- change here -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

次に、見出しの色を変更するには、次のようにします (jQUEry を使用していると仮定します)。

jQuery('.modal-content').addClass('panel-danger')
于 2017-07-07T16:52:51.073 に答える