我试图得到的图像在引导旋转木马显示全屏,但没有能够弄清楚,我一直在这一段时间,完全卡住了。现在我只有一个图像,但我会添加更多的一旦它的工作…
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <Meta charset="utf-8">
- <title>Carousel Template · 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,.25);
- -moz-Box-shadow: 0 2px 10px rgba(0,.25);
- Box-shadow: 0 2px 10px rgba(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,.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,.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 o@R_502_410@,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>© 2013 Company,Inc. · <a href="#">Privacy</a> · <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>
解决方法
确保轮播项目中的img设置为高度和宽度100%。你还必须确保轮播和任何.item容器(html,body)是100%…
- html,body{height:100%;}
- .carousel,.item,.active{height:100%;}
- .carousel-inner{height:100%;}
Boostrap Full Screen Carousel Demo
以下是Bootstrap 3.x的示例:
http://www.codeply.com/go/2tVXo3mAtV