ブートストラップフレームワークを使用したテーブルの作成

一般に、テーブルは、行と列のセットの間の関係を記述します。これは、データを整理して説明するための優れた方法です。

Bootstrapは、コンテンツを非常に迅速に作成するのに役立つCSSフレームワークです。この記事では、Bootstrapをセットアップする方法を確認し、テーブルが必要になる理由を学び、Bootstrapフレームワークを使用して動作しているテーブルの例をいくつか見ていきます。

はじめに

Webページでモーダルを表示できるようにするには、適切な依存関係があることを確認してください。このデモンストレーションでは、Bootstrap、Popper.JS、jQueryは必要ありませんが、Bootstrapを必要とする他のコンポーネントで作業する可能性があるため、とにかく追加することをお勧めします。すべての依存関係を取得するための支援については、Bootstrapのクイックスタートページに移動してください。

必要なパッケージをリンクする方法はあなた次第ですが、最も簡単で初心者に優しい方法は、jQuery、Popper.js、およびBootstrapにコンテンツ配信ネットワーク（CDN）を使用することです。 <script> の順序に注意してくださいタグ–ここで注文が重要です。

テーブルを使用する場合

一度に大量のデータを集約したい場合は、テーブルを使用してください。レスポンシブテーブルを簡単に作成する場合は、ブートストラップテーブルを使用します。 Bootstrapは、テーブルの基本的なHTML構造を使用します。あなたがしなければならないのはあなたのウェブサイトのためにカスタマイズされたレスポンシブテーブルを組み込むために彼らのCSSとあなたのカスタムスタイリングを組み込むことです。

ブートストラップを使用してテーブルを作成する

テーブルは伝統的にHTMLとCSSで構築されています。これにより、画面上のテーブルの基本的な構造とスタイルがわかります。 Bootstrapを使用してレスポンシブデザインを作成し、すぐに使用できるようにして、アプリケーションで実行するアイテムのリストにある優先度の高いアイテムに移動できるようにします。

Bootstrapを使用するときは、テーブルを適切に構成できるように、ドキュメントを手元に用意してください。モーダルやナビゲーションバーとは対照的に、テーブルの違いは、JavaScriptが機能することに必ずしも依存していないため、実際のコンポーネント自体ではなく、コンテンツ機能として扱われることです。 [コンポーネント]メニューではなく、サイドバーの[コンテンツ]メニューにテーブルを作成する方法に関する情報があります。

基本的な構造から始めましょう：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table>
    <thead>
      <tr>
        <th>Bootstrap Table Demo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

上記のマークアップを実行すると、ヘッダーと、飲み物、価格、およびそれらの行番号を説明するいくつかの行を持つ非常に基本的なテーブルが表示されます。ドキュメント全体に対してブートストラップによって確立されたものを除いて、スタイル設定はありません。

テーブルにスタイルを追加するには、.tableを追加するだけです。 <table>へのクラスタグ。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table">
    <thead>
      <tr>
        <th scope="colgroup"> Bootstrap Table Demo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

これにより、テーブルに非常に基本的なスタイリングと応答性が追加されます。ニーズに合わせてスタイリングをカスタマイズする方法を他に見てみましょう。

デフォルトの色を反転

.table-darkを追加します <table>のクラス名のリストにある.tableに加えてタグを付けて、テーブルの基本的な配色を暗い色に変更します。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="colgroup"> Bootstrap Table Demo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

ダークとライトに加えて、基本的なブートストラップカラープロパティを使用して、コンテキストクラス（つまり、table-primary、table-danger、table-successなど）を制御することもできます。

スタイルオプション

本体とは別にテーブルのヘッドの配色を制御したい場合は、.thead-darkを追加することでそれを行うことができます。または.thead-light <thead>へクラス属性。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-danger">
    <thead class="thead-light">
      <th>Bootstrap Table Demo</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

ストライプ

.table-striped を追加します <table> タグを使用して、テーブル内の1行おきの色を調整します。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-striped table-warning">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Stripes</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

境界線

.table-borderedを使用して、各セルのすべての側面に境界線を追加します。.table-borderlessを使用して、各セルのすべての側面からすべての境界線を削除します。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-primary table-bordered">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Borders</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 
 <table class="table table-primary table-borderless">
    <thead class="thead-light">
      <th>Bootstrap Table Demo Without Borders</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

ホバー

.table-<table>のクラス属性にホバーが追加されましたタグは、<tbody>のすべての行を許可しますホバリング可能になります。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-hover table-primary table-bordered">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Hover</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script></body>
 
</html>

レスポンシブテーブル

<table>をカプセル化する <div>を使用クラス名.table-responseを使用して、すべてのブレークポイントでテーブルをレスポンシブにします。これにより、コンテンツがテーブルのサイズによってすべて切り捨てられた場合、基本的にテーブルが水平方向にスクロール可能になります。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-hover table-primary table-bordered">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Hover</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script></body>
 
</html>

結論

BootstrapをHTMLと組み合わせて使用して、テーブルをカスタマイズする方法はたくさんあります。これらの方法を使用してBootstrapテーブルのスタイルを設定したら、独自のカスタマイズ可能なスタイルを使用してみてください。

ブートストラップフレームワークを使用したカルーセルの作成

CSSの位置に関するステップバイステップガイド

ブートストラップテーブルストライプクラス
Bootstrapにテーブルストライプクラスを実装するには、次のコードを実行してみてください。例 <!DOCTYPE html> <html> <head> <title>Bootstrap Table</title> <meta name ="viewport" content = "width = device-width, initial-scale = 1"> &n
CSS3を使用して画像の彩度を調整する
CSS3で画像を飽和させるには、フィルタープロパティの飽和プロパティ値を使用します。例画像の彩度を調整する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> img.demo { filter: saturation(500%); } </style> </head> <body> <h1>Learn Spring Framework</h1> <img src="https://www.tut