コンポーネント(components)

Bootstrap4ではボタンやカードなど色々なコンポーネント(パーツ)が用意されています。
今回は、その中でもよく使うコンポーネントをいくつか紹介いたします。

Jumbotron

JumbotronはWebサイトのファーストビューに表示されるような、サイトメッセージなどの重要なコンテンツを掲載します。

例:
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>
結果:(サンプルを開く

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

「.jumbotron」は、左右の余白を含みますが、「.jumbotron .jumbotron-fluid"」を指定すると、余白0の画面100%表示されます。

ボタン

例:
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
結果:

 

ボタンは、<button>タグの代わりに、<a>タグ、<input>タグを使うこともできます。

例:
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
結果:
Link

 

ボタンサイズ


  • .btn-lg : 大きいサイズ
  • .btn-sm : 小さいサイズ
例:
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary btn-sm">Large button</button>
結果:

 

  • .btn-block : 横幅100%のボタン
例:
<button type="button" class="btn btn-primary btn-block">Large button</button>
結果:

 

ボタンの状態


  • .active : アクティブなときにボタンが押されたように見せます
  • .disabled : ボタンの無効状態

 

Methods


  • $().button('toggle'):Activeなどの状態を切り替えます。
  • $().button('dispose'):要素を破棄します。
例:
<button href="#" class="btn btn-primary" id="methods-test">Toogle</button>
<button href="#" class="btn btn-primary" id="methods-test2" role="button" data-toggle="buttons">Dispose</button>
<script>
// ActiveをToggleする
$("#methods-test").click(function(){
  $(this).button('toggle');
});

// data-toggleを削除
$("#methods-test2").click(function(){
  $(this).button('dispose').removeAttr('data-toggle');
});
</script>
結果:

パンくずリスト

現在のページが、どの階層に位置するかを示します。

例:
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
結果:

 

セパレータの変更


セパレータを変更するにはCSSでスタイルを上書きするか、SCSSを修正することで変更できます。
SCSSは、_variables.scss の $breadcrumb-dividerを変更ください。

CSS:
<style>
.breadcrumb-item+.breadcrumb-item::before {
  /* 記号 */  
  content: ">";
  /* SVGアイコン */
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
  /* なし */  
  content: "";
}
</style>

 

今回紹介したコンポーネント以外にも様々なコンポーネントが用意されています。
基本コピー&ペーストで使えますので、ご自身で確認ください。
https://getbootstrap.com/docs/4.1/components/alerts/



コンテンツをシェア


このエントリーをはてなブックマークに追加