个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 23:40:00 25 4
gpt4 key购买 nike

我正在尝试让 3 张图像作为 Bootstrap 3 超大屏幕的背景循环显示。但问题是我在超大屏幕内有 3 个 div，到目前为止我尝试过的所有解决方案都要求我将超大屏幕的位置更改为相对位置，将背景图像更改为绝对位置。而且因为我试图保持网站响应，所以这样做会严重破坏较小比例的外观。

我还尝试通过使超大屏幕绝对和旋转木马相对，将超大屏幕放在旋转木马上。同样的缩放问题在较小的屏幕尺寸上再次发生。

有没有简单的方法来做到这一点？

编辑:我希望我的背景更改类似于此站点:http://www.in-toronto-web-design.ca/并使其适当缩放。

我的代码:

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

最佳答案

与其重新创建本质上是旋转木马的内容，我建议只使用内置的旋转木马并修改它以按照您想要的方式运行。

这是我将如何做到这一点:

Bootply Demo

HTML:

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

CSS:

.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;
}

你没有发布你的 CSS，所以我不得不对你想要完成的事情做出一些假设。例如，我没有将导航设置在超大屏幕区域“内部”，而是将其放置在页面顶部并为其指定了绝对定位，这样导航就好像位于轮播背景的顶部。

您可能还想根据您的内容调整旋转木马覆盖定位，以及调整旋转木马本身的高度，方法是设置 .slide*x* 类的最小高度。我还会使用媒体查询根据视口(viewport)高度调整最小高度。

关于twitter-bootstrap - 循环浏览 bootstrap 3 jumbotron 的背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24967616/

25 4 0
文章推荐： twitter-bootstrap - 为响应式设计均匀分布 div 中的元素
文章推荐： laravel - 如何使用 pluck 函数合并集合的值？
文章推荐： python - PyTorch:从另一个模型加载权重而不保存
文章推荐： javascript - 如何通过 JavaScript 使用定时事件显示然后隐藏消息？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com