Sizing - Bootstrap 4.1 日本語リファレンス

Trang chủ » W-100 Bootstrap Class » Sizing - Bootstrap 4.1 日本語リファレンス

Có thể bạn quan tâm

Skip to main content Bootstrapの新しいバージョンがあります。 Menu Bootstrap 入門
  • はじめに
  • ダウンロード
  • ファイル構成
  • ブラウザとデバイス
  • JavaScript
  • テーマ
  • ビルドツール
  • Webpack
  • アクセシビリティ
レイアウト
  • 概要
  • グリッド
  • メディアオブジェクト
  • レイアウト用ユーティリティ
コンテンツ
  • リブート
  • タイポグラフィ
  • コード
  • 画像
  • テーブル
  • 図形
コンポーネント
  • Alerts
  • Badge
  • Breadcrumb
  • Buttons
  • Button group
  • Card
  • Carousel
  • Collapse
  • Dropdowns
  • Forms
  • Input group
  • Jumbotron
  • List group
  • Modal
  • Navs
  • Navbar
  • Pagination
  • Popovers
  • Progress
  • Scrollspy
  • Tooltips
ユーティリティ
  • Borders
  • Clearfix
  • Close icon
  • Colors
  • Display
  • Embed
  • Flex
  • Float
  • Image replacement
  • Position
  • Screenreaders
  • Shadows
  • Sizing
  • Spacing
  • Text
  • Vertical align
  • Visibility
オプション
  • アプローチ
  • アイコン
マイグレーション Bootstrap について
  • 概要
  • ブランド
  • ライセンス
  • 多言語サイト
Sizing

簡単に幅や高さの調節ができます。

幅と高さは _variables.scss の $sizes Sassマップから生成されます。デフォルトでは, 25%, 50%, 75%, 100%が組み込まれています。

Width 25% Width 50% Width 75% Width 100% Width auto
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div> <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div> <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div> <div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
Height 25% Height 50% Height 75% Height 100% Height auto
<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div> <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div> <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div> <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div> <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div> </div>

max-width: 100%; と max-height：100%; も使用できます。

Max-width 100%
<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
Max-height 100%
<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div> </div>

Từ khóa » W-100 Bootstrap Class