ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップで入力するアイコンを追加する方法

ブートストラップで入力するアイコンを追加する方法

angryTom
angryTomオリジナル
2019-07-20 13:25:175294ブラウズ

ブートストラップで入力するアイコンを追加する方法

# 推奨チュートリアル:

ブートストラップ チュートリアル

##サンプル コード

<div class="input-group">
    <div class="input-icon-group">
        <input type="text" class="form-control fc-clear" /> 
        <span id="scan" data-role="md" class="md md-center-focus-weak fa-lg input-icon input-icon-md" style="display: inline;"> 
        </span>
    </div>
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button">
            批号        </button>
    </span>
</div>

レンダリング:

ブートストラップで入力するアイコンを追加する方法

解釈:

1. まず、これらを 1 行にします主に機能する

#input-group

、「input-icon-group」、「input-group-btn」属性が含まれます# 2. 入力内のアイコンを入力内に表示させる効果は主に「input-icon input-icon-md」と「

display: inline

」です。 3. 入力ボックスの幅を狭くするのではなく、スペースの行全体を占めるには、「form-control」が機能します。

4. 入力ボックスに文字を入力するとアイコンが隠れなくなりますが、有効なのは「fc-clear」です。

以上がブートストラップで入力するアイコンを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。