BootStrap学习(三)——重写首页之导航栏和轮播图

1、按钮

1）帮助文档：http://v3.bootcss.com/css/#buttons

2）.btn-lg、.btn-sm、.btn-xs可以设置按钮的不同尺寸

3）.active类设置按钮的激活状态，其表现为被按压下去（底色更深、边框颜色更深、向内投射阴影）。

2、导航栏帮助文档：http://v3.bootcss.com/components/#navbar

　  反色导航条：http://v3.bootcss.com/components/#navbar-inverted   通过添加 .navbar-inverse类可以改变导航条的外观。

在帮助文档下，BootStrap已经提供了导航的完整实例，通常情况下只需要复制到当前HTML文件进行简单的修改即可。

具体代码实现：

         <!--导航栏-->
         <div class="container" style="margin-top: 10px;">

             <nav class="navbar navbar-inverse">
                 <div class="container-fluid">
                     <!-- Brand and toggle get grouped for better mobile display -->
                     <div class="navbar-header">
                       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                       </button>
                       <a class="navbar-brand" href="#">首页</a>
                     </div>

                     <!-- Collect the nav links, forms, and other content for toggling -->
                     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                       <ul class="nav navbar-nav">
                         <li class="active">
                             <a href="#">手机数码<span class="sr-only">(current)</span></a>
                         </li>
                         <li>
                             <a href="#">家用电器</a>
                         </li>
                          <li>
                             <a href="#">电脑办公</a>
                         </li>
                          <li>
                             <a href="#">鞋靴箱包</a>
                         </li>
                          <li>
                             <a href="#">孕婴保健</a>
                         </li>

                         <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">所有分类 <span class="caret"></span></a>
                           <ul class="dropdown-menu">
                             <li>
                                 <a href="#">手机数码</a>
                             </li>
                             <li>
                                 <a href="#">家用电器</a>
                             </li>
                             <li>
                                 <a href="#">电脑办公</a>
                             </li>
                             <li role="separator" class="divider"></li>
                             <li>
                                 <a href="#">鞋靴箱包</a>
                             </li>
                             <li role="separator" class="divider"></li>
                             <li>
                                 <a href="#">孕婴保健</a>
                             </li>
                           </ul>
                         </li>
                       </ul>

                       <form class="navbar-form navbar-right">
                         <div class="form-group">
                           <input type="text" class="form-control" placeholder="Search">
                         </div>
                         <button type="submit" class="btn btn-default">Submit</button>
                       </form>
                     </div>
                 </div>
             </nav>
         </div>

在谷歌浏览器内运行，效果如下（大屏幕）：

中等屏幕下：

较小屏幕下：

点击右侧按钮：

3、轮播图帮助文档：http://v3.bootcss.com/javascript/#carousel

和导航栏一样，直接将案例代码复制过来修改即可。

 <!--轮播图-->
         <div class="container">
             <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>

                 <!-- Wrapper for slides（轮播展示，item表示一个图片）-->
                 <div class="carousel-inner" role="listbox">
                     <div class="item active">
                         <img src="../img/1.jpg" alt="...">
                         <div class="carousel-caption">
                             ...
                         </div>
                     </div>
                     <div class="item">
                         <img src="../img/2.jpg" alt="...">
                         <div class="carousel-caption">
                             ...
                         </div>
                     </div>
                     <div class="item">
                         <img src="../img/3.jpg" alt="...">
                         <div class="carousel-caption">
                             ...
                         </div>
                     </div>
                 </div>

                 <!-- Controls（左右控制区，href用于确定点击触发的那个轮播图）-->
                 <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">Previous</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">Next</span>
                 </a>
             </div>
         </div>

在谷歌浏览器内运行，效果如下：