一,轮播图 轮播图完整代码: <!-- 轮播图最外层的大盒子 在这里传入参数 --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- 轮播图的图片部分-> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <!-- 该图片的标题-> <div class="carousel-caption"> 该图片的标题内容 </div> </div> <div class="item"> <img src="..." alt="..."> <!-- 该图片的标题-> <div class="carousel-caption"> 该图片的标题内容 </div> </div> ... </div> <!-- 轮播图的左右控制按钮 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">左文字提示(可有可无)</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">右文字提示(可有可无)</span> </a> </div> 1, 最外层大盒子的其中一个类名,用来定位左右箭头和底部的角标 .carousel { position: relative; } 用来定位底部角标的位置 .carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; } @media screen and (min- 768px) .carousel-indicators { bottom: 20px; } 把active类名添加给与显示图片绑定的角标 .carousel-indicators .active { 12px; height: 12px; margin: 0; background-color: #fff; } 外层包所有图片的盒子 .carousel-inner { position: relative; 100%; overflow: hidden; } 添加给包图片的盒子 .carousel-inner>.item { position: relative; display: none; -webkit-transition: .6s ease-in-outleft; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left; } 给显示的图片添加active类名 @media not all, (-webkit-transform-3d) bootstrap.css:6282 .carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right { left: 0; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 遮罩层 .carousel-control { position: absolute; top: 0; bottom: 0; left: 0; 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); background-color: rgba(0,0,0,0); filter: alpha(opacity=50); opacity: .5; } 箭头 .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } glyphicon-chevron-left:设置左箭头的位置 glyphicon-chevron-right:设置右箭头的位置 固定在顶部 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> ... </div> </nav> 首先添加插件: <link rel="stylesheet" href="./bootstrap-3.3.7 (1)/bootstrap-3.3.7/dist/css/bootstrap.min.css"> .navbar-fixed-top:给要固定的盒子添加这个类名 给要固定的盒子添加背景颜色 .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; } 给导航栏添加基本的样式 .navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent; } 让盒子居中 .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }