<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Booststrapの練習</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.css">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<style>
</style>
</head>
<body>
</body>
<div class="container">
<h3 class="heading__01">見出し</h3>
<h1>見出し1<small>サブ見出し1</small></h1>
<h2>見出し2<small>サブ見出し2</small></h2>
<h3>見出し3<small>サブ見出し3</small></h3>
<h4>見出し4<small>サブ見出し4</small></h4>
<h5>見出し5<small>サブ見出し5</small></h5>
<h6>見出し6<small>サブ見出し6</small></h6>
<h3 class="heading__01">テキストの左右中央寄せ</h3>
<p class="text-left">左寄せのテキスト</p>
<p class="text-center">中央寄せのテキスト</p>
<p class="text-right">右寄せのテキスト</p>
<h3 class="heading__01">リスト</h3>
<ul>
<li>通常のリスト</li>
<li>通常のリスト</li>
<li>通常のリスト</li>
</ul>
<ol>
<li>数字のリスト</li>
<li>数字のリスト</li>
<li>数字のリスト</li>
</ol>
<ul class="list-unstyled">
<li>先頭に何もつかないリスト</li>
<li>先頭に何もつかないリスト</li>
<li>先頭に何もつかないリスト</li>
</ul>
<ul class="list-inline">
<li>横並びのリスト</li>
<li class="list-inline-item">ラッパ</li>
<li>横並びのリスト</li>
</ul>
<h3 class="heading__01">通常ボタン</h3>
<a class="btn btn-default" href="#">Link</a>
<h3 class="heading__01">色付きボタン</h3>
<a class="btn btn-primary" href="#">web</a>
<a class="btn btn-success" href="#">VR</a>
<a class="btn btn-info" href="https://www.sakatakoryo-h.ed.jp">光陵</a>
<a class="btn btn-warning" href="#">Link</a>
<a class="btn btn-danger" href="#">Link</a>
<h3 class="heading__01">ボタンの大きさ</h3>
<a class="btn btn-primary btn-xs" href="#">極小サイズのボタン</a>
<a class="btn btn-primary btn-sm" href="#">小サイズのボタン</a>
<a class="btn btn-primary" href="#">通常のボタン</a>
<a class="btn btn-primary btn-lg" href="#">大サイズのボタン</a>
<h3 class="heading__01">ブロックボタン</h3>
<a class="btn btn-primary btn-block" href="#">Link</a>
<h3 class="heading__01">複合要素のボタン</h3>
<a class="btn btn-success btn-lg btn-block" href="#">複合要素のボタン</a>
</div>
</html>
