Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
相互作用ユーティリティ(Interactions) v4.5.0新設
ユーザーがWebサイトのコンテンツと対話する方法を変更するユーティリティクラス。
テキスト選択(Text selection)
ユーザーがコンテンツを操作するときのコンテンツの選択方法を変更。InternetExplorerとLegacyEdgeは user-select の all 値をサポートしていないため、.user-select-all は両方のブラウザともサポートされていないので注意。
見本
●.user-select-all (user-select: all;)
この段落は、ユーザーがクリックすると全て選択する。
●.user-select-auto (user-select: auto;)
この段落は、デフォルトの選択動作を行う。
●.user-select-none (user-select: none;)
この段落は、ユーザーがクリックしても選択できない。
設定例
<p class="user-select-all">この段落は、ユーザーがクリックすると全て選択する。</p>
<p class="user-select-auto">この段落は、デフォルトの選択動作を行う。</p>
<p class="user-select-none">この段落は、ユーザーがクリックしても選択できない。</p>
【設定】
- 使用したい要素に
.user-select-{all|auto|none}を入れる