Bootstrap4のレシピ集です。
Bootstrap4でウェブサイトを実装する上で、これは使えると思ったものについてご紹介していきます。
<目次>
Navbar
Bootstrap4のNavbarのレイアウトについてです。
Navbarの右寄せ
「justfy-content-end」にて、Navbarを右寄せにできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<nav class="navbar navbar-expand-lg fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNav"><!-- justify-content-endで、navigationが右寄りになる --> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> |
フレックスコンテナ
Flexユーティリティを活用すると、アイテムを比較的簡単に移動させることができます。
Flexユーティリティを使用するには、動かしたいアイテムの親要素にd-flexjustify-content-center
|
1 2 3 4 5 |
<div class="d-flex justify-content-center"> <button type="button" class="btn btn-primary filter" data-rel="all">All</button> <button type="button" class="btn btn-primary filter" data-rel="all">Category 1</button> <button type="button" class="btn btn-primary filter" data-rel="all">Category 2</button> </div> |
flex-row-reverse
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。