4

私はすでにブートストラップを学んでいますが、別のプロジェクトの基礎を学ぼうとしているだけです。ブートストラップと同様に、ユーザー名/パスワードフォームを上部のナビゲーションバーに追加する簡単な方法があるかどうか疑問に思っていますか? ここでワークスペースと呼ばれるテンプレートをチェックアウトしました：http://foundation.zurb.com/page-templates/workspace.html上部に検索ボックスがあり、必要なものと非常によく似ていますが、ラップするとその周りのフォーム、それは混乱します。財団でこれを行う方法を知っている人はいますか?

私が取り組もうとしているもの：

<nav class="top-bar contain-to-grid">
    <ul>
      <li class="name"><img src="/images/betalogo.jpg"></li>
      <li class="toggle-topbar"><a href="#"></a></li>
    </ul>

    <section>
      <ul class="left">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
      </ul>

      <ul class="right">
        <li>
              <input type="text">
        </li>
        <li>
              <input type="password">
        </li>

        <li class="has-button">
          <input type="submit" class="small button" value="Log In">
        </li>
      </ul>
    </section>
</nav>
4

3 に答える 3

0

ソースから…</p> 

<ul class="right">
  <li class="search">
    <form>
      <input type="search">
    </form>
  </li>

  <li class="has-button">
    <a class="small button" href="#">Search</a>
  </li>
</ul>

これにより、必要な UI が得られますが、必ずしも機能するとは限りません。これに関する問題は、送信ボタンがフォームの外にあるため、役に立たないことです。JSを使用してボタンをフォームに接着しない限り、率直に言ってKISSが壊れます。

または、フォーム内で新しい行を使用することもできます。Foundation の行のネストのおかげです。.collapseボタンを検索バーのすぐ横に配置したい行であることを確認してください。列間のガターを維持するには、これを省略します。

于 2013-07-08T11:01:29.563 に答える
0

私はこれが古いスレッドであることを知っています。あなたは今までにこれを理解したと確信していますが、他の誰かが答えを使用できるかもしれません.

<!-- Right Nav Section -->

<

ul class="right">
  <li class="divider hide-for-small"></li>
  <li class="active"><a href="#">Artists</a></li>
  <li class="divider"></li>
  <li class="active"><a href="#">Shows</a></li>
  <li class="divider"></li>
  <li class="active"><a href="#">Radio</a></li>
  <li class="divider"></li>
  <li class="active"><a href="/responsive/blog/">Blog</a></li>
  </li>
  <li class="divider"></li>
  <?php if(empty($_SESSION['user_id'])){ ?>
  <li class="has-form signinform">
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
      <div class="row collapse">
        <div class="columns username">
          <input type="text" placeholder="Username" name="username">
        </div>
        <div class="columns password">
          <input type="text" placeholder="Password" name="password">
        </div>

      </div>

    </li>
    <input type="submit" value="Login" name="login" class="button">
</form>
<?php } 
######end show login######
?>
</ul>

これは私のページの単なる過去ですが、フォームを配置する必要がある場合は、li タグで「has-form」クラスを使用する必要があることがわかります。

于 2013-11-14T17:36:16.233 に答える
-3

各リスト項目を列でラップしてみてください。

    <ul class="right">
        <div class="column">
        <li class="username"><form><input type="text" placeholder="Username" /></li></div>
        <div class="column">
        <li><input type="password" placeholder="Password"></li></div>
        <div class="column">
        <li class="has-button"><a class="small button" href="#">Login</a></form></li></div>
    </ul>
于 2012-12-02T05:55:55.573 に答える