Bootstrap3の基本的な使い方｜Button・Table・color・Navbar
- システム
エンジニア - Webアプリケーションを作成するのにBootstrapを使ってみようと思うのですが、基本的な使い方を教えていただけますか。
- プロジェクト
マネージャー - わかりました。Bootstrap3のButton、Table、collor、Navbarについてご説明しましょう。
Bootstrap3の基本的な使い方を紹介します！
今回は、Bootstrap3の基本的な使い方を紹介します。
ここでは、
・Button
・Table
・Color
・Navbar
について紹介します。
Bootstrap3に興味のある方はぜひご覧ください。
Button
Bootstrap3でのButtonの使い方を紹介します。ここではcdnを利用します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!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>
|
実行結果は以下のようになります。
See the Pen
Bootstrap3_1 by kskumd (@kskumd)
on CodePen.
Table
Bootstrap3でのTableの使い方を紹介します。
|
1
2
3
4
5
6
7
8
9
10
|
<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>
|
実行結果は以下のようになります。
See the Pen
Bootstrap3_2 by kskumd (@kskumd)
on CodePen.
Color
Bootstrap3でのColorの使い方を紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<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>
|
実行結果は以下のようになります。
See the Pen
Bootstrap3_3 by kskumd (@kskumd)
on CodePen.
Navbar
Bootstrap3でのNavbarの使い方を紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<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>
|
実行結果は以下のようになります。
See the Pen
Bootstrap3_4 by kskumd (@kskumd)
on CodePen.
- システム
エンジニア - なるほど、これなら私にもできそうです。
- プロジェクト
マネージャー - 難しくありませんので、ぜひご自身でソースコードを書いてみてください。
まとめ
いかがでしたでしょうか。Bootstrap3の基本的な使い方を紹介しました。現在、Bootstrapは5 alphaまでリリースされています。Bootstrap4やBootstrap5なども調べてみてください。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
Bootstrap4を使ってWebページにタブを実装する方法
ここでは、Bootstrap4を使ってWebページにタブを実装する方法を紹介していきます。Bootstrap4では、より少ないコード量で使いやすいタブを作成することができます。ぜひ参考にしてみてください。 前提 ここでは […]
-
Bootstrap4のおすすめアイコンと使い方の紹介
リンク先へ飛ぶ際の矢印アイコンやSNSアイコンなど、「Webページの中でいろいろなアイコンを使いたい！」と思う方もいるでしょう。そこで今回は、Bootstrap4のおすすめアイコンツールと使い方を紹介していきます。ぜひ、 […]
-
Bootstrapの余白を解説。マージンとパディングの違いとは？
サイトデザインを行うと必ず目にする「マージン」と「パディング」。どちらも余白を指定するときのプロパティですが、「とりあえず書いたら整った！」と理由なく使っている方も多いのではないでしょうか。今回は、マージンとパディングの […]
-
Bootstrapにおけるborderの使い方とは？borderの色・追加・削除・丸み
Bootstrapにおけるborderの使い方とは？ 今回は、Bootstrapにおけるborderの使い方について説明します。borderとは枠線のことです。 枠線に色を付けたり、特定の部分だけ枠線を付けたり、特定の部 […]
-
CSSを使ったBootstrapのカスタマイズ方法とは？基本的な使い方についても解説
CSSを使ったBootstrapのカスタマイズ方法とは？ 今回は、CSSを使ったBootstrapのカスタマイズ方法について説明します。 Bootstrapはわざわざカスタマイズしなくても素晴らしいWebページを作ること […]
