twitter-bootstrap – Bootstrap Carousel全屏幕

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap Carousel全屏幕前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图得到的图像在引导旋转木马显示全屏,但没有能够弄清楚,我一直在这一段时间,完全卡住了。现在我只有一个图像,但我会添加更多的一旦它的工作…
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <Meta charset="utf-8">
  6. <title>Carousel Template &middot; Bootstrap</title>
  7. <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  8. <Meta name="description" content="">
  9. <Meta name="author" content="">
  10.  
  11. <!-- Le styles -->
  12. <link href="../assets/css/bootstrap.css" rel="stylesheet">
  13. <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
  14. <style>
  15.  
  16. /* GLOBAL STYLES
  17. -------------------------------------------------- */
  18. /* Padding below the footer and lighter body text */
  19.  
  20. body {
  21. color: #5a5a5a;
  22. height: 100%;
  23. width: 100%;
  24. min-height: 100%;
  25. }
  26.  
  27.  
  28.  
  29. /* CUSTOMIZE THE NAVBAR
  30. -------------------------------------------------- */
  31.  
  32. /* Special class on .container surrounding .navbar,used for positioning it into place. */
  33. .navbar-wrapper {
  34. position: absolute;
  35. top: 0;
  36. left: 0;
  37. right: 0;
  38. z-index: 10;
  39. margin-top: 20px;
  40. }
  41. .navbar-wrapper .navbar {
  42.  
  43. }
  44.  
  45. /* Remove border and change up Box shadow for more contrast */
  46. .navbar .navbar-inner {
  47. border: 0;
  48. -webkit-Box-shadow: 0 2px 10px rgba(0,.25);
  49. -moz-Box-shadow: 0 2px 10px rgba(0,.25);
  50. Box-shadow: 0 2px 10px rgba(0,.25);
  51. }
  52.  
  53. /* Downsize the brand/project name a bit */
  54. .navbar .brand {
  55. padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
  56. font-size: 16px;
  57. font-weight: bold;
  58. text-shadow: 0 -1px 0 rgba(0,.5);
  59. }
  60.  
  61. /* Navbar links: increase padding for taller navbar */
  62. .navbar .nav > li > a {
  63. padding: 15px 20px;
  64. }
  65.  
  66. /* Offset the responsive button for proper vertical alignment */
  67. .navbar .btn-navbar {
  68. margin-top: 10px;
  69. }
  70.  
  71.  
  72.  
  73. /* CUSTOMIZE THE CAROUSEL
  74. -------------------------------------------------- */
  75.  
  76. /* Carousel base class */
  77. .carousel {
  78. margin-bottom: 0px;
  79. }
  80.  
  81. .carousel .container {
  82. position: relative;
  83. z-index: 9;
  84. }
  85.  
  86. .carousel .item {
  87. height: 100%;
  88. }
  89.  
  90. .carousel-inner {
  91. overflow:hidden;
  92. width: 100%;
  93. min-height: 100%;
  94. position:relative;
  95. }
  96.  
  97. .carousel img {
  98. position: absolute;
  99. top: 0;
  100. left: 0;
  101. min-width: 100%;
  102. min-height: 100%;
  103. }
  104.  
  105. .carousel-caption {
  106. background-color: transparent;
  107. position: static;
  108. max-width: 550px;
  109. padding: 0 20px;
  110. margin-top: 200px;
  111. }
  112. .carousel-caption h1,.carousel-caption .lead {
  113. margin: 0;
  114. line-height: 1.25;
  115. color: #fff;
  116. text-shadow: 0 1px 1px rgba(0,.4);
  117. }
  118. .carousel-caption .btn {
  119. margin-top: 10px;
  120. }
  121.  
  122.  
  123. /* RESPONSIVE CSS
  124. -------------------------------------------------- */
  125.  
  126. @media (max-width: 979px) {
  127.  
  128. .container.navbar-wrapper {
  129. margin-bottom: 0;
  130. width: auto;
  131. }
  132. .navbar-inner {
  133. border-radius: 0;
  134. margin: -20px 0;
  135. }
  136.  
  137. .carousel img {
  138. width: auto;
  139. height: 500px;
  140. }
  141.  
  142. .featurette {
  143. height: auto;
  144. padding: 0;
  145. }
  146. .featurette-image.pull-left,.featurette-image.pull-right {
  147. display: block;
  148. float: none;
  149. max-width: 40%;
  150. margin: 0 auto 20px;
  151. }
  152. }
  153.  
  154.  
  155. @media (max-width: 767px) {
  156.  
  157. .navbar-inner {
  158. margin: -20px;
  159. }
  160.  
  161. .carousel {
  162. margin-left: -20px;
  163. margin-right: -20px;
  164. }
  165. .carousel img {
  166. height: 300px;
  167. }
  168. .carousel-caption {
  169. width: 65%;
  170. padding: 0 70px;
  171. margin-top: 100px;
  172. }
  173. .carousel-caption h1 {
  174. font-size: 30px;
  175. }
  176. .carousel-caption .lead,.carousel-caption .btn {
  177. font-size: 18px;
  178. }
  179.  
  180. .marketing .span4 + .span4 {
  181. margin-top: 40px;
  182. }
  183.  
  184. .featurette-heading {
  185. font-size: 30px;
  186. }
  187. .featurette .lead {
  188. font-size: 18px;
  189. line-height: 1.5;
  190. }
  191.  
  192. }
  193. </style>
  194.  
  195. <!-- HTML5 shim,for IE6-8 support of HTML5 elements -->
  196. <!--[if lt IE 9]>
  197. <script src="../assets/js/html5shiv.js"></script>
  198. <![endif]-->
  199.  
  200. <!-- Fav and touch icons -->
  201. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
  202. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
  203. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
  204. <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
  205. <link rel="shortcut icon" href="../assets/ico/favicon.png">
  206. </head>
  207.  
  208. <body>
  209.  
  210.  
  211.  
  212. <!-- NAVBAR
  213. ================================================== -->
  214. <div class="navbar-wrapper">
  215. <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
  216. <div class="container">
  217.  
  218. <div class="navbar navbar-inverse">
  219. <div class="navbar-inner">
  220. <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
  221. <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  222. <span class="icon-bar"></span>
  223. <span class="icon-bar"></span>
  224. <span class="icon-bar"></span>
  225. </button>
  226. <a class="brand" href="#">Treyca</a>
  227. <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
  228. <div class="nav-collapse collapse">
  229. <ul class="nav">
  230. <li class="active"><a href="#">Home</a></li>
  231. <li><a href="#about">About</a></li>
  232. <li><a href="fluid.html">Beta</a></li>
  233. <li><a href="#contact">Contact</a></li>
  234. <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
  235. <li class="dropdown">
  236. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  237. <ul class="dropdown-menu">
  238. <li><a href="#">Action</a></li>
  239. <li><a href="#">Another action</a></li>
  240. <li><a href="#">Something else here</a></li>
  241. <li class="divider"></li>
  242. <li class="nav-header">Nav header</li>
  243. <li><a href="#">Separated link</a></li>
  244. <li><a href="#">One more separated link</a></li>
  245. </ul>
  246. </li>
  247. </ul>
  248. </div><!--/.nav-collapse -->
  249. </div><!-- /.navbar-inner -->
  250. </div><!-- /.navbar -->
  251.  
  252. </div> <!-- /.container -->
  253. </div><!-- /.navbar-wrapper -->
  254.  
  255.  
  256.  
  257. <!-- Carousel
  258. ================================================== -->
  259. <div id="myCarousel" class="carousel slide">
  260. <div class="carousel-inner">
  261. <div class="item active">
  262. <img src="../assets/img/examples/Bar-1.jpg" alt="">
  263. <div class="container">
  264. <div class="carousel-caption">
  265. <h1>Example headline.</h1>
  266. <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>
  267. <a class="btn btn-large btn-primary" href="#">Sign up today</a>
  268. </div>
  269. </div>
  270. </div>
  271. </div>
  272. <!-- FOOTER -->
  273. <footer>
  274. <p>&copy; 2013 Company,Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  275. </footer>
  276. </div><!-- /.carousel -->
  277.  
  278. <!-- Le javascript
  279. ================================================== -->
  280. <!-- Placed at the end of the document so the pages load faster -->
  281. <script src="../assets/js/jquery.js"></script>
  282. <script src="../assets/js/bootstrap-transition.js"></script>
  283. <script src="../assets/js/bootstrap-alert.js"></script>
  284. <script src="../assets/js/bootstrap-modal.js"></script>
  285. <script src="../assets/js/bootstrap-dropdown.js"></script>
  286. <script src="../assets/js/bootstrap-scrollspy.js"></script>
  287. <script src="../assets/js/bootstrap-tab.js"></script>
  288. <script src="../assets/js/bootstrap-tooltip.js"></script>
  289. <script src="../assets/js/bootstrap-popover.js"></script>
  290. <script src="../assets/js/bootstrap-button.js"></script>
  291. <script src="../assets/js/bootstrap-collapse.js"></script>
  292. <script src="../assets/js/bootstrap-carousel.js"></script>
  293. <script src="../assets/js/bootstrap-typeahead.js"></script>
  294. <script>
  295. !function ($) {
  296. $(function(){
  297. // carousel demo
  298. $('#myCarousel').carousel()
  299. })
  300. }(window.jQuery)
  301. </script>
  302. <script src="../assets/js/holder/holder.js"></script>
  303.  
  304. <style>
  305. body {
  306. background-color: black;
  307. color: #FFFFFF;
  308. }
  309. </style>
  310. </body>
  311. </html>

解决方法

确保轮播项目中的img设置为高度和宽度100%。你还必须确保轮播和任何.item容器(html,body)是100%…
  1. html,body{height:100%;}
  2. .carousel,.item,.active{height:100%;}
  3. .carousel-inner{height:100%;}

Boostrap Full Screen Carousel Demo

以下是Bootstrap 3.x的示例:
http://www.codeply.com/go/2tVXo3mAtV

猜你在找的Bootstrap相关文章