【入門】Bootstrapの書き方　〜テーブルデザイン〜

みなさんこんにちは さくちゃん です。

本日は、前回学んだテーブルの挿入の続き、「テーブルのデザイン」について書いていきます。
前回の内容をまだ見ていない方はこちらをご覧ください。

では早速やっていきましょう。

Bootstrapの書き方　〜テーブルデザイン〜

背景色の変更

背景色を変更する場合は、<table　class=”table”> に「table-色」を書くだけです！
例えば上の図でいうと

<table　class="table　table-dark">

とするだけで、darkカラーに変更できます。

そのほかの色は、下記の通りです。

• table-primary　→　青
• table-secondary　→　グレー
• table-success　→　緑
• table-danger　→　赤
• table-warning　→　黄色
• table-info　→　水色

テーブルヘッダの色を変更

テーブルヘッダの色を変更する時は、<thead>タグに 「class=”thead-色”」 と書くだけです！
色は、上の図の「dark」「light」の２色になります。

書き方は

<thead class="thead-dark"> //darkカラー

<thead class="thead-light"> // lightカラー

と書きます。

縞模様

行を縞模様にする時は、<table　class=”table”>タグに「table-striped」を書くだけです！

書き方は

<table class="table table-striped">

と書きます。

また、色を指定することもできます。
色を指定する時は、<table class=”table table-striped”>の中に、「table-色」を書くだけです！
例えば「table-dark」と指定すると、下の図のようになります。

書き方は

<table class="table table-striped table-dark">

と書きます。
そのほかの色は、先ほど紹介した背景色の変更をご覧ください。

縁取り

縁取られたテーブルを作成する時は<table　class=”table”>タグに「table-bordered」と書くだけです！

書き方は

<table class="table table-bordered">

と書きます。

縁なし

縁なしのテーブルを作成する時は<table　class=”table”>タグに「table-borderless」と書くだけです！

書き方は

<table class="table table-borderless">

と書きます。

ホバリング

テーブルにマウスが触れたときに、ホバー状態を有効にする場合は、<table　class=”table”>タグに「table-hover」と書くだけです！

書き方は

<table class="table table-hover">

と書きます。
ホバーはよく使われますので覚えておきましょう！

まとめ

本日は以上になります。
次回、「ナビゲーション」を作っていきましょう。