2

私はHTML5とTwitterBootstrapの初心者ですが、事前に作成された例をいくつか見てきたので、いくつか質問があります...

このコードを例として取り上げましょう（Fluid Layoutの例から）：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> Username
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Profile</a></li>
          <li class="divider"></li>
          <li><a href="#">Sign Out</a></li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

誰か教えてもらえますか：

  • それらdata-toggleとdata-targetパラメータの重要性は何ですか？
  • これらの3つの空のicon-barスパンインスタンス（または、さらに言えば、空のcaretスパン）のポイントは何ですか？
4

2 に答える 2

4

ドキュメントでは、これらの空の<i></i>タグがアイコンを作成すると説明しています。スパンが空の場合も同様です。それらは、その特定のクラス名に関連付けられたスタイリングを持っており、それらを使用できる素敵なものに変えます。クラスを削除すると、それらは空になり、意味のない要素になります。

このdata-toggle="dropdown"部分は、その要素をオプションのBootstrapjavascriptプラグインであるドロップダウンメニューに変換することに関係しています。

Bootstrapの背後にある考え方は、すべての作業を自分で行うことなく、エレガントなスタイリングと機能性をすべて提供することです。そのような素晴らしい仕事をしてくれたマーク・オットとジェイコブ・ソーントンに称賛を送ります。

于 2012-07-06T17:43:55.110 に答える
1

data-toggleanddata-target属性は、JavaScriptドロップダウンコンポーネントによって使用されます。

このicon-barクラスは、ナビゲーションバーのCSSコンポーネントによって使用されます。

ツイッターのブートストラップを学ぶには、サンプルに飛び込む前に、サイトにアクセスして、少なくとも各セクションをざっと読むことをお勧めします。

于 2012-07-06T17:54:55.923 に答える