デフォルトのヤツはとてもダサい
外部のテンプレートなんかでもmodalはそのままのものが多い。
なのでヘッダーとフッターだけでも変えれば少しはマシになると思ってこんなのを書いてみた。
.modal-header {
border-radius: 5px 5px 0px 0px;
background-color: #333;
color: #eee;
}
.modal-footer {
border-radius: 0px 0px 5px 5px;
background-color: #eee;
color: #666;
}
このCSSをbootstrap.cssの後ろに置くとmodalのデザインをこういう風に変更することが出来る。
これも色は適当につけてるだけなので要調整ですが、modalのヘッダーとフッターに色をつけるだけでも印象は変わるのでオススメです。
関連記事