この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

Architect_Programmer_Code農業ネットワーク»建築家 › フロントエンド設計とウェブ › フロントエンドフレーム › Bootstrap4を使った要素の表示と隠し方
眺める： 12583|答える： 0

[ブートストラップ] Bootstrap4を使った要素の表示と隠し方

[リンクをコピー]
掲載地 2019/04/04 10:46:25 | | | |
Bootstrap4を使った要素の表示と隠し方

モバイルデバイス開発を高速化するために、レスポンシブディスプレイクラスを使ってデバイスごとに要素を表示・隠すようにしましょう。 同じサイトの全く異なるバージョンを作成するのは避けつつ、画面サイズごとに要素を適切に非表示にしてください。

要素を隠すには、単に.d-全くないクラスか、あるいはそのどちらか.d-{sm,md,lg,xl}-noneクラスで画面の応答的な変更を行ってくれます。

指定された画面サイズ間隔で要素のみを表示するには、1つ設定できます.d-*-なしクラスと1.d-*-*クラスはグループ化されます。例えば、.d-none .d-md-ブロック .d-xl-none画面サイズのあらゆる要素は非表示になりますが、中型および大型デバイスのみ対象となります。

レンダリング：



ブレイクポイントとダウンのために表示/隠れ:

  • hidden-xs-down(hidden-xs)=d-none d-sm-ブロック
  • 隠されたSM-下(隠されたSMの隠されたxs)= d-なし d-md-ブロック
  • hidden-md-down(hidden-md hidden-sm hidden-xs) = d-none d-LG-ブロック
  • 隠し LG-ダウン = d-なし d-XL-ブロック
  • Hidden-XL-Down(N/A、3.x)=D-なし(Hiddenと同じ)


ブレイクポイントや上方は表示/隠す:

  • hidden-xs-up = d-none(隠されていることと同じ)
  • 隠されたSM-UP = D-SM-なし
  • 隠されたMD-UP = d-MD-なし
  • 隠し-LG-UP = d-LG-NONE
  • Hidden-XL-UP(N/A 3.x) = D-XL-なし


単一のブレークポイントのみ表示/非表示:

  • hidden-xs(のみ)= d-なし d-sm-ブロック(hidden-xs-downと同じ)
  • hidden-sm(のみ)= d-ブロック d-sm-none d-md-ブロック
  • 隠されたMD(のみ)= dブロック、d、MD、なし、D、LG、ブロック
  • hidden-LG(のみ)= d-ブロック d-lg-none d-XL-ブロック
  • Hidden-XL(該当なし 3.x) = Dブロック D-XL-NONE
  • 可視 xs (のみ) = d-ブロック d-sm-n。
  • 可視性SM(のみ)= d-なし d-sm-ブロック d-md-none
  • 可視-MD(のみ)= d-なし d-md-ブロック d-lg-none
  • 可視-LG(のみ)=d-なし d-lg-ブロック d-XL-なし
  • Visible-XL(該当なし 3.x) = D-none d-XL-ブロック


視覚化:



参考リンク:https://getbootstrap.com/docs/4.0/utilities/display/





先の：ソフトウェアアーキテクトはどのような資質を持つべきでしょうか?
次に：リスナーに@Autowiredを注入できない

関連記事
免責事項：
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。
Mail To:help@itsvse.com