Twitter bootstrap 循环浏览bootstrap 3 jumbotron的背景图像_Twitter Bootstrap_Twitter Bootstrap 3_Background Image

Twitter bootstrap 循环浏览bootstrap 3 jumbotron的背景图像

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 循环浏览bootstrap 3 jumbotron的背景图像,twitter-bootstrap,twitter-bootstrap-3,background-image,Twitter Bootstrap,Twitter Bootstrap 3,Background Image,我试着让3张图片作为背景在引导3 jumbotron中循环。但问题是，我在jumbotron中有3个div，到目前为止，我尝试的所有解决方案都要求我将jumbotron的位置更改为相对，将背景图像更改为绝对。而且因为我试图保持网站的响应性，这样做会严重破坏小规模网站的外观我还尝试将jumbotron放置在旋转木马上，方法是将jumbotron设置为绝对值，将旋转木马设置为相对值。同样的缩放问题在较小的屏幕尺寸下再次发生有没有一个简单的方法可以做到这一点编辑：我想我的背景改变类似于这个网站：

我试着让3张图片作为背景在引导3 jumbotron中循环。但问题是，我在jumbotron中有3个div，到目前为止，我尝试的所有解决方案都要求我将jumbotron的位置更改为相对，将背景图像更改为绝对。而且因为我试图保持网站的响应性，这样做会严重破坏小规模网站的外观

我还尝试将jumbotron放置在旋转木马上，方法是将jumbotron设置为绝对值，将旋转木马设置为相对值。同样的缩放问题在较小的屏幕尺寸下再次发生

有没有一个简单的方法可以做到这一点

编辑：我想我的背景改变类似于这个网站：并有适当的规模以及

我的代码：

 <!--begin jumbotron-top-->
<div class="jumbotron" id="jumbotron-top">
    <!--navigation bar-->
    <div class="row">
        <nav class="navbar navbar-default transparent" id="navbar-main">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="fa fa-chevron-down fa-2x"></span> <b>Menu</b>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="navCollapse">
                <ul class="nav nav-stacked main-nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <hr>
            </div>
        </nav>
    </div>
    <!--end nav bar-->

    <h1>Heading</h1>
    <div class="container">
        <p>Content</p>
        <a class="btn btn-lg btn-success fp-buttons" href="#">
            <span class="fa fa-dollar fa-2x"></span>Button1
        </a>

        <a class="btn btn-lg btn-success fp-buttons" href="#">
            <span class="fa fa-check fa-2x"></span>Button2
        </a>
    </div>
</div>
<!--end jumbotron-top-->


切换导航
菜单








标题
内容

我建议只使用内置的旋转木马并对其进行修改，使其按照您想要的方式运行，而不是重新创建旋转木马

我会这样做：

靴子 HTML:

你没有发布你的css，所以我不得不对你试图实现的目标做出一些假设。例如，我没有将导航“放在”jumbotron区域内，而是将其放在页面顶部，并给它一个绝对位置，这样它看起来就像导航在旋转木马背景的顶部一样

您可能还希望根据您的内容调整旋转木马覆盖定位，并通过设置.slide*x*类的最小高度来调整旋转木马本身的高度。我还将使用媒体查询根据视口高度调整最小高度。

非常感谢，这正是我希望实现的目标。我知道我的问题有点含糊，没有包括和CSS，从现在起我会更加小心。再次感谢你！很高兴我能提供帮助（我希望这听起来不像是关于不包括css的讲座，我只是想让你知道我做了一些假设，不确定我是否完全正确）。

<body>
<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="fa fa-chevron-down"></span> <b>Menu</b>
            </button>
            <a class="navbar-brand" href="#">Your Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="navCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Company</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--end nav bar-->
<!--begin bg-carousel-->
<div id="bg-fade-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="slide1"></div>
        </div>
        <div class="item">
            <div class="slide2"></div>
        </div>
        <div class="item">
            <div class="slide3"></div>
        </div>
    </div><!-- .carousel-inner --> 
    <div class="container carousel-overlay text-center">
        <h1>Get Kittens Free All Week Long</h1>
        <p class="lead">Special orders also available upon request.  Check out our pricing.</p>
        <a class="btn btn-lg btn-success fp-buttons" href="#">
            <span class="fa fa-dollar"></span> Get Pricing
        </a>
        <a class="btn btn-lg btn-success fp-buttons" href="#">
            <span class="fa fa-check"></span> Sign Up
        </a>
    </div>
</div><!-- .carousel --> 
<!--end bg-carousel-->
<div class="container">
    <div class="row">
        <div class="col-xs-12">
           <p>Your other page content here...</p>
        </div><!--/.col -->
    </div><!--/.row -->
</div><!--/.container -->

 <!-- Core JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.navbar-default.transparent {
    background-color: transparent;
}
.slide1, .slide2, .slide3 {
    min-height: 560px;
    background-size: cover;
    background-position: center center;
}
.slide1 {
    background-image: url(http://placekitten.com/1000/300);
}
.slide2 {
    background-image: url(http://placekitten.com/1100/300);
}
.slide3 {
    background-image: url(http://placekitten.com/1200/300);
}
/* Carousel Fade Effect */
.carousel.carousel-fade .item {
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    transition: opacity 1s linear;
    opacity: .5;
}
.carousel.carousel-fade .active.item {
    opacity: 1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
    left: 0;
    z-index: 2;
    opacity: 0;
    filter: alpha(opacity=0);
}
.carousel-overlay {
    position: absolute;
    bottom: 100px;
    right: 0;
    left: 0;
}