bootstraptabcss変更

2015年5月28日更新 view: 157 view

bootstrapのタブのCSS、デザインを変更したい

bootstrapのタブを変更したいけど、うまくいかない。
そんなあなたのためにご用意しました。

.nav.pink {
border-bottom: 1px solid #fb8d9a !important;
}


.nav.pink li a {
border-color: #fb8d9a;
color: #fb8d9a;
font-weight: bold;
}

.nav.pink li a:hover {
background-color: #fdc6cc;
color: #fff;
border-color: #fb8d9a !important;
}



.nav.pink li.active a {
background-color: #fb8d9a !important;
color: #fff !important;
}

.nav.pink li a[aria-expanded="true"] {
background-color: #fb8d9a !important;
border-color: #fb8d9a !important;
}

htmlは

<ul class="nav nav-tabs pink">
<li class="active"><a href="#home" data-toggle="tab">タブメニュー1</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
AA
</div>
<div class="tab-pane" id="profile">
CC
</div>
</div>
スポンサードリンク

タブの色がピンクになるよ。

スポンサードリンク

関連記事

関連カテゴリ