gpt4 book ai didi

html - Bootstrap 导航没有渐变背景

转载 作者:太空宇宙 更新时间:2023-11-03 18:34:25 26 4
gpt4 key购买 nike

我是 Bootstrap 的新手,并想在其中构建一些有趣的元素。进展不顺利!出于某种原因,我的导航栏没有像他们的 template here 那样的背景渐变。 .

这是一个JSFiddle of what I have .

    <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>

最佳答案

您还需要添加 Bootstrap 框架 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 */
}

关于html - Bootstrap 导航没有渐变背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19092527/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com