Bootstrap mesti mempelajari navigasi responsif dan imej karusel setiap hari kemahiran javascript

Dalam bahagian sebelumnya dalam pelajaran ini, kami mula mereka bentuk projek pertama kami, tapak web korporat untuk syarikat latihan dalaman. Dalam pelajaran ini, kami akan belajar tentang bahagian navigasi responsif.

Komponen navigasi asas + responsif:

//基本导航组件+响应式
<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>

Dalam bahagian seterusnya, kami akan membuat imej karusel di bawah bar navigasi untuk memainkan perkembangan penting terkini secara automatik.

//响应式轮播图
<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;
}

Untuk maklumat lanjut, sila rujuk: Tutorial Pembelajaran Bootstrap

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan Bootstrap.