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>

在谷歌瀏覽器內運行，效果如下：