1. 首页
  2. 问答
  3. Bootstrap旋转木马全屏

Bootstrap旋转木马全屏

2013-05-03 184 views
38

我想在自举旋转木马中显示图像以显示全屏，但一直无法找出它，我一直在这一段时间工作，并完全卡住。现在，我只有一个形象，但我会添加更多的，一旦它的作品...Bootstrap旋转木马全屏

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Carousel Template &middot; Bootstrap</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Le styles --> 
    <link href="../assets/css/bootstrap.css" rel="stylesheet"> 
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> 
    <style> 

    /* GLOBAL STYLES 
    -------------------------------------------------- */ 
    /* Padding below the footer and lighter body text */ 

    body { 
     color: #5a5a5a; 
     height: 100%; 
     width: 100%; 
     min-height: 100%; 
    } 



    /* CUSTOMIZE THE NAVBAR 
    -------------------------------------------------- */ 

    /* Special class on .container surrounding .navbar, used for positioning it into place. */ 
    .navbar-wrapper { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     z-index: 10; 
     margin-top: 20px; 
    } 
    .navbar-wrapper .navbar { 

    } 

    /* Remove border and change up box shadow for more contrast */ 
    .navbar .navbar-inner { 
     border: 0; 
     -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); 
     -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25); 
       box-shadow: 0 2px 10px rgba(0,0,0,.25); 
    } 

    /* Downsize the brand/project name a bit */ 
    .navbar .brand { 
     padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */ 
     font-size: 16px; 
     font-weight: bold; 
     text-shadow: 0 -1px 0 rgba(0,0,0,.5); 
    } 

    /* Navbar links: increase padding for taller navbar */ 
    .navbar .nav > li > a { 
     padding: 15px 20px; 
    } 

    /* Offset the responsive button for proper vertical alignment */ 
    .navbar .btn-navbar { 
     margin-top: 10px; 
    } 



    /* CUSTOMIZE THE CAROUSEL 
    -------------------------------------------------- */ 

    /* Carousel base class */ 
    .carousel { 
     margin-bottom: 0px; 
    } 

    .carousel .container { 
     position: relative; 
     z-index: 9; 
    } 

    .carousel .item { 
     height: 100%; 
    } 

    .carousel-inner { 
     overflow:hidden; 
     width: 100%; 
     min-height: 100%; 
     position:relative; 
    } 

    .carousel img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     min-height: 100%; 
    } 

    .carousel-caption { 
     background-color: transparent; 
     position: static; 
     max-width: 550px; 
     padding: 0 20px; 
     margin-top: 200px; 
    } 
    .carousel-caption h1, 
    .carousel-caption .lead { 
     margin: 0; 
     line-height: 1.25; 
     color: #fff; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
    } 
    .carousel-caption .btn { 
     margin-top: 10px; 
    } 


    /* RESPONSIVE CSS 
    -------------------------------------------------- */ 

    @media (max-width: 979px) { 

     .container.navbar-wrapper { 
     margin-bottom: 0; 
     width: auto; 
     } 
     .navbar-inner { 
     border-radius: 0; 
     margin: -20px 0; 
     } 

     .carousel img { 
     width: auto; 
     height: 500px; 
     } 

     .featurette { 
     height: auto; 
     padding: 0; 
     } 
     .featurette-image.pull-left, 
     .featurette-image.pull-right { 
     display: block; 
     float: none; 
     max-width: 40%; 
     margin: 0 auto 20px; 
     } 
    } 


    @media (max-width: 767px) { 

     .navbar-inner { 
     margin: -20px; 
     } 

     .carousel { 
     margin-left: -20px; 
     margin-right: -20px; 
     } 
     .carousel img { 
     height: 300px; 
     } 
     .carousel-caption { 
     width: 65%; 
     padding: 0 70px; 
     margin-top: 100px; 
     } 
     .carousel-caption h1 { 
     font-size: 30px; 
     } 
     .carousel-caption .lead, 
     .carousel-caption .btn { 
     font-size: 18px; 
     } 

     .marketing .span4 + .span4 { 
     margin-top: 40px; 
     } 

     .featurette-heading { 
     font-size: 30px; 
     } 
     .featurette .lead { 
     font-size: 18px; 
     line-height: 1.5; 
     } 

    } 
    </style> 

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="../assets/js/html5shiv.js"></script> 
    <![endif]--> 

    <!-- Fav and touch icons --> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> 
        <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> 
            <link rel="shortcut icon" href="../assets/ico/favicon.png"> 
    </head> 

    <body> 



    <!-- NAVBAR 
    ================================================== --> 
    <div class="navbar-wrapper"> 
     <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. --> 
     <div class="container"> 

     <div class="navbar navbar-inverse"> 
      <div class="navbar-inner"> 
      <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="#">Treyca</a> 
      <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. --> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="fluid.html">Beta</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns --> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li class="nav-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
      </div><!--/.nav-collapse --> 
      </div><!-- /.navbar-inner --> 
     </div><!-- /.navbar --> 

     </div> <!-- /.container --> 
    </div><!-- /.navbar-wrapper --> 



    <!-- Carousel 
    ================================================== --> 
    <div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="../assets/img/examples/Bar-1.jpg" alt=""> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>Example headline.</h1> 
       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       <a class="btn btn-large btn-primary" href="#">Sign up today</a> 
      </div> 
      </div> 
     </div> 
     </div> 
     <!-- FOOTER --> 
     <footer> 
     <p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p> 
     </footer> 
    </div><!-- /.carousel --> 

    <!-- Le javascript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="../assets/js/jquery.js"></script> 
    <script src="../assets/js/bootstrap-transition.js"></script> 
    <script src="../assets/js/bootstrap-alert.js"></script> 
    <script src="../assets/js/bootstrap-modal.js"></script> 
    <script src="../assets/js/bootstrap-dropdown.js"></script> 
    <script src="../assets/js/bootstrap-scrollspy.js"></script> 
    <script src="../assets/js/bootstrap-tab.js"></script> 
    <script src="../assets/js/bootstrap-tooltip.js"></script> 
    <script src="../assets/js/bootstrap-popover.js"></script> 
    <script src="../assets/js/bootstrap-button.js"></script> 
    <script src="../assets/js/bootstrap-collapse.js"></script> 
    <script src="../assets/js/bootstrap-carousel.js"></script> 
    <script src="../assets/js/bootstrap-typeahead.js"></script> 
    <script> 
     !function ($) { 
     $(function(){ 
      // carousel demo 
      $('#myCarousel').carousel() 
     }) 
     }(window.jQuery) 
    </script> 
    <script src="../assets/js/holder/holder.js"></script> 

    <style> 
     body { 
       background-color: black; 
       color: #FFFFFF; 
      } 
    </style> 
    </body> 
</html>

来源

2013-05-03 Tyler B. Wear

回答

55

确保转盘物品内部的IMG设置为高度和宽度100％。你还必须确保传送带和任何.item容器（HTML，身体）100％的...

html,body{height:100%;} 
.carousel,.item,.active{height:100%;} 
.carousel-inner{height:100%;}

​​

下面是引导3.x的一个例子： http://www.codeply.com/go/2tVXo3mAtV

来源

2013-05-03 10:21:39 ZimSystem

+0

你的网页是404/500 – Blowsie 2014-02-20 09:52:17

+0

http://bootply.com/59900 - 适合我 – ZimSystem 2014-02-20 11:29:29

13

我几乎在每个引导项目中都使用全宽滑块。下面是我的做法吧：

1）包裹传送带到定制全宽容器（任何.container类外）
2）设置图像幻灯片的宽度和100％
3容器）设置根据需要滑块的高度

它是这样的：

<section class="block"> 
    <div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="active item"> 
       <img src="http://lorempixel.com/1024/750" alt="Slide1" /> 
      </div> 
      <div class="item"> 
       <img src="http://lorempixel.com/1024/750" alt="Slide2" /> 
      </div> 
      <div class="item"> 
       <img src="http://lorempixel.com/1024/750" alt="Slide3" /> 
      </div> 
     </div> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
    </div> 
</section>

而CSS是这样的：

.carousel .item { 
    width: 100%; /*slider width*/ 
    max-height: 600px; /*slider height*/ 
} 
.carousel .item img { 
    width: 100%; /*img width*/ 
} 
/*full width container*/ 
@media (max-width: 767px) { 
    .block { 
     margin-left: -20px; 
     margin-right: -20px; 
    } 
}

来源

2013-06-16 05:54:55 heyallan

0

我有同样的问题，我试着用上面的答案，但我想要的东西更细，然后我试图改变逐一opsions，并发现我们只需要添加

.carousel { 
    height: 100%; 
}

来源

2013-11-14 16:10:36

+1

请解释你是如何到达你的答案，而不是仅仅给予它，以便其他人可以从中学习。 – ArtB 2013-11-14 16:29:54

+0

为我工作！，但我认为你也应该改变图像的尺寸，..对我来说，我改变（或裁剪）所有图像的比例为1280：720 – Windo 2015-06-27 17:51:59

1

我在startbootstrap.com上找到了答案。试试这个代码：

CSS

html, 
body { 
    height: 100%; 
} 

.carousel, 
.item, 
.active { 
    height: 100%; 
} 


.carousel-inner { 
    height: 100%; 
} 

/* Background images are set within the HTML using inline CSS, not here */ 

.fill { 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

footer { 
    margin: 50px 0; 
}

HTML

<div class="carousel-inner"> 
     <div class="item active"> 
      <!-- Set the first background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 1</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the second background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 2</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 3</h2> 
      </div> 
     </div> 
    </div>

Source

来源

2015-02-15 09:31:14

0

这是我做到了。这使得幻灯片中的图像占据全屏，如果它的宽高比允许的话，它可以缩小。

.carousel { 
    height: 100vh; 
    width: 100%; 
    overflow:hidden; 
} 
.carousel .carousel-inner { 
    height:100%;  
}

为了获得永诺全屏幻灯片，无论是屏幕宽高比，您还可以使用对象的配合：（在IE或边缘doesn't工作）

.carousel .carousel-inner img { 
    display:block; 
    object-fit: cover; 
}

来源

2016-09-20 09:12:17 Turbojohan

相关问题

 相关问题