bootstrapひな形
< !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"/> <title>Project Nyaan</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> </head> <body> <h1>吾輩は猫である。</h1> <p class="lead">名前はまだない。</p> <a class="btn btn-primary" href="#">OK</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>
グリッドシステム
<!-- Bootstrapのグリッドシステム -->
< !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"/>
<title>Project Nyaan</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
body {
padding-top: 50px;
background-color: lightgray;
}
.starter-template {
padding: 40px 15px;
background-color: white;
}
</style>
</head>
<body>
<div class="container"> ★
<div class="starter-template">
<div class="row"> ★
<div class="col-sm-12"> ★
<div class="jumbotron">
<h1>吾輩は猫である。</h1>
<p class="lead">名前はまだない。</p>
<a class="btn btn-primary" href="#">OK</a>
</div>
</div>
<div class="col-sm-4"> ★
<h2>どこで生れたか</h2>
<p>とんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
</div>
<div class="col-sm-4"> ★
<h2>この書生というのは</h2>
<p>時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。書生の顔を見たのがいわゆる人間というものの見始であろう。</p>
</div>
<div class="col-sm-4"> ★
<h2>掌の上で少し落ちついて</h2>
<p>書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</p>
</div>
</div>
</div>
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</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"/>
<title>Project Nyaan</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
body {
padding-top: 50px;
background-color: lightgray;
}
.starter-template {
padding: 40px 15px;
background-color: white;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse 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 Nyaan</a>
</div>
<div id="navbar" class="collapse navbar-collapse"> ★
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#list">List</a></li>
<li><a href="#">Table</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>吾輩は猫である。</h1>
<p class="lead">名前はまだない。</p>
<img src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg" class="img-responsive center-block"/>
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
</p>
<h2 id="list">動物リスト</h2>
<ul class="list-group">
<li class="list-group-item">ねこ</li>
<li class="list-group-item">いぬ</li>
<li class="list-group-item">うさぎ</li>
</ul>
<a class="btn btn-primary" href="#">OK</a>
</div>
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</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"/>
<title>Project Nyaan</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
body {
padding-top: 50px;
background-color: lightgray;
}
.starter-template {
padding: 40px 15px;
background-color: white;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse 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 Nyaan</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#list">List</a></li>
<li><a href="#table">Table</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>吾輩は猫である。</h1>
<p class="lead">名前はまだない。</p>
<img src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg" class="img-responsive center-block"/>
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
</p>
<h2 id="list">動物リスト</h2>
<ul class="list-group">
<li class="list-group-item">ねこ</li>
<li class="list-group-item">いぬ</li>
<li class="list-group-item">うさぎ</li>
</ul>
<h2 id="table">猫テーブル</h2>
<table class="table table-striped"> ★
<thead>
<tr>
<th>#</th>
<th>名前</th>
<th>特徴</th>
<th>住所</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>たま</td>
<td>くつした</td>
<td>東京都港区南青山</td>
</tr>
<tr>
<td>2</td>
<td>ミケ</td>
<td>三毛</td>
<td>東京都千代田区秋葉原駅周辺</td>
</tr>
<tr>
<td>3</td>
<td>トラ</td>
<td>シマ</td>
<td>兵庫県西宮市甲子園町</td>
</tr>
<tr>
<td>4</td>
<td>にゃあ</td>
<td>トラの兄弟</td>
<td>兵庫県西宮氏甲子園町</td>
</tr>
</tbody>
</table>
<a class="btn btn-primary" href="#">Topに戻る</a>
</div>
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</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"/>
<title>Project Nyaan</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
body {
padding-top: 50px;
background-color: lightgray;
}
.starter-template {
padding: 40px 15px;
background-color: white;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse 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 Nyaan</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#list">List</a></li>
<li><a href="#table">Table</a></li>
<li><a href="#form">Form</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>吾輩は猫である。</h1>
<p class="lead">名前はまだない。</p>
<img src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg" class="img-responsive center-block"/>
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
</p>
<h2 id="list">動物リスト</h2>
<ul class="list-group">
<li class="list-group-item">ねこ</li>
<li class="list-group-item">いぬ</li>
<li class="list-group-item">うさぎ</li>
</ul>
<h2 id="table">猫テーブル</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>名前</th>
<th>特徴</th>
<th>住所</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>たま</td>
<td>くつ下</td>
<td>東京都港区南青山</td>
</tr>
<tr>
<td>2</td>
<td>ミケ</td>
<td>三毛</td>
<td>東京都千代田区秋葉原駅周辺</td>
</tr>
<tr>
<td>3</td>
<td>トラ</td>
<td>シマ</td>
<td>兵庫県西宮市甲子園町</td>
</tr>
<tr>
<td>4</td>
<td>にゃあ</td>
<td>トラの兄弟</td>
<td>兵庫県西宮市甲子園町</td>
</tr>
</tbody>
</table>
<h2 id="form">猫フォーム</h2>
<form action="#" method="post">
<div class="form-group"> ★
<label for="title">タイトル</label>
<input type="text" class="form-control" name="title" id="title"/> ★
</div>
<div class="form-group"> ★
<label for="message">メッセージ</label>
<textarea class="form-control" name="message" id="message" rows="3"></textarea> ★
</div>
<div class="form-group"> ★
<label for="select">好みのネコ</label>
<select class="form-control" name="select" id="select"> ★
<option>タマ</option>
<option>ミケ</option>
<option>トラ</option>
</select>
</div>
<button type="submit">OK</button>
</form>
<hr />
<a class="btn btn-primary" href="#">Topに戻る</a>
</div>
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</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"/>
<title>Project Nyaan</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
body {
padding-top: 50px;
background-color: lightgray;
}
.starter-template {
padding: 40px 15px;
background-color: white;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse 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 Nyaan</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#list">List</a></li>
<li><a href="#table">Table</a></li>
<li><a href="#form">Form</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>吾輩は猫である。</h1>
<p class="lead">名前はまだない。</p>
<img src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg" class="img-responsive center-block"/>
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
</p>
<h2 id="list">動物リスト</h2>
<ul class="list-group">
<li class="list-group-item">ねこ</li>
<li class="list-group-item">いぬ</li>
<li class="list-group-item">うさぎ</li>
</ul>
<h2 id="table">猫テーブル</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>名前</th>
<th>特徴</th>
<th>住所</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>たま</td>
<td>くつ下</td>
<td>東京都港区南青山</td>
</tr>
<tr>
<td>2</td>
<td>ミケ</td>
<td>三毛</td>
<td>東京都千代田区秋葉原駅周辺</td>
</tr>
<tr>
<td>3</td>
<td>トラ</td>
<td>シマ</td>
<td>兵庫県西宮市甲子園町</td>
</tr>
<tr>
<td>4</td>
<td>にゃあ</td>
<td>トラの兄弟</td>
<td>兵庫県西宮市甲子園町</td>
</tr>
</tbody>
</table>
<h2 id="form">猫フォーム</h2>
<form class="form-horizontal" action="#" method="post">
<div class="form-group">
<label class="col-sm-2 control-label" for="title">タイトル</label> ★
<div class="col-sm-10"> ★
<input type="text" class="form-control" name="title" id="title"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="message">メッセージ</label> ★
<div class="col-sm-10"> ★
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="select">好みのネコ</label> ★
<div class="col-sm-10"> ★
<select class="form-control" name="select" id="select">
<option>タマ</option>
<option>ミケ</option>
<option>トラ</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10"> ★
<button type="submit">OK</button>
</div>
</div>
</form>
<hr />
<a class="btn btn-primary" href="#">Topに戻る</a>
</div>
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
[siteorigin_widget class=”AdWidgetItem”][/siteorigin_widget]
[siteorigin_widget class=”WP_Widget_Search”][/siteorigin_widget]
[siteorigin_widget class=”WP_Widget_Pages”][/siteorigin_widget]
[siteorigin_widget class=”AdWidgetItem”][/siteorigin_widget]