1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。
今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。

このシリーズの、前回の記事はこちらです。
Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

2回目の今回は、基本とアラートの使い方です。

目次
  1. Bootstrap の基本
  2. アラート ( alert )
  3. まとめ

Bootstrap の基本

まずは基本の解説です。

大まかな機能

大まかな機能として、レイアウト、コンテンツ、コンポーネント、ユーティリティなどがあります。
まずはその紹介です。

コンテンツ ( Content ) <h1>や、<a>など、固有のタグにスタイルをあてる
レイアウト ( Layout ) ページ全体を中央寄せ、幅を指定して並べるなど、レイアウトを整える
コンポーネント ( Components ) アラートやボタンなど、サイトの部品を作る
ユーティリティ ( Utilities ) 境界線や色、位置やサイズなどを指定する
その他 アイコンなど

命名

Bootstrap では、クラス名の付け方が統一されています。
例外もありますが、大抵の場合、ベースとなるクラスがあり、そこに特徴や状態を表すクラスを追加することで、見た目を変更することができます。

特徴を表すクラスとして、以下の名前が使われることが多いです。

primary 主要な
secondary さほど重要でない
success 成功
danger 危険
warning 警告
info お知らせ
light 明るい
dark 暗い

例:

<div class="alert alert-primary" role="alert">primary</div>

アラート ( alert )

コンポーネントの最初に、アラートを使ってみましょう。

基本

基本は、alert クラスの後に、使用したい色のクラスを追加することで、作りことができます。

<div class="alert alert-primary" role="alert">primary</div>
<div class="alert alert-secondary" role="alert">secondary</div>
<div class="alert alert-success" role="alert">success</div>
<div class="alert alert-danger" role="alert">danger</div>
<div class="alert alert-warning" role="alert">warning</div>
<div class="alert alert-info" role="alert">info</div>
<div class="alert alert-light" role="alert">light</div>
<div class="alert alert-dark" role="alert">dark</div>

リンク

alert クラスの中に、リンクを入れたい場合、alert-link クラスを使うと、そのアラートにマッチした文字色になります。

<div class="alert alert-primary" role="alert">primary 詳しくは<a href="#" class="alert-link">こちら</a>をご覧ください</div>
    <div class="alert alert-secondary" role="alert">secondary 詳しくは<a href="#" class="alert-link">こちら</a>をご覧ください</div>
    <div class="alert alert-success" role="alert">success 詳しくは<a href="#" class="alert-link">こちら</a>をご覧ください</div>
    <div class="alert alert-danger" role="alert">danger 詳しくは<a href="#" class="alert-link">こちら</a>をご覧ください</div>
    <div class="alert alert-warning" role="alert">warning 詳しくは<a href="#" class="alert-link">こちら</a>をご覧ください</div>
    <div class="alert alert-info" role="alert">info 詳しくは<a href="#" class="alert-link">こちら</a>をご覧ください</div>
    <div class="alert alert-light" role="alert">light 詳しくは<a href="#" class="alert-link">こちら</a>をご覧ください</div>
    <div class="alert alert-dark" role="alert">dark 詳しくは<a href="#" class="alert-link">こちら</a>をご覧ください</div>

まとめ

以上、今回は Bootstrap 4 の基本と、 Alert の使い方について、紹介しました。
次回は、他の機能も紹介していきます。

この企画の一覧はこちら

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. 【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短く

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

リセットCSS は何を使う? 2019年ランキング5選とその他3選紹介

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

コメントをどうぞ!

メールアドレスが公開されることはありません。