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

スポンサードリンク

関連コンテンツ

オススメ記事

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

java

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

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

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

今月の残り日数を計算するべ!

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

さて、小学生からのJavaScript《ジャバスクリプト》入門、第2回目のはじまりです。今回は、JavaScriptでの演算(えんざん)の方法を学び、今月の残《のこ》り日数を計算してみましょう。

【Git】リモートリポジトリへPushする方法

こんにちは、@It_is_Rです。 前回「【Git】ブランチを使って履歴を分岐させる方法」では、ブランチを使うことの便利さを学びました。第五回目の今回は、GitHubのリモートリポジトリを作成

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの最強カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

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

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