Bootstrap 3簡介與應用

一、Bootstrap 3基礎

Bootstrap是Twitter推出的前端開發框架，它是一個基於HTML、CSS和JavaScript的響應式設計框架，可以幫助開發者快速構建美觀的響應式web應用。Bootstrap 3最新版本已經更新到3.4.1，我們通過闡述Bootstrap 3的基礎知識，可以更好地理解它的應用。

1.1 柵格系統

Bootstrap 3採用的是12個欄位的網格系統，可以自由組合和嵌套，支持響應式設計，並且使用方便。其中col-xs、col-sm、col-md、和col-lg分別代表不同的屏幕分辨率的欄位數，需要根據實際需要選擇使用，例如：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <!-- content -->
    </div>
</div>

上述代碼表示創建一行分為12個欄位，其中在xs（Extra small）屏幕下，使用12個欄位；在sm（Small）屏幕下，使用6個欄位；在md（Medium）屏幕下，使用4個欄位；在lg（Large）屏幕下，使用3個欄位。Bootstrap 3的柵格系統提供了很好的響應式功能，支持任意組合，可以用於呈現不同大小、不同設備上的分欄效果。

1.2 其他組件

Bootstrap 3提供了很多UI組件，例如：導航欄、麵包屑、標籤、按鈕、面板等等。具體的使用方式可以參考Bootstrap中文網的文檔（http://www.bootcss.com/）。

二、Bootstrap 3實例

上述是Bootstrap 3的基礎，下面通過一個實例來介紹它的應用。假設我們需要創建一個響應式的網頁，包括導航欄、輪播圖、面板等等，具體的設計如下：


2.1 導航欄

使用Bootstrap 3的導航欄可以很方便地實現上圖中的設計需求，代碼如下：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="#">Brand</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

上述代碼中，navbar表示導航欄，navbar-header表示導航欄的頭部，navbar-toggle表示導航欄的摺疊按鈕。當摺疊按鈕被點擊時，可以顯示導航欄中的選項。而navbar-collapse則對應摺疊按鈕所控制的選項內容區域。

2.2 輪播圖

使用Bootstrap 3的輪播圖可以很方便地實現上圖中的設計需求，代碼如下（包含了圖片和文字）：

<div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="img_chania.jpg" alt="Los Angeles">
            <div class="carousel-caption">
                <h3>Los Angeles</h3>
                <p>LA is always so much fun!</p>
            </div>
        </div>

        <div class="item">
            <img src="img_ chicago.jpg" alt="Chicago">
            <div class="carousel-caption">
                <h3>Chicago</h3>
                <p>Thank you, Chicago!</p>
            </div>
        </div>

        <div class="item">
            <img src="img_chania.jpg" alt="New York">
            <div class="carousel-caption">
                <h3>New York</h3>
                <p>We love the Big Apple!</p>
            </div>
        </div>
    </div>

    <!-- Left and right controls -->
    <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>

上述代碼中，carousel表示輪播圖，carousel-indicators表示索引，carousel-inner則包含了所有的輪播圖項目。左右箭頭則分別控制輪播圖的前一張和後一張。

2.3 帶標題面板

使用Bootstrap 3的面板可以很方便地實現上圖中的設計需求，代碼如下：

<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title">Panel title 1</h3></div>
            <div class="panel-body">Panel content 1</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title">Panel title 2</h3></div>
            <div class="panel-body">Panel content 2</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title">Panel title 3</h3></div>
            <div class="panel-body">Panel content 3</div>
        </div>
    </div>
</div>

上述代碼中，panel表示面板，panel-heading表示面板標題，panel-body表示面板內容。面板可以通過柵格系統來進行排列，支持同時顯示多個面板。

三、Bootstrap 3總結

Bootstrap 3是一個優秀的前端開發框架，它的廣泛應用可以提高開發效率，減少重複的編碼工作，同時也能夠構建高品質的響應式網站。在實踐中，我們可以通過調整柵格系統和UI組件，來靈活地滿足不同的設計需求。如果您感興趣，可以訪問Bootstrap中文網（http://www.bootcss.com/）來查看更多的示例和文檔。