Bootstrap muss jeden Tag reaktionsfähige Navigation und Karussellbilder erlernen_Javascript-Fähigkeiten

Im vorherigen Abschnitt dieser Lektion haben wir mit der Gestaltung unseres ersten Projekts begonnen, einer Unternehmenswebsite für ein internes Schulungsunternehmen. In dieser Lektion lernen wir den Teil der responsiven Navigation kennen.

Grundlegende Navigationskomponente + Responsive:

//基本导航组件+响应式
<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <a href="#" class="navbar-brand"
 style="margin:0;padding:0;"><img src="/static/imghwm/default1.png"  data-src="img/logo.png"  class="lazy" alt="瓢城企训网"></a>
 <button type="button" class="navbar-toggle"
 data-toggle="collapse" data-target="#navbar-collapse">
 <span class="sr-only">切换导航</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 </div>
 <div class="collapse navbar-collapse" id="navbar-collapse">
 <ul class="nav navbar-nav navbar-right"
 style="margin-top:0;">
 <li class="active">
  <a href="#"><span class="glyphiconglyphicon-home"></span> 首页</a>
 </li>
 <li>
  <a href="#"><span class="glyphicon
  glyphicon-list"></span> 资讯</a>
 </li>
 <li>
  <a href="#"><span class="glyphicon
  glyphicon-fire"></span> 案例</a>
 </li>
 <li>
  <a href="#"><span class="glyphicon
  glyphicon-question-sign"></span> 关于</a>
 </li>
 </ul>
 </div>
 </div>
</nav>

Im nächsten Abschnitt erstellen wir ein Karussellbild unterhalb der Navigationsleiste, um automatisch die neuesten wichtigen Entwicklungen abzuspielen.

//响应式轮播图
<div id="myCarousel" class="carousel slide">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0"
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active" style="background:#223240;">
 <a href="#"><img src="/static/imghwm/default1.png"  data-src="img/slide1.png"  class="lazy" alt="第一张"></a>
 </div>
 <div class="item" style="background:#F5E4DC;">
 <a href="#"><img src="/static/imghwm/default1.png"  data-src="img/slide2.png"  class="lazy" alt="第二张"></a>
 </div>
 <div class="item" style="background:#DE2A2D;">
 <a href="#"><img src="/static/imghwm/default1.png"  data-src="img/slide3.png"  class="lazy" alt="第三张"></a>
 </div>
 </div>
 <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">&lsaquo;</a>
 <a href="#myCarousel" data-slide="next" class="carousel-controlright">&rsaquo;</a>
</div>

//所需要的 jQuery 控制

$('#myCarousel').carousel({
 //设置自动播放/2 秒
 interval : 3000,
}); 
//调整轮播器箭头位置

$('.carousel-control').css('line-height', $('.carousel-innerimg').height() + 'px');
$(window).resize(function() {
 var $height = $('.carousel-inner img').eq(0).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height();
 $('.carousel-control').css('line-height', $height + 'px');
}); 

//所需要的 CSS
a:focus {
 outline: none;
}
.navbar-brand {
 padding: 0;
}
#myCarousel {
 margin: 50px 0 0 0;
}
.carousel-inner .item img {
 margin: 0 auto;
}
.carousel-control {
 font-size: 100px;
}

Weitere Informationen finden Sie unter: Bootstrap Learning Tutorial

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Bootstrap-Programmierung hilfreich sein wird.