发表于: 2017-04-05 23:59:30

1 640


今天完成的事:

       导航栏代码:

<header>
   <div class="container">
       <div class="top">
       <span style="color: #26a26f">咨询电话:010-59478634</span>
       <button class="download"><img src="image/wechat.png"></button>
       <button class="download"><img src="image/weibo.png"></button>
       <button class="download"><img src="image/qq.png"></button>
       </div>
   </div>
   <div class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
               <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 example">
           <ul class="nav navbar-nav">
               <li><a href="#" class="about">首页</a></li>
               <li><a href="#" class="about">职业</a></li>
               <li><a href="#" class="about">学习</a></li>
               <li><a href="#" class="about">关于</a></li>
           </ul>
       </div>
       </div>
</header>

       轮播图的制作

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
   <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>
       <li data-target="#carousel-example-generic" data-slide-to="3"></li>
   </ol>
   <div class="carousel-inner" role="listbox">
       <div class="item active">
           <img src="image/image.png" >
       </div>
       <div class="item">
           <img src="image/image2.png" >
       </div>
       <div class="item">
           <img src="image/image3.png" >
       </div>
       <div class="item">
           <img src="image/image4.png" >
       </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>
   </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>
   </a>
</div>

      栅格布局制作

明天计划的事情:

     任务8和9一起完成

问题:

     我header缩放后的按钮没有下拉菜单,无法解决。

收获:

     bootstrap的栅格化系统总共有这么几种变化。·

第一:样式有三个固定宽度和一个自适应宽度,分别是750、970 和1170固定宽,在小于768的时候则是采用屏幕宽度-30(左右15像素)的宽度。

第二:通过不同宽度的标签来改变在不同宽度下的栏目宽度变化,比如在1200的时候,可以使用col-lg-8与col-lg-4,那么在970的时候可以使用col-md-6与col-md-6了。这时候两种不同屏幕的显示时不同的。




返回列表 返回列表
评论

    分享到