web-dev-qa-db-ja.com

bootstrap 4スタイルの選択

bootstrap 4.で入力としてドロップダウン/選択を表示したいのですが、これまでのところ、ドキュメントで見つかった唯一の選択物は this です。 bootstrapのように見えず、アイコン、グループ化の仕切りなどをサポートしていません。ブートストラップからのドロップダウンの機能を使用して、selectを適合させる方法はありますか？

このようなものですが、並べ替えのフォーム入力としてのみ：

<div class="btn-group">
    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
        Large button
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

誰かがアイデアを持っていますか？

twitter-bootstrapbootstrap-4twitter-bootstrap-4
8
Jan Oechsler

select要素をスタイル/フォーマットする機能は、Bootstrapだけでなく、一般に制限されています。そのため、jQueryを使用して既存の選択要素を「スタイルし、標準の選択要素に追加の機能を提供する」ようにjQueryを使用する https://github.com/silviomoreto/bootstrap-select などのサードパーティのプラグインがあります。 。

いくつかの単純なjQueryを追加して、Bootstrapドロップダウンをselect要素のように動作させることもできます： http://www.codeply.com/go/ganazCDXB5

2018年更新-Bootstap 4.0.0（安定版）

選択としてのドロップダウン： https://www.codeply.com/go/8bAECfv46k

SelectPickerプラグイン ： https://www.codeply.com/go/zpZOlpB4GS

Multiselectプラグイン ： https://www.codeply.com/go/UeqqALYwsT

6
Zim

Bootstrap 4を使用している場合、bootstrap 4は選択検索ボックスを削除することに注意してください。これで、bootstrap-selectのヘルプでこの機能を追加できます。 .min.cssファイル。リンクは下にあります

まず、次のcssおよびjavascriptファイルを追加します。

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

その後、選択ボックスに次のコードを追加します

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

今、あなたはJavaScriptコードを追加する必要があります

<script>
$('.selectpicker').selectpicker();
</script>
0
Sumit Kumar Gupta