Bootstrap 支援的一個特性—輸入框組

安全劍客發表於2020-01-14
boot
輸入框組擴充套件自 表單控制元件。使用輸入框組，可以很容易地向基於文字的輸入框新增作為字首和字尾的文字或按鈕。

Bootstrap 支援的一個特性—輸入框組Bootstrap 支援的一個特性—輸入框組

通過向輸入域新增字首和字尾的內容，可以向使用者輸入新增公共的元素。例如，可以新增美元符號，或者在 Twitter 使用者名稱前新增 @，或者應用程式介面所需要的其他公共的元素。

向 .form-control 新增字首或字尾元素的步驟如下：

  • 把字首或字尾元素放在一個帶有 class  .input-group 的 <div> 中。
  • 接著，在相同的 <div> 內，在 class 為  .input-group-addon 的 <span> 內放置額外的內容。
  • 把該 <span> 放置在 <input> 元素的前面或者後面。

為了保持跨瀏覽器的相容性，請避免使用 <select> 元素，因為它們在 WebKit 瀏覽器中不能完全渲染出效果。也不要直接向表單組應用輸入框組的 class，輸入框組是一個孤立的元件。

基本的輸入框組

下面的例項演示了基本的輸入框組：
例項

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
    </form></div>

結果如下所示：
Bootstrap 支援的一個特性—輸入框組Bootstrap 支援的一個特性—輸入框組

輸入框組的大小

您可以通過向 .input-group 新增相對錶單大小的 class（比如 .input-group-lg、input-group-sm）來改變輸入框組的大小。輸入框中的內容會自動調整大小。

下面的例項演示了這點：

例項

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
        <br>
        <div class="input-group input-group-sm">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
    </form></div>

結果如下所示：
Bootstrap 支援的一個特性—輸入框組Bootstrap 支援的一個特性—輸入框組

核取方塊和單選外掛

您可以把核取方塊和單選外掛作為輸入框組的字首或者字尾元素，如下面的例項所示：

例項

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="radio"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form></div>

結果如下所示：
Bootstrap 支援的一個特性—輸入框組Bootstrap 支援的一個特性—輸入框組

按鈕外掛

您也可以把按鈕作為輸入框組的字首或者字尾元素，這個時候您就不是新增 .input-group-addon class，您需要使用 class .input-group-btn 來包裹按鈕。這是必需的，因為預設的瀏覽器樣式不會被重寫。下面的例項演示了這點：

例項

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form></div>

結果如下所示：
Bootstrap 支援的一個特性—輸入框組Bootstrap 支援的一個特性—輸入框組

帶有下拉選單的按鈕

在輸入框組中新增帶有下拉選單的按鈕，只需要簡單地在一個 .input-group-btn class 中包裹按鈕和下拉選單即可，如下面的例項所示：

例項

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown">下拉選單                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一個功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分離的連結</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown">下拉選單                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一個功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分離的連結</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form></div>

結果如下所示：
Bootstrap 支援的一個特性—輸入框組Bootstrap 支援的一個特性—輸入框組

分割的下拉選單按鈕

在輸入框組中新增帶有下拉選單的分割按鈕，使用與下拉選單按鈕大致相同的樣式，但是對下拉選單新增了主要的功能，如下面的例項所示：

例項

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default" tabindex="-1">下拉選單</button>
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切換下拉選單</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一個功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分離的連結</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default" tabindex="-1">下拉選單</button>
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切換下拉選單</span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一個功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分離的連結</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form></div>

結果如下所示：
Bootstrap 支援的一個特性—輸入框組Bootstrap 支援的一個特性—輸入框組

原文地址： https://www.linuxprobe.com/a-feature-supported.html

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/31559985/viewspace-2673266/，如需轉載，請註明出處，否則將追究法律責任。

相關文章