Bootstrap3の基本的な使い方｜Button・Table・color・Navbar

Bootstrap

HTML・CSS

公開日時: 2021-10-08 　更新日時: 2022-06-01

Bootstrap3の基本的な使い方｜Button・Table・color・Navbar

この記事でわかること

最新情報や関心のある情報を毎日お届け。 FEnetメールマガジンメルマガ登録はこちらから>>

システム エンジニア: Webアプリケーションを作成するのにBootstrapを使ってみようと思うのですが、基本的な使い方を教えていただけますか。

プロジェクト マネージャー: わかりました。Bootstrap3のButton、Table、collor、Navbarについてご説明しましょう。

Bootstrap3の基本的な使い方を紹介します！

今回は、Bootstrap3の基本的な使い方を紹介します。
ここでは、
・Button
・Table
・Color
・Navbar
について紹介します。

Bootstrap3に興味のある方はぜひご覧ください。

Button

Bootstrap3でのButtonの使い方を紹介します。ここではcdnを利用します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap3</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- bootstrap-theme.min.css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
  <body>
    <h1>Bootstrap3 button</h1>
    <div>
      <!-- ボタンの種類 -->
      <button class="btn btn-default">Default Button</button>
      <button class="btn btn-primary">Primary Button</button>
      <button class="btn btn-success">Success Button</button>
      <button class="btn btn-info">Info Button</button>
      <button class="btn btn-warning">Warning Button</button> 
      <button class="btn btn-danger">Danger Button</button>
      <button class="btn btn-link">Link Button</button>
    </div>

    <div><br>
      <!-- ボタンのサイズ -->
      <button class="btn btn-default btn-lg">Large Button</button>
      <button class="btn btn-default">Normal Button</button>
      <button class="btn btn-default btn-sm">Small Button</button>
      <button class="btn btn-default btn-xs">Extra Small Button</button>
    </div>

    <!-- jquery.min.js -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- bootstrap.min.js -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap3</title>

</head>

<body>

<h1>Bootstrap3 button</h1>

<div>

<button class="btn btn-default">Default Button</button>

<button class="btn btn-primary">Primary Button</button>

<button class="btn btn-success">Success Button</button>

<button class="btn btn-info">Info Button</button>

<button class="btn btn-warning">Warning Button</button>

<button class="btn btn-danger">Danger Button</button>

<button class="btn btn-link">Link Button</button>

</div>

<button class="btn btn-default btn-lg">Large Button</button>

<button class="btn btn-default">Normal Button</button>

<button class="btn btn-default btn-sm">Small Button</button>

<button class="btn btn-default btn-xs">Extra Small Button</button>

</div>

</body>

</html>

実行結果は以下のようになります。

See the Pen
Bootstrap3_1 by kskumd (@kskumd)
on CodePen.

Table

Bootstrap3でのTableの使い方を紹介します。

    <h1>Bootstrap3 table</h1>
    <div>
      <!-- ストライプテーブル + ホバーテーブル -->
      <table class="table table-striped table-hover">
        <tr><th>Name</th><th>Age</th><th>Email</th></tr>
        <tr><td>Ichiro</td><td>20</td><td>ichiro@gmail.com</td></tr>
        <tr><td>Jiro</td><td>25</td><td>jiro@gmail.com</td></tr>
        <tr><td>Saburo</td><td>30</td><td>saburo@gmail.com</td></tr>
      </table>
    </div>

<h1>Bootstrap3 table</h1>

<div>

<tr><th>Name</th><th>Age</th><th>Email</th></tr>

<tr><td>Ichiro</td><td>20</td><td>ichiro@gmail.com</td></tr>

<tr><td>Jiro</td><td>25</td><td>jiro@gmail.com</td></tr>

<tr><td>Saburo</td><td>30</td><td>saburo@gmail.com</td></tr>

</table>

</div>

実行結果は以下のようになります。

See the Pen
Bootstrap3_2 by kskumd (@kskumd)
on CodePen.

Color

Bootstrap3でのColorの使い方を紹介します。

    <h1>Bootstrap3 color</h1>
    <div>
      <!-- text color -->
      <p class="text-muted">text-muted</p>
      <p class="text-primary">text-primary</p>
      <p class="text-success">text-success</p>
      <p class="text-info">text-info</p>
      <p class="text-warning">text-warning</p>
      <p class="text-danger">text-danger</p>
    </div>

    <div>
      <!-- bg color -->
      <p class="bg-primary">bg-primary</p>
      <p class="bg-success">bg-success</p>
      <p class="bg-info">bg-info</p>
      <p class="bg-warning">bg-warning</p>
      <p class="bg-danger">bg-danger</p>
    </div>

<h1>Bootstrap3 color</h1>

<div>

<p class="text-muted">text-muted</p>

<p class="text-primary">text-primary</p>

<p class="text-success">text-success</p>

<p class="text-warning">text-warning</p>

<p class="text-danger">text-danger</p>

</div>

<div>

<p class="bg-primary">bg-primary</p>

<p class="bg-success">bg-success</p>

<p class="bg-warning">bg-warning</p>

<p class="bg-danger">bg-danger</p>

</div>

実行結果は以下のようになります。

See the Pen
Bootstrap3_3 by kskumd (@kskumd)
on CodePen.

Navbar

Bootstrap3でのNavbarの使い方を紹介します。

    <h1>Bootstrap3 navbar</h1>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Bootstrap3">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    ホーム
                </a>
            </div>
            
            <div class="collapse navbar-collapse" id="Bootstrap3">
                <ul class="nav navbar-nav">
                    <li><a href="#">Menu1</a></li>
                    <li><a href="#">Menu2</a></li>
                    <li class="active"><a href="#">Menu3</a></li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="keyword">
                    </div>
                    <button type="submit" class="btn btn-default">Search</button>
                </form>
            </div>
        </div>
    </nav>

<h1>Bootstrap3 navbar</h1>

<span class="sr-only">Toggle navigation</span>

</button>

ホーム

</a>

</div>

</ul>

</div>

<button type="submit" class="btn btn-default">Search</button>

</form>

</div>

</nav>

実行結果は以下のようになります。

See the Pen
Bootstrap3_4 by kskumd (@kskumd)
on CodePen.

システム エンジニア: なるほど、これなら私にもできそうです。

プロジェクト マネージャー: 難しくありませんので、ぜひご自身でソースコードを書いてみてください。

まとめ

いかがでしたでしょうか。Bootstrap3の基本的な使い方を紹介しました。現在、Bootstrapは5 alphaまでリリースされています。Bootstrap4やBootstrap5なども調べてみてください。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

Bootstrap3の基本的な使い方｜Button・Table・color・Navbar

Bootstrap3の基本的な使い方を紹介します！

Button

Table

Color

Navbar

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

Bootstrap3の基本的な使い方｜Button・Table・color・Navbar

Bootstrap3の基本的な使い方を紹介します！

Button

Table

Color

Navbar

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

Bootstrap4を使ってWebページにタブを実装する方法

Bootstrap4のおすすめアイコンと使い方の紹介

Bootstrapの余白を解説。マージンとパディングの違いとは？

Bootstrapにおけるborderの使い方とは？borderの色・追加・削除・丸み

CSSを使ったBootstrapのカスタマイズ方法とは？基本的な使い方についても解説