1

私はBootstrapを初めて使用し、楽しいプロジェクトを構築したいと考えていました。うまくいかない！何らかの理由で、私のナビゲーション バーには、テンプレート hereのような背景グラデーションがありません。

ここに私が持っているもののJSFiddleがあります。

    <body>
    <div class="container">
        <header>
            <h1>My Website</h1>
            <ul class="nav nav-justified">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <section>
        </section>
        <footer>
        </footer>
    </div><!-- .container -->
</body>
4

1 に答える 1

0

ブートストラップ フレームワークの CSS も追加する必要があります。例: http://jsfiddle.net/rashagen/GS6X6/1/ (特に、メニューのグラデーションを設定する以下の部分)

.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  color: #777;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #d5d5d5;
  background-color: #e5e5e5; /* Old browsers */
  background-repeat: repeat-x; /* Repeat the gradient */
  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
  background-image: -ms-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* IE10+ */
  background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
  background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
}
于 2013-09-30T11:24:25.903 に答える