BootStrap 5(BS 5)2の学習

37410 ワード
テキストリンク
起動バーはdepolフォントサイズ1 rem(16 px)、線の高さ1.5です.
また,

はmarging-topを0,marging-bottomを1 rem(16 px)とする.
スタートアップバーには、HTMLのように~を書き込むことができます.

<div class="container mt-3">
  <p>The font-size of each Bootstrap heading depends on the screen size. Try to resize the browser window to see the effect.</p>
  <h1>h1 Bootstrap heading</h1>
  <h2>h2 Bootstrap heading</h2>
  <h3>h3 Bootstrap heading</h3>
  <h4>h4 Bootstrap heading</h4>
  <h5>h5 Bootstrap heading</h5>
  <h6>h6 Bootstrap heading</h6>
</div>
また、クラスでは次のことも使用できます.
<div class="container mt-3">
  <p class="h1">h1 Bootstrap heading</p>
  <p class="h2">h2 Bootstrap heading</p>
  <p class="h3">h3 Bootstrap heading</p>
  <p class="h4">h4 Bootstrap heading</p>
  <p class="h5">h5 Bootstrap heading</p>
  <p class="h6">h6 Bootstrap heading</p>
</div>
表示タイトルは、一般的なタイトルよりも目立つ(より大きなフォントサイズとより明るい感じ)タイトルです.
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
  <h1 class="display-5">Display 5</h1>
  <h1 class="display-6">Display 6</h1>
ブートストラップ5では、HTML要素(およびクラス)は、タイトル内のより小さな補助テキストに使用される.
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
これにより、~headingより少し小さい文字でsecondary textが出力されます.
ガイドバーでは、を使用してハイライト表示できます.
<div class="container mt-3">
  <h1>Highlight Text</h1>    
  <p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p>
</div>
Boot StreetはHTML要素の下にプレースホルダborderを提供し、サスペンション時に疑問符タグを表示する機能をサポートします.
<div class="container mt-3">
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
以上のように、マウスがWHO文字を指すとabbrtitleというテキストボックスの一部が表示されます.
参照ブロックでは、
を使用できます.
<blockquote class="blockquote">
    <p>Fori ~~~ bally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
ディスククラックリストの使用には、HTMLなどの
を使用できます.
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
codeを表示する場合は、以下のようにを使用できます.
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
下の図に示すように、を使用してブラックボックスフォーマットを生成します.
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
テキストの色を強調することで、次のように使用できます.
<div class="container mt-3">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-body">Default body color (often black).</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
</div>

テキストに不透明度を与えるには:
<p class="text-black-50">Black text with 50% opacity on white background</p>
  <p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
テキストの背景色は次のとおりです.
<div class="container mt-3">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide "meaning through colors".</p>
  <p>Note that you can also add a .text-* class if you want a different text color:</p>
  <p class="bg-primary text-white">This text is important.</p>
  <p class="bg-success text-white">This text indicates success.</p>
  <p class="bg-info text-white">This text represents some information.</p>
  <p class="bg-warning text-white">This text represents a warning.</p>
  <p class="bg-danger text-white">This text represents danger.</p>
  <p class="bg-secondary text-white">Secondary background color.</p>
  <p class="bg-dark text-white">Dark grey background color.</p>
  <p class="bg-light text-dark">Light grey background color.</p>
</div>
Struts 2 Conventionプラグインの使用(2)returnビューおよびjspの関係
Mapを巡る<br>>