Bootstrap實現(xiàn)基本的輸入框組實例-創(chuàng)新互聯(lián)

這篇文章主要講解了“Bootstrap實現(xiàn)基本的輸入框組實例”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Bootstrap實現(xiàn)基本的輸入框組實例”吧！

成都創(chuàng)新互聯(lián)公司專注于中大型企業(yè)的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計和網(wǎng)站改版、網(wǎng)站營銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計客戶千余家，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運用，我們將一直專注成都品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開發(fā)，在前進(jìn)的路上，與客戶一起成長！

通過向輸入域添加前綴和后綴的內(nèi)容，可以向用戶輸入添加公共的元素。例如，可以添加美元符號，或者在 Twitter 用戶名前添加 @，或者應(yīng)用程序接口所需要的其他公共的元素。

向 .form-control 添加前綴或后綴元素的步驟如下：

把前綴或后綴元素放在一個帶有 class .input-group 的 <div> 中。
接著，在相同的 <div> 內(nèi)，在 class 為 .input-group-addon 的 <span> 內(nèi)放置額外的內(nèi)容。
把該 <span> 放置在 <input> 元素的前面或者后面。

為了保持跨瀏覽器的兼容性，請避免使用 <select> 元素，因為它們在 WebKit 瀏覽器中不能完全渲染出效果。也不要直接向表單組應(yīng)用輸入框組的 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>

結(jié)果如下所示：
Bootstrap實現(xiàn)基本的輸入框組實例

輸入框組的大小

您可以通過向 .input-group 添加相對表單大小的 class（比如 .input-group-lg、input-group-sm）來改變輸入框組的大小。輸入框中的內(nèi)容會自動調(diào)整大小。

下面的實例演示了這點：

實例

<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>

結(jié)果如下所示：
Bootstrap實現(xiàn)基本的輸入框組實例

復(fù)選框和單選插件

您可以把復(fù)選框和單選插件作為輸入框組的前綴或者后綴元素，如下面的實例所示：

實例

<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>

結(jié)果如下所示：
Bootstrap實現(xiàn)基本的輸入框組實例

按鈕插件

您也可以把按鈕作為輸入框組的前綴或者后綴元素，這個時候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 來包裹按鈕。這是必需的，因為默認(rèn)的瀏覽器樣式不會被重寫。下面的實例演示了這點：

實例

<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>

結(jié)果如下所示：
Bootstrap實現(xiàn)基本的輸入框組實例

帶有下拉菜單的按鈕

在輸入框組中添加帶有下拉菜單的按鈕，只需要簡單地在一個 .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>

結(jié)果如下所示：
Bootstrap實現(xiàn)基本的輸入框組實例

分割的下拉菜單按鈕

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

實例

<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>

結(jié)果如下所示：
Bootstrap實現(xiàn)基本的輸入框組實例

感謝各位的閱讀，以上就是“Bootstrap實現(xiàn)基本的輸入框組實例”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Bootstrap實現(xiàn)基本的輸入框組實例這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

本文名稱：Bootstrap實現(xiàn)基本的輸入框組實例-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://www.muchs.cn/article12/djhjdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、關(guān)鍵詞優(yōu)化、電子商務(wù)、定制網(wǎng)站、網(wǎng)站內(nèi)鏈、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容