第一个项目--用bootstrap实现美工设计的首页

主要介绍在首页实现中用到bootstrap实现效果的地方。

• 实现如下的效果：

<li>
    <div role="group" style="padding-top: 17px;">
       <a href="#">登录</a> | <a href="#">注册</a>
    </div>
</li>

• 实现如下效果：输入框里面包含图标

<li class="navbar-form navbar-right">
  <div class="form-group has-feedback">
     <input class="form-control " placeholder="搜索" type="text"/>
       <span class="glyphicon glyphicon-search form-control-feedback"></span>
  </div>
</li>

• 实现如下效果：

div2悬浮div1之上：

<div>
   <div id="navbar3" style="position:absolute;">  
          <!--背景图片-->
   </div>
   <div class="container" style="position:relative;padding-top: 300px;">
   </div>
 </div>

• 实现如下效果：

自己在网上找了半天，基本上都是一次轮询一张图片。自己按照例子实现一次实现轮询四张图片。实现多张图片的效果，可以根据需要动态调整。如下：

 

 <!-- Carousel -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators 取消图片下的切换按钮 hidden-->
      <ol class="carousel-indicators hidden">
        <li data-target="#myCarousel" data-slide-to="0"></li>
        <li class="" data-target="#myCarousel" data-slide-to="1"></li>
        <li class="" data-target="#myCarousel" data-slide-to="2"></li>
        <li class="" data-target="#myCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <!--轮询4张图片第一轮-->
        <div class="item active" id="myCarouseldiv1">
            <ul>
               <li> 
                 <img class="first-slide"  onmouseover="this.src='img/sm11.jpg'" onmouseout="this.src='img/0.png'" src="img/0.png" alt="First slide;"></li>
               <li>
                 <img class="second-slide" onmouseover="this.src='img/sm21.jpg'" onmouseout="this.src='img/1.png'" src="img/1.png" alt="First slide;"></li>
               <li> 
                 <img class="second-slide" onmouseover="this.src='img/sm31.jpg'" onmouseout="this.src='img/2.png'" src="img/2.png" alt="First slide;"></li>
               <li>
                 <img class="second-slide" onmouseover="this.src='img/sm41.jpg'" onmouseout="this.src='img/3.png'" src="img/3.png" alt="First slide;"></li>
            </ul>
        </div>
        <!--轮询4张图片第二轮-->   
      </div>
      <div class="center" id="myCarosela">
         <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      </div>     
    </div><!-- /.carousel -->

轮询CSS:（根据自己需要调整宽度）

#myCarousel{width:1000px;height:120px;margin:0 auto;}
#myCarouseldiv1{height: 120px;background-color: #FFF;}
#myCarouseldiv1 ul{float:left;padding-right:40px;margin-left: 5px;}
#myCarouseldiv1 ul li{float:left;list-style:none; padding-left: 10px;}
   <!--#myCarouseldiv2轮询第二轮的四张图片css-->
#myCarosela a{margin-top: 50px;background-color: orange;width: 30px;height: 30px;}

• 使用的栅格暂时不做介绍了bootstrap中文网上都有。