Bootstrap實戰 - 註冊和登錄

一、介紹

註冊和登錄在社交和商業網站中是必不可少的一個部分。

二、知識點

2.1 標籤頁

2.1.1 基礎標籤頁

標籤頁的使用與導航欄類似，同時都依賴於基礎樣式 nav，不同的是附加樣式變成了 nav-tabs 和 nav-pills（膠囊式），也不用在外面加上一層樣式爲 navbar navbar-* 的 <div> 元素。

2.1.1.1 Tab 式標籤頁

使用方法：用 <ul> + <li> + <a> 構建一個標籤頁，在外層 <ul> 上加上樣式 nav nav-tabs，在需要活躍的元素 <li> 上加上 active 即可。

<!--代碼部分-->
<ul class="nav nav-tabs">
    <li class="active" role="presentation"><a href="#">Tab First</a></li>
    <li role="presentation"><a href="#">Tab Second</a></li>
    <li role="presentation"><a href="#">Tab Third</a></li>
    <li role="presentation"><a href="#">Tab Fourth</a></li>
    <li role="presentation"><a href="#">Tab Fifth</a></li>
</ul>

效果圖：

2.1.1.2 膠囊式標籤頁

使用方法：實現方法與 Tab 式標籤頁類似，把樣式 nav-tabs 換成 nav-pills 即可。

<!--代碼部分-->
<ul class="nav nav-pills">
    <li class="active" role="presentation"><a href="#">Tab First</a></li>
    <li role="presentation"><a href="#">Tab Second</a></li>
    <li role="presentation"><a href="#">Tab Third</a></li>
    <li role="presentation"><a href="#">Tab Fourth</a></li>
    <li role="presentation"><a href="#">Tab Fifth</a></li>
</ul>

效果圖：

2.1.2 帶下拉框的標籤頁

標籤頁與導航欄一樣可以帶下拉框，使用方法也一樣，在要放下拉框的 <li> 中嵌入一個 <ul> + <li> + <a>，並在一級標籤頁 <a> 元素上加上樣式 dropdown-toggle 和屬性 data-toggle="dropdown"，二級導航 <ul> 元素上加上樣式 dropdown-menu。

<!--代碼部分-->
<ul class="nav nav-tabs">
    <li class="active" role="presentation"><a href="#">Tab First</a></li>
    <li role="presentation"><a href="#">Tab Second</a></li>
    <li role="presentation"><a href="#">Tab Third</a></li>
    <li role="presentation"><a href="#">Tab Fourth</a></li>
    <li role="presentation">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab Fifth <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Sub-Tab First</a></li>
            <li><a href="#">Sub-Tab Second</a></li>
            <li><a href="#">Sub-Tab Third</a></li>
        </ul>
    </li>
</ul>

效果圖：

2.1.3 響應式標籤頁

與導航欄一樣，標籤頁也有自己的響應式風格。使用方法：在一級標籤頁 <ul> 元素中加上一個樣式 nav-justified 即可。

<!--代碼部分-->
<ul class="nav nav-tabs nav-justified">
    <li class="active" role="presentation"><a href="#">Tab First</a></li>
    <li role="presentation"><a href="#">Tab Second</a></li>
    <li role="presentation"><a href="#">Tab Third</a></li>
    <li role="presentation"><a href="#">Tab Fourth</a></li>
    <li role="presentation">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab Fifth <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Sub-Tab First</a></li>
            <li><a href="#">Sub-Tab Second</a></li>
            <li><a href="#">Sub-Tab Third</a></li>
        </ul>
    </li>
</ul>

大屏效果圖：

小屏效果圖：

2.1.4 標籤頁內容

切換標籤頁顯示出內容在網頁中很常見，使用方法：在標籤頁 <ul> 元素下方加入一個裏外兩層 <div> 元素的容器，外層 <div> 元素加上樣式 tab-content，內層多個 <div> 加上樣式 tab-pane fade，並給默認顯示的內容加上樣式 in active，這裏的 fade in 是爲了切換時有漸入的效果。另外給內層 <div> 元素分別加上不同的 id 屬性，對應上面 <ul> 元素對應的 href 屬性，例如：若 href="#first"，下面 <div> 元素裏面則是 id="first"。

<!--代碼部分-->
<ul class="nav nav-tabs nav-justified">
    <li class="active" role="presentation"><a href="#first" data-toggle="tab">Tab First</a></li>
    <li role="presentation"><a href="#second" data-toggle="tab">Tab Second</a></li>
    <li role="presentation"><a href="#third" data-toggle="tab">Tab Third</a></li>
    <li role="presentation"><a href="#fourth" data-toggle="tab">Tab Fourth</a></li>
    <li role="presentation"><a href="#fifth" data-toggle="tab">Tab Fifth</a></li>
</ul>
<!--標籤頁內容部分-->
<div class="tab-content">
    <div class="tab-pane fade in active" id="first" role="tabpanel">Hello, I'm Tab First, How are you?</div>
    <div class="tab-pane fade" id="second" role="tabpanel">Hello, I'm Tab Second, How are you?</div>
    <div class="tab-pane fade" id="third" role="tabpanel">Hello, I'm Tab Third, How are you?</div>
    <div class="tab-pane fade" id="fourth" role="tabpanel">Hello, I'm Tab Fourth, How are you?</div>
    <div class="tab-pane fade" id="fifth" role="tabpanel">Hello, I'm Tab Fifth, How are you?</div>
</div>

效果圖：

2.2 按鈕

按鈕是網頁佈局中不可缺少的一部分的，而且不同的場景要使用不同樣式的按鈕。

2.2.1 基礎按鈕

使用方法：在 <button>/<a>/<input> 元素上加上樣式 btn btn-*（default、primary、success、info、warning、danger、link）。

<!--代碼部分-->
<!--白色 標準按鈕-->
<button type="button" class="btn btn-default">默認 - default</button>
<!--深藍色-->
<button type="button" class="btn btn-primary">首選項 - primary</button>
<!--原諒色-->
<button type="button" class="btn btn-success">成功 - success</button>
<!--淺藍色-->
<button type="button" class="btn btn-info">提示 - info</button>
<!--黃色-->
<button type="button" class="btn btn-warning">警告 - warning</button>
<!--紅色-->
<button type="button" class="btn btn-danger">危險 - danger</button>
<!--鏈接樣式-->
<button type="button" class="btn btn-link">首選項 - link</button>

效果圖：

2.2.2 進階的按鈕

2.2.2.1 改變按鈕的大小

可以通過添加樣式 btn-xs、btn-sm、btn-lg 從小到大改變按鈕的大小。

<!--代碼部分-->
<p>
    <button type="button" class="btn btn-primary btn-xs">超小按鈕 - xs</button>
    <button type="button" class="btn btn-success btn-xs">超小按鈕 - xs</button>
    <button type="button" class="btn btn-info btn-xs">超小按鈕 - xs</button>
    <button type="button" class="btn btn-warning btn-xs">超小按鈕 - xs</button>
    <button type="button" class="btn btn-danger btn-xs">超小按鈕 - xs</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">小按鈕 - sm</button>
    <button type="button" class="btn btn-success btn-sm">小按鈕 - sm</button>
    <button type="button" class="btn btn-info btn-sm">小按鈕 - sm</button>
    <button type="button" class="btn btn-warning btn-sm">小按鈕 - sm</button>
    <button type="button" class="btn btn-danger btn-sm">小按鈕 - sm</button>
</p>
<p>
    <button type="button" class="btn btn-primary">默認按鈕</button>
    <button type="button" class="btn btn-success">默認按鈕</button>
    <button type="button" class="btn btn-info">默認按鈕</button>
    <button type="button" class="btn btn-warning">默認按鈕</button>
    <button type="button" class="btn btn-danger">默認按鈕</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-lg">大按鈕 - lg</button>
    <button type="button" class="btn btn-success btn-lg">大按鈕 - lg</button>
    <button type="button" class="btn btn-info btn-lg">大按鈕 - lg</button>
    <button type="button" class="btn btn-warning btn-lg">大按鈕 - lg</button>
    <button type="button" class="btn btn-danger btn-lg">大按鈕 - lg</button>
</p>

效果圖：

2.2.2.2 塊狀按鈕

有時候想把一個按鈕充滿整個父級容器，給按鈕添加一個樣式 btn-block 即可。

<!--代碼部分-->
<button type="button" class="btn btn-primary btn-xs btn-block">超小按鈕 - xs</button>
<button type="button" class="btn btn-primary btn-sm btn-block">小按鈕 - sm</button>
<button type="button" class="btn btn-primary btn-block">默認按鈕</button>
<button type="button" class="btn btn-primary btn-lg btn-block">大按鈕 - lg</button>

效果圖：

2.3 表單

2.3.1 基礎表單

Bootstrap 對錶單的 <input>/<select>/<label> 等表單元素都進行了樣式初始化。首先用一個樣式 form-group 的 <div> 元素包住 <label> 和 <input> 元素獲得良好的排列。

<!--代碼部分-->
<form>
    <div class="form-group">
        <label for="username">帳號：</label>
        <!--樣式form-control會讓input元素寬度爲父容器100%-->
        <input type="text" class="form-control" id="username" placeholder="請輸入帳號" />
    </div>
    <div class="form-group">
        <label for="password">密碼：</label>
        <input type="password" class="form-control" id="password" placeholder="請輸入密碼" />
    </div>
    <button type="submit" class="btn btn-default">登錄</button>
</form>

效果圖：

2.3.2 水平表單

上面的表單“帳號：”和“密碼：”在輸入框上面，這種效果顯然不是我們想要的，這時我們可以給表單添加樣式 form-horizontal 使其變成水平表單，同時配合柵格系統來合理佈局，這裏的 form-group 就相當與柵格系統中的樣式 row，所以可以直接在 form-group 下面使用 col-md-* 等樣式佈局。

<!--代碼部分-->
<form class="form-horizontal">
    <div class="form-group">
        <!--樣式control-label使內容居右-->
        <label for="username" class="col-sm-3 control-label">帳號：</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="username" placeholder="請輸入帳號" />
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-3 control-label">密碼：</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" id="password" placeholder="請輸入密碼" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3">
            <!--樣式checkbox爲input[type='checkbox']指定合適的樣式，相應的還有input[type='radio']的樣式radio-->
            <div class="checkbox">
                <label>
                    <input type="checkbox" /> 記住密碼
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3">
            <button type="submit" class="btn btn-primary btn-sm">登錄</button>
            <a href="#" class="btn btn-link btn-sm">忘記密碼？</a>
        </div>
    </div>
</form>

效果圖：

登錄的話肯定少不了驗證合理性，Bootstrap 提供校驗狀態的提示樣式。在需要提示的 <input> 容器上加上樣式 has-*（success、warning、error）。若想提示 √，× 或其他符號，在容器上加上樣式 has-feedback，並且在樣式 form-control 的 <input> 元素下面添加樣式爲 form-control-feedback 的 Glyphicons 字體圖標。

<!--代碼部分-->
<form class="form-horizontal">
    <div class="form-group">
        <!--樣式control-label使內容居右-->
        <label for="username" class="col-sm-3 control-label">帳號：</label>
        <div class="col-sm-9 has-feedback has-success">
            <input type="text" class="form-control" id="username" placeholder="請輸入帳號" />
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-3 control-label">密碼：</label>
        <div class="col-sm-9 has-feedback has-error">
            <input type="password" class="form-control" id="password" placeholder="請輸入密碼" />
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3">
            <!--樣式checkbox爲input[type='checkbox']指定合適的樣式，相應的還有input[type='radio']的樣式radio-->
            <div class="checkbox">
                <label>
                    <input type="checkbox" /> 記住密碼
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3">
            <button type="submit" class="btn btn-primary btn-sm">登錄</button>
            <a href="#" class="btn btn-link btn-sm">忘記密碼？</a>
        </div>
    </div>
</form>

效果圖：

2.3.3 輸入框組

有時爲了滿足需求要把元素與 <input> 元素組合在一起。使用方法是把 <input> 元素包在一個樣式 input-group 的 <div> 元素內，然後在 <input> 元素下面放一個樣式 input-group-addon 的元素。

<!--代碼部分-->
<form class="form-horizontal">
    <div class="form-group">
        <!--樣式control-label使內容居右-->
        <label for="username" class="col-sm-3 control-label">帳號：</label>
        <div class="col-sm-9 has-feedback has-success">
            <input type="text" class="form-control" id="username" placeholder="請輸入帳號" />
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-3 control-label">密碼：</label>
        <div class="col-sm-9 has-feedback has-error">
            <input type="password" class="form-control" id="password" placeholder="請輸入密碼" />
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-3 control-label">郵箱：</label>
        <div class="col-sm-9">
            <div class="input-group">
                <input type="email" class="form-control" id="email" placeholder="請輸入郵箱" />
                <span class="input-group-addon">@mazey.net</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3">
            <!--樣式checkbox爲input[type='checkbox']指定合適的樣式，相應的還有input[type='radio']的樣式radio-->
            <div class="checkbox">
                <label>
                    <input type="checkbox" /> 記住密碼
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3">
            <button type="submit" class="btn btn-primary btn-sm">登錄</button>
            <a href="#" class="btn btn-link btn-sm">忘記密碼？</a>
        </div>
    </div>
</form>

效果圖：

這裏的元素也可以替換成按鈕，將樣式 input-group-addon 替換成 input-group-btn，然後在裏面包一個 <button> 元素即可。

<!--代碼部分-->
...
<div class="input-group">
    <input type="email" class="form-control" id="email" placeholder="請輸入郵箱" />
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">@mazey.net</button>
    </span>
</div>
...

效果圖：

三、實戰

用標籤頁 + 表單做一個可以切換登錄和註冊的模塊。

演示地址：https://mazey.cn/bootstrap-blueprints/lesson-third-login/index.html，源碼地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-third-login。

版權聲明

本博客所有的原創文章，作者皆保留版權。轉載必須包含本聲明，保持本文完整，並以超鏈接形式註明作者後除和本文原始地址：https://blog.mazey.net/2594.html

（完）