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によるボタンの作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

マップ上をキャラが移動できるようにしよう!

小学生からのJavaScript。マップでキャラを動かせるようにしよう!

小学生からのプログラミング講座(こうざ)、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介(しょうかい)しました。 しかし、まだマップを配置(はいち)しただけで、キャラクタ

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

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

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

Homebrew

Homebrewの使い方。よく使うコマンド一覧と詳しい解説まとめ

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

文字を一文字ずつ表示してみよう!

小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それを

VCCW

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

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

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

コメントをどうぞ!

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