Добавление пользовательских стилей в панель навигации начальной загрузки

Мне интересно, как я могу создать навигационную панель Bootstraps, чтобы она выглядела примерно так:

введите здесь описание изображения

Я использую стандартный класс Bootstrap navbar-inner с небольшим стилем CSS. Я хочу, чтобы цветные прямоугольники внутри панели навигации не влияли на навигацию.

Было бы лучше использовать CSS или изображения для достижения эффекта?


css twitter-bootstrap styling navbar
person Cole Roberts    schedule 31.03.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я бы использовал фоновое изображение repeat-x для всей коробки, содержащей шаблон, о котором вы упомянули.

Что-то вроде этого:

.navbar-inner {
    background-image: url(image.png);
    background-repeat: repeat-x;
    background-position: top left;
    padding-top: 10px; /*Height of the image*/
}

Вы можете использовать такое изображение:

Фоновое изображение

person Marcel Gwerder    schedule 31.03.2013

arrow_upward
0
arrow_downward

Я сделал это с помощью CSS на этом сайте - http://heritage.warwickshire.gov.uk/

            #colophon {
            background: rgb(0,106,85);
            background: -moz-linear-gradient(left, rgba(248,153,0,1) 14%, rgba(181,0,0,1) 14%, rgba(181,0,0,1) 28%, rgba(10,9,24,1) 28%, rgba(10,9,24,1) 42%, rgba(0,179,0,1) 42%, rgba(0,179,0,1) 56%, rgba(210,0,144,1) 56%, rgba(210,0,144,1) 70%, rgba(229,86,0,1) 70%, rgba(229,86,0,1) 84%, rgba(0,128,238,1) 84%, rgba(0,128,238,1) 98%);
            background: -webkit-gradient(linear, left top, right top, color-stop(14%,rgba(248,153,0,1)), color-stop(14%,rgba(181,0,0,1)), color-stop(28%,rgba(181,0,0,1)), color-stop(28%,rgba(10,9,24,1)), color-stop(42%,rgba(10,9,24,1)), color-stop(42%,rgba(0,179,0,1)), color-stop(56%,rgba(0,179,0,1)), color-stop(56%,rgba(210,0,144,1)), color-stop(70%,rgba(210,0,144,1)), color-stop(70%,rgba(229,86,0,1)), color-stop(84%,rgba(229,86,0,1)), color-stop(84%,rgba(0,128,238,1)), color-stop(98%,rgba(0,128,238,1)));
            background: -webkit-linear-gradient(left, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%);
            background: -o-linear-gradient(left, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%);
            background: -ms-linear-gradient(left, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%);
            background: linear-gradient(to right, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%);
            height: 0px;
            padding-top: 0.5em;
            }
person Tom Rudge    schedule 18.07.2013