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、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

java

Javaでじゃんけんゲームを作ろう。サンプルコードあり!

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされており、Java

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

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

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

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

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

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、4回目の今

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュータへ

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です