BootstrapのイケテないNavbarにスタイル適用。センターリング(justified)などについて

今回のゴール

Bootstrapのナビゲーションメニューは、Navbarを使い、構築を行うが、センターリングされているサンプルコードが掲載されていません。

今回はこの区切り線も無い、イケテいないNavbarをセンターリングするとともに、少しイケテいるようにスタイルをあてます。

Nabvarのソースを編集

BootstrapのNavbarを下記のように編集を行います。

1. <!-- Site Name -->
2. <div class="sitename">
3.   <div class="container">
4. <a href="#">Project name</a>
5. </div>
6. </div>
7.  
8. <!-- Static navbar -->
9. <div class="navbar navbar-default" role="navigation">
10. <div class="container">
11. <div class="navbar-header">
12. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
13. <span class="sr-only">Toggle navigation</span>
14. <span class="icon-bar"></span>
15. <span class="icon-bar"></span>
16. <span class="icon-bar"></span>
17. </button>
18. </div>
19. <div class="navbar-collapse collapse">
20. <ul class="nav navbar-nav">
21. <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
22. <li><a href="#about"><i class="fa fa-info"></i> About</a></li>
23. <li><a href="#about"><i class="fa fa-jpy"></i> Price</a></li>
24. <li><a href="#contact"><i class="fa fa-comments-o"></i> Contact</a></li>
25. </ul>
26. </div><!--/.nav-collapse -->
27. </div>
28. </div>

Project Nmae は NavbarのDivから外しています。
アイコンは、Fontawsomeを使いました。

スタイルの適用

bootstrapのCSSとは別に、my-bootstrap.cssなどを新規に作成し、下記のCSSを追記します。

1. .sitename{
2. margin:15px 0 15px;
3. }
4. .sitename a{
5. font-size: 1.6em;
6. color: inherit;
7. }
9. i{
10. font-size: 1.3em;
11. color: inherit;
12. }
14. .navbar .navbar-inner {
15. padding: 0;
16. }
18. .navbar .nav {
19. margin: 0;
20. display: table;
21. width: 100%;
22. }
24. .navbar .nav li {
25. display: table-cell;
26. float: none;
27. }
29. .navbar .nav li a {
30. font-weight: bold;
31. text-align: center;
32. border-left: 1px solid rgba(255, 255, 255, .75);
33. border-right: 1px solid rgba(0, 0, 0, .1);
34. }
36. .navbar .nav li:last-child a {
37. border-right: 0;
38. border-radius: 0 3px 3px 0;
39. }

以上で、BootstrapのNavbarをセンターリングすることができました。
Navbarにスタイルを適用したサンプルはこちらに、アップロードしています。

次回は「メインビジュアルの追加」を行います。

関連記事

Bootstrapにメインビジュアルを追加する

Bootstrapテンプレートにメインコンテンツを追加する

スマートデバイス用に画像をリサイズ