注目の記事 PICK UP!

bootstrap Bootstrap簡単入門(2)

bootstrap5

次はFixMenuの部品を入れてみよう
スライダーの部品も入れてみます。

制作例はコチラです

PCの方はウインドウズのサイズをドラッグで変化させてみてください。
それぞれが独立した仕組みと考えたら修正する箇所を見つけるだけになります。
PCで表示した場合とスマホで表示した場合です。

前回はコチラです。

Branketに次のソースをそのままコピーしてアクティブビューを押してみましょう。

reidai3.htmlで保存します。
赤の部分がまるごと部品と考えたら楽ですね。

 

<!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=”js/html5shiv.min.js”></script>
<script src=”js/respond.min.js”></script>
<![endif]–>
</head>
<body>
<!– Fixed navbar –>
<nav class=”navbar navbar-default navbar-fixed-top”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#navbar” aria-expanded=”false” aria-controls=”navbar”>
<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=”#”>Project name</a>
</div>
<div id=”navbar” class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>
<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Dropdown <span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action</a></li>
<li><a href=”#”>Another action</a></li>
<li><a href=”#”>Something else here</a></li>
<li role=”separator” class=”divider”></li>
<li class=”dropdown-header”>Nav header</li>
<li><a href=”#”>Separated link</a></li>
<li><a href=”#”>One more separated link</a></li>
</ul>
</li>
</ul>
<ul class=”nav navbar-nav navbar-right”>
<li><a href=”../navbar/”>Default</a></li>
<li><a href=”../navbar-static-top/”>Static top</a></li>
<li class=”active”><a href=”./”>Fixed top <span class=”sr-only”>(current)</span></a></li>
</ul>
</div><!–/.nav-collapse –>
</div>
</nav>
<!– 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>

続けてスライダーの部品のソースです。画像は1900ピクセル☓400~600ピクセルの画像を用意しました。図中の青い部分。

<!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=”js/html5shiv.min.js”></script>
<script src=”js/respond.min.js”></script>
<![endif]–>
</head>
<body>
<!– Fixed navbar –>
<nav class=”navbar navbar-default navbar-fixed-top”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#navbar” aria-expanded=”false” aria-controls=”navbar”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>

</button>
</div>
<div id=”navbar” class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>HOME</a></li>
<li><a href=”htt://www.excite.co.jp”>Excite</a></li>
<li><a href=”http://www.rakuten.co.jp”>楽天</a></li>
<li><a href=”http://www.yomiuri.co.jp/”>読売新聞</a></li>
<li><a href=”http://www.rakuten.co.jp”>朝日新聞</a></li>
</ul>
</div><!–/.nav-collapse –>
</div>
</nav>
<!– 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>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<div id=”carousel-example-generic” class=”carousel slide” data-ride=”carousel”>
<!– Indicators –>
<ol class=”carousel-indicators”>
<li data-target=”#carousel-example-generic” data-slide-to=”0″ class=”active”></li>
<li data-target=”#carousel-example-generic” data-slide-to=”1″></li>
<li data-target=”#carousel-example-generic” data-slide-to=”2″></li>
</ol>

<!– Wrapper for slides –>
<div class=”carousel-inner” role=”listbox”>
<div class=”item active”>
<img src=”http://willcom-center.com/image/phot01.jpg” alt=”…”>
<div class=”carousel-caption”>

</div>
</div>
<div class=”item”>
<img src=”http://willcom-center.com/image/phot02.jpg” alt=”…”>
<div class=”carousel-caption”>

</div>
</div>

</div>

<!– Controls –>
<a class=”left carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span>
</a>
<a class=”right carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
</body>
</html>

 

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

関連記事

  1. aku02

    bootstrap Bootstrap簡単入門(3)

  2. sns2

    Bootstrap簡単入門

  3. 26fde19616bb4dcf6b2a523162f7428c_m

    bootstrap Bootstrap簡単入門(4)


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

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

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

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

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

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

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

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

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

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