添加自定义样式到引导导航栏

Question

我想知道如何设置Bootstraps导航栏的样式：

我正在使用标准的Bootstrap navbar-inner类，只有很少的CSS样式。我想要导航栏内的彩色矩形而不影响导航。

最好使用CSS或图像来实现效果吗？

Answer 1

我会在整个方框中使用repeat-x背景图片，其中包含您提到的模式。

这样的事情：

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

你可以使用这样的图像：

Answer 2

我是在这个网站上用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;
            }