ナビゲーションバー

Bootstrap4

2020/3/17

Bootstrap4でプログレスバー(Progress)の作り方

Bootstrap4でプログレスバー(Progress)を作成する方法 Bootstrap4の機能であるProgress(プログレスバー)の使い方を紹介します。 スポンサーリンク プログレスバー(Progress)の画面イメージ プログレスバー(Progress)の画面イメージは次の通りです。 プログレスバー(Progress)のHTML <!doctype html> <html lang="ja"> <head> <!-- Required meta tags ...

2020/3/15

Bootstrap4でツールチップ(Tooltips)を作成する方法

Bootstrap4でツールチップ(Tooltips)を作成する方法 スポンサーリンク popper.min.jsのダウンロード ツールチップを使うには「popper.min.js」が必要です。 ■ CDNで指定 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTM ...

2020/3/14

popper.min.jsをダウンロードする方法

popper.min.jsをダウンロードする方法 Bootstrap4でツールチップ(Tooltips)を使うには「popper.min.js」が必要です。「popper.min.js」を使うにはCDNで指定するか、 「popper.min.js」をダウンロードして使用するかのどちらかです。 ■ CDNで指定 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrit ...

2020/3/13

Bootstrap4でモーダル(Modal)画面を作成する方法

Bootstrap4でモーダル(Modal)表示を作成する方法 スポンサーリンク モーダル(Modal)画面イメージ モーダル(Modal)画面のHTML <!-- 切り替えボタンの設定 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> モーダルを表示 </button> <!-- モーダルの設定 --> &lt ...

チェックボックス

2020/2/19

Bootstrapでチェックボックスを作成する方法

Bootstrapでチェックボックス(checkbox)を作成する方法 スポンサーリンク 縦並びのチェックボックス <div class="form-check"> <input class="form-check-input" type="checkbox" id="check1" checked> <label class="form-check-label" for="check1">Java</label> </div> 縦並びチェックボ ...

入力

2020/2/19

Bootstrapで入力フォーム(input)を作成する方法

Bootstrapで入力フォームを作成する方法 スポンサーリンク テキストボックス <input type="text" id="text" class="form-control"> テキストボックスは typeにtext、classに.form-control を指定することで作成することができます。 ■ HTML表示イメージ   ■ HTMLサンプル <div class="form-group"> <label for="text">名前:</l ...

レスポンシブ

2020/2/13

Bootstrapでレスポンシブな画像を作成する

Bootstrapでレスポンシブな画像を作成する方法 レスポンシブとはPC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることです。 HTMLの「img」タグにBootstrapで用意してある.img-fluidを指定することでレスポンシブな画像を作成することができます。 スポンサーリンク レスポンシブ設定なし ※.img-fluid設定なし <img src="blueberries-2278921_640.jpg"> レ ...

ツリー構造

2020/2/11

Bootstrapで簡単にパンくずリストを作成する

Bootstrapでパンくずリストの作り方 スポンサーリンク [手順1] パンくずリストのエリアを作る まず、パンくずリストを表示させたい場所に<nav aria-label="breadcrumb">タグを追加します。 <nav aria-label="breadcrumb"> </nav> [手順2] パンくずリストの中身を作る 次にパンくずリストの中身を追加してきます。 パンくずリストの中身は「ul」もしくは「ol」タグで作成し、「ul」もしくは「ol」タグには. ...

ナビゲーションバー

2020/2/11

Bootstrapでナビゲーションバーを作成する方法

Bootstrapでナビゲーションバーを作成する方法 ナビゲーションバーの設置 <nav class="navbar navbar-dark bg-info"> ナビゲーションバーは「nav」タグに.navbarを指定することで作成することができます。 そして、ナビゲーションバーの文字色と背景色を指定します。 背景が黒系の場合は .navbar-dark 白系の場合は .navbar-light スポンサーリンク   背景色は次のスタイルが用意されているので、お好みの色を選択します。 ...

【入門】Bootstrapでtableを作成する方法

2020/2/11

Bootstrapで簡単にtableを作成する

Bootstrapでtableを作成する方法 基本テーブル 設定方法 <table class="table"> .tableクラスを指定すると、Bootstrapの基本テーブルが表示されます。 [HTMLイメージ] [HTMLサンプル] <table class="table"> <thead> <tr><th>#</th><th>名前</th><th>年齢</th></tr&g ...

Copyright© ITを分かりやすく解説 , 2020 All Rights Reserved.