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

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

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

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

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

ブログSEOに絶対的効果!人を惹きつける記事タイトルの考え方のコツ

ブログのSEO対策において、もっとも重要なのは記事の内容、そしてタイトルです。 情報を探している人はまずタイトルを見ます。つまりタイトルによって人がその記事をクリックするかどうかが決まります。

WordPress テーマ自作 | サイト全体のレイアウトを整える。

水を飲む時、口に入れすぎてしまう@It_is_Rです。 WordPressテーマ自作シリーズ第11回目です。 今回は、サイト全体のレイアウトを整えてみましょう。 このシリーズの前回の記事

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

bootstrap3

Bootstrap3でサイト制作するための、準備と初期設定。

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうです。@It_is_Rです。 さて、今回はBootstrap3によるサイト制作の入門講座です。 このBoo

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

コメントをどうぞ!

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




オリジナルゲーム.com