1. まとめトップ

Bootstrap日本語リファレンス(非公式)

こちらにまとめたものを動作未確認のものもあります。またかなり情報少なめかとも思います。

更新日: 2018年01月13日

0 お気に入り 216 view
お気に入り追加

3カラム

<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
crossorigin="anonymous">

<title>Hello, world!</title>
<style>
.box-container {
width: 1000px;
height: 100px;
margin: 0 auto;
}

section .box-container {
width: 1000px;
height: 600px;
margin: 0 auto;
}

footer {
clear: both;
}
</style>
</head>
<body>
<header>
<div class="box-container">
<div class="w-100 h-100 bg-primary">header</div>
</div>
<header>
<section>
<div class="box-container ">
<div
class="bg-warning border border-dark border-right-0 w-25 h-100 float-left">left</div>
<div class="bg-warning border border-dark w-50 h-100 float-left">center</div>
<div
class="bg-warning border border-dark border-left-0 w-25 h-100 float-left">right</div>
</div>
</section>
<footer>
<div class="box-container">
<div class="w-100 h-100 bg-info">footer</div>
</div>
</footer>



<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"
integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
crossorigin="anonymous"></script>

</body>
</html>

タブメニュー

<div class="container">
<!--tabのボタン-->
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#tab1" class="nav-link active">tab1</a></li>
<li class="nav-item"><a href="#tab2" class="nav-link">tab2</a></li>
</ul>

<!--コンテンツ部分-->
 <div class="tab-content py-5">
<div id="tab1" class="tab-pane active">
<p>こんにちは</p>
</div>
<div id="tab2" class="tab-pane">
<p>世界</p>
</div>
 </div>
</div>

ul: nav nav-tabs
li: nav-item a: nav-link active

コンテンツ
div: tab-pane active

通常のナビゲーション

<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</nav>

class="container"

<header>
<div class="container w-25 bg-info text-center">hello</div>
<div class="w-25 bg-info text-center">hello</div>
</header>
<section>
<div class="container w-25 h-100 bg-info text-center">hello</div>
<div class="w-25 h-100 bg-info text-center">hello</div>
</section>

<style>section .box-container{height: 300px;}</style>

containerクラスはbox-containerの高さは見ていないことがわかる

<header>
<div class="box-container">
<div class="container w-25 bg-info text-center">hello</div>
<div class="w-25 bg-info text-center">hello</div>
</div>
</header>
<section>
<div class="box-container">
<div class="container w-25 h-100 bg-info text-center">hello</div>
<div class="w-25 h-100 bg-info text-center">hello</div>
</div>
</section>

bootstrapまとめエクセルファイル

1 2