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>

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