メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

相互作用ユーティリティ(Interactions) v4.5.0新設

ユーザーがWebサイトのコンテンツと対話する方法を変更するユーティリティクラス。

テキスト選択(Text selection)

ユーザーがコンテンツを操作するときのコンテンツの選択方法を変更。InternetExplorerとLegacyEdgeは user-selectall 値をサポートしていないため、.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} を入れる