投稿者: pugiemonn

Bootstrap（ブートストラップ） は世界中で使われている Web 制作のライブラリです。
Bootstrap · The most popular HTML, CSS, and JS library in the world.

制作に便利な Bootstrap ライブラリですが、ウェブ上のテキストやコンテンツをちょっとおしゃれに見せるのに使えるクラスが多く含まれています。

装飾につかえる部品

Bootstrap の中でも装飾にすぐ使える HTML 部品をご紹介します。

• アラート
• カード

アラート

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

アラートの表示例

カード

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

カードの表示例

pugiemonn

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。