Bootstrap 3メニューの作成方法

基本的なメニューの作成: Bootstrap 3では、ナビゲーションバーを使って基本的なメニューを作成することができます。以下のコード例を参考にしてください:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

ドロップダウンメニューの作成: Bootstrap 3では、ドロップダウンメニューを作成することもできます。以下のコード例を参考にしてください:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

メニューバーのスタイルのカスタマイズ: Bootstrap 3では、CSSを使用してメニューバーのスタイルをカスタマイズすることができます。以下のコード例を参考にしてください:

<style>
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
  color: #777;
}
.navbar-default .navbar-nav>li>a {
  color: #777;
}
</style>

これらのコード例を使用することで、Bootstrap 3を使って簡単にカスタマイズ可能なメニューを作成することができます。さまざまなオプションやスタイルがあるため、公式のBootstrapドキュメントを参照することをおすすめします。