Bootstrap基本教程

Bootstrapプラグイン

Bootstrap ウェブページの作成

次に、Bootstrapを使って3 シンプルなレスポンシブウェブページを作成するために

学習する前に、効果を見てみましょう：https://ja.oldtoolbag.com/実行/html/bootstrap-first-ウェブサイト-demo.html

HTML　コード

サンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　一つのシンプルなウェブページ</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
　　　　.fakeimg　{
　　　　　　　　height:　200px;
　　　　　　　　　background:　#aaa;
　　　　}
　　</style>
</head>
<body>
<div　class="jumbotron　text-center"　style="margin-bottom:0">
　　<h1>私の最初のBootstrapページ</h1>
　　<p>ブラウザのウィンドウサイズをリセットして効果を確認してください！</p>　
</div>
<nav　class="navbar　navbar-inverse">
　　<div　class="container-fluid">
　　　　<div　class="navbar-header">
　　　　　　<button　type="button"　class="navbar-toggle"　data-toggle="collapse"　data-target="#myNavbar">
　　　　　　　　<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="myNavbar">
　　　　　　<ul　class="nav　navbar-nav">
　　　　　　　　<li　class="active"><a　href="#">ホーム</a></li>
　　　　　　　　<li><a　href="#">ページ　2</a></li>
　　　　　　　　<li><a　href="#">ページ　3</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</nav>
<div　class="container">
　　<div　class="row">
　　　　<div　class="col-sm-4">
　　　　　　<h2>私について</h2>
　　　　　　<h5>私の写真:</h5>
　　　　　　<div　class="fakeimg">こちらに画像を挿入</div>
　　　　　　<p>私の紹介..</p>
　　　　　　<h2>リンク</h2>
　　　　　　<p>説明テキスト。</p>
　　　　　　<ul　class="nav　nav-pills　nav-stacked">
　　　　　　　　<li　class="active"><a　href="#">リンク　1</a></li>
　　　　　　　　<li><a　href="#">リンク　2</a></li>
　　　　　　　　<li><a　href="#">リンク　3</a></li>
　　　　　　</ul>
　　　　　　<hr　class="hidden-sm　hidden-md　hidden-lg">
　　　　</div>
　　　　<div　class="col-sm-8">
　　　　　　<h2>タイトル</h2>
　　　　　　<h5>サブタイトル</h5>
　　　　　　<div　class="fakeimg">画像</div>
　　　　　　<p>一部のテキスト..</p>
　　　　　　<p>基本教程網，基礎を学ぶことができれば、もっと遠くまで行ける！！！基本教程網，基礎を学ぶことができれば、もっと遠くまで行ける！！！基本教程網，基礎を学ぶことができれば、もっと遠くまで行ける！！！</p>
　　　　　　<br>
　　　　　　<h2>タイトル</h2>
　　　　　　<h5>サブタイトル</h5>
　　　　　　<div　class="fakeimg">画像</div>
　　　　　　<p>一部のテキスト..</p>
　　　　　　<p>基本教程網，基礎を学ぶことができれば、もっと遠くまで行ける！！！基本教程網，基礎を学ぶことができれば、もっと遠くまで行ける！！！基本教程網，基礎を学ぶことができれば、もっと遠くまで行ける！！！</p>
　　　　</div>
　　</div>
</div>
<div　class="jumbotron　text-center"　style="margin-bottom:0">
　　<p>下部の内容</p>
</div>
</body>
</html>

テストしてみる ‹/›

Bootstrap プラグイン概要 Bootstrap ウェル

Bootstrap基本教程

Bootstrapプラグイン

Bootstrap ウェブページの作成

HTML コード

HTML　コード