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

この記事は「スマホ、PC対応サイトが1時間で作れるようになる」の2回目の記事になります。
今回はTwitter Bootstrapのイケテないナビゲーションメニュー(Navbar)にセンターリングなどのスタイルを適用します。

 

 

 

今回のゴール

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. }
  8. i{
  9. font-size: 1.3em;
  10. color: inherit;
  11. }
  12. .navbar .navbar-inner {
  13. padding: 0;
  14. }
  15. .navbar .nav {
  16. margin: 0;
  17. display: table;
  18. width: 100%;
  19. }
  20. .navbar .nav li {
  21. display: table-cell;
  22. float: none;
  23. }
  24. .navbar .nav li a {
  25. font-weight: bold;
  26. text-align: center;
  27. border-left: 1px solid rgba(255, 255, 255, .75);
  28. border-right: 1px solid rgba(0, 0, 0, .1);
  29. }
  30. .navbar .nav li:last-child a {
  31. border-right: 0;
  32. border-radius: 0 3px 3px 0;
  33. }

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

 

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

 

関連記事

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

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

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

関連タグ:

この記事をシェアする

次へ
前へ