注目の記事 PICK UP!

Bootstrap簡単入門

sns2

Bootstrapのダウンロード

最初の課題はホームページを呼び出したら、まずウィンドウが開いて閉じることで、見たいページを見るというワンクッションを置いた例です。
BootstrapはスマートフォンやPCでもうまくレイアウトさせるリスポンシブデザインのフレームワークです。
ここでは最終的にボタンを自動的に押させる命令をいれてますが、全体を部品として考えると楽にとらえられます。
またボタンを消す命令はこの先で学習しますが利用しています。
作成例を最初に表示してみましょう。

作成例サンプルへのリンク ←

http://getbootstrap.com/getting-started/から左下のBootstrapをダウンロードしましょう

bootstrap

デスクトップ上に解凍すると次のファイルが生成しています。

bootstrap2

Branketのダウンロード

http://brackets.io/よりダウンロード、真ん中の青い印をクリックしましょう

bootstrap3

bootstrap4

課題(1)

Branketsの「ファイル」→「新規作成」から次のコードを入れてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

実はBootstrapで利用するのは赤色に記載しているところです。
それ以外は呪文と思いましょう。
この部分に部品を入れるだけで様々なことが出来上がります。

記入したら「ファイル」→「名前を付けて保存」に入り、Bootstrapのフォルダーにredai.htmlという名前で保存してみましょう。
open

Branketの「ライブビュー」をクリックします。

helllow

課題2

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –>
<title>Bootstrap 101 Template</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

</head>
<body>

<h1>Hello, world!</h1>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<!– Button trigger modal –>

<button type=”button” class=”btn btn-primary btn-lg” data-toggle=”modal” data-target=”#myModal” >
Launch demo modal
</button>
<!– Modal –>
<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true” >&times;</span></button>
<h4 class=”modal-title” id=”myModalLabel”>Modal title</h4>
</div>
<div class=”modal-body”>

</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary”>Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>

redai2.htmlで保存してみましょう。
赤が呪文で青の部分が文字として変更できる箇所です。

Bootstrapに関してはひとつひとつの部品の理解と、レイアウトの基本をマスターすることが大切です。
ひとつひとつを部品としてとらえると簡単に理解が出来ます。
ここでもっとも大切なことは出現したウィンドウサイズを左右に拡大・縮小すると画面が自動的にカスタマイズされます。

responsiv01

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –>
<title>Bootstrap 101 Template</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<script>
function btnstr()
{
document.getElementById(‘btn’).click();
}
</script>
</head>
<body onLoad=”btnstr()”>

<h1>Hello, world!</h1>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<!– Button trigger modal –>
<form>
<button type=”button” id=”btn” class=”btn btn-primary btn-lg” data-toggle=”modal” data-target=”#myModal” >
Launch demo modal
</button>
</form>
<!– Modal –>
<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true” >&times;</span></button>
<h4 class=”modal-title” id=”myModalLabel”>Modal title</h4>
</div>
<div class=”modal-body”>

</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary”>Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>

赤色部にありますように少し改良するとかなりメジャーで利用されているサイトのようにまとめられます。
これを一つの部品・呪文と理解して利用することが大切です。

制作例リンク

<form>
<button type=”button” id=”btn” class=”btn btn-primary btn-lg hidden-xs hidden-sm hidden-md hidden-lg” data-toggle=”modal” data-target=”#myModal” >
</button>
</form>

ボタンの内容を消して赤印の箇所を加えるとメチャかっこよくなります。
赤印の意味はスマホ、タブレット、PCで表示させないという意味です。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. 26fde19616bb4dcf6b2a523162f7428c_m

    bootstrap Bootstrap簡単入門(4)

  2. aku02

    bootstrap Bootstrap簡単入門(3)

  3. bootstrap5

    bootstrap Bootstrap簡単入門(2)


周南市のホームページ制作会社ウィルコムはあなたのサービスを的確なターゲットに誘導させます

魅力的な動画を制作します
これからのWEB制作はこのサービスを提案します

オリジナルの楽曲を制作します
現在は無料ダウンロード実施中です
>

ホームページ制作現場から「ぶっちゃけシリーズ開始」

お気軽にお問合せ下さい
おおよその金額がわかると思います

ワードプレスのテンプレートを紹介しています
クールなホームページデザインをご一緒に見てみましょう

こんな感じの画面でホームページを制作しています

どんな戦略でどんな会社がどのように闘ってきたか
成功したか破滅したかそんなお話をします

アンドロイドマーケットでは4万件以上ダウンロードされてます

アンドロイドのレッスン場です
その後はベクトルを学習してみてください
PAGE TOP