Как переопределить стиль активной вкладки Bootstrap?

Я пытаюсь переопределить активный стиль вкладки в бутстрапе.Как переопределить стиль активной вкладки Bootstrap?

Мне удалось дать вкладкам закругленные углы и изменить цвет, присвоив тегам <li> новый класс, поэтому внешний вид довольно хорошо, что я хочу для внешнего вида и зависания. Однако активная вкладка упрямо остается в стиле бутстрапа. Я пробовал все виды селекторов, чтобы получить достаточно конкретные, но я застрял сейчас. Я не могу видеть, как получить более специфичным для активного селектора:

.nav-tabs > li.rounded.active > a, 
.nav-tabs > li.rounded.active > a:hover, 
.nav-tabs > li.rounded.active > a:focus { 
    background-color:cadetblue; 
    font-weight:bolder; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
}

И это мой HTML:

<ul class="nav nav-tabs"> 
    <li class="rounded"><a href="#">Home</a></li> 
    <li class="rounded"><a href="#">Bio</a></li> 
    <li class="rounded"><a href="#">Links</a></li> 
    <li class="rounded"><a href="#">Gallery</a></li> 
</ul>

источник

2015-06-26 david sinfield

Можете ли вы создать скрипку? –

Обновлено: попробуйте это: https://jsfiddle.net/j21w7af8/2/ –

Я думаю, что вы могли бы иметь какой-то другой код, который берет верх, потому что Я использовал аддон bootstrap.css для codepen.io, и все, кажется, работает. Мне удалось изменить стиль активной вкладки. BTW, в html, который вы указали, нет активной вкладки, отсутствует класс. Это может быть проблема?

http://codepen.io/tylerism/pen/vOpNLO

HTML

<ul class="nav nav-tabs"> 
    <li class="rounded active"><a href="#">Home</a></li> 
    <li class="rounded"><a href="#">Bio</a></li> 
    <li class="rounded"><a href="#">Links</a></li> 
    <li class="rounded"><a href="#">Gallery</a></li> 
</ul>

CSS

.nav-tabs > li.rounded.active > a, 
.nav-tabs > li.rounded.active > a:hover, 
.nav-tabs > li.rounded.active > a:focus { 
    background-color:cadetblue; 
    font-weight:bolder; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
    color:orange; 
} 

.nav-tabs > li.rounded > a { 
    background-color:cadetblue; 
    font-weight:bolder; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
    color:white; 
}

источник

2015-06-26 13:58:24 tylerism

Возможно, мои ожидания относительно того, что должно произойти, ошибочны ... Когда я нажимаю вкладку, я ожидал, что bootstrap js заставит ее установить стиль на активный , Когда я нажимаю, я получаю белый ящик. Должен ли я создать событие click для изменения, добавьте активный класс на вкладку с кликом? –

CSS-код 'активный' состояние должно применяться на якорь тег. Попробуйте это,

.nav-tabs > li.rounded > a:active, 
.nav-tabs > li.rounded > a:hover, 
.nav-tabs > li.rounded > a:focus { 
    background-color:green; 
    font-weight:bolder; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
}

источник

2015-06-29 12:51:58 Karthik

Как переопределить стиль активной вкладки Bootstrap?

ответ

Смежные вопросы