Стилизация навигации с вкладками Bootstrap

Мне бы хотелось, чтобы функциональность навигации с вкладками Bootstrap, но я хочу стилизовать каждую вкладку с фоновым изображением и текстом под ним. На самом деле, мне бы очень хотелось просто поместить свои фотошоп-изображения прямо на каждую вкладку и установить активное состояние для выбранного изображения.

Мне очень трудно это делать. Потребуется ли много специальной работы, чтобы заставить это работать с этим компонентом?

Я думал, что могу просто попробовать CSS, но это не дает мне правильного форматирования, которое я хочу:

ul.nav.nav-tabs li {
    display:inline-block;
    background:url(../images/skypeIcon.png) no-repeat left center;
    background-size:20px auto;
    font-size:15px;
    padding:2px 0 2px 28px
}

Кстати, я использую Bootstrap 2.3, поэтому не могу использовать Bootstrap 3 Navbar Generator.


javascript html css twitter-bootstrap twitter-bootstrap-2
person fumeng    schedule 05.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я могу использовать тег div внутри своего тега a и поместить туда любой контент, который захочу.

<ul class="nav nav-tabs">

            <li class="active">

                <a href="#tab1" data-toggle="tab">

                    <div>

                        <img src="<%=context%>/images/defaultAvatar.png"/>

                        <br/>

                        Computer

                    </div>

                </a>

            </li></ul>
person fumeng    schedule 05.08.2014