Bootstrap 3 dropdown login form example

Търсих си неразкрасена логин форма за Bootstrap 3. Трябваше да я набутам в бутон на на nav-панела. Не намерих нищо свястно, ам тя работата е елементарна. Ще покажа 2 различни примера.
Bootstrap login form - dropdown, popover
BS3 Login form с popover и html код разположен някъде в страницата:
Javascript – поставя се най-долу в кода на страницата

1
2
3
4
5
6
7
$('button[data-toggle=popover]').popover({ 
    html : true,
    //trigger: "click", // може да се смени
    content: function() {
      return $('#popover_content_wrapper').html();
    }
});

HTML-кода:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="popover_content_wrapper" style="display: none">
  <form action="" role="form">
    <div class="form-group">
      <label for="user">User</label>
      <input type="text" class="form-control" id="user" placeholder="User" />
      <label for="password">Password</label>
      <input type="password" class="form-control" id="password" placeholder="Password" />
    </div>
      <button type="submit" class="btn btn-default">Sign in</button>
 
  </form>
</div>

BS3 Login form с dropdown:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<li>
 
  <div class="dropdown">
    <button type="button" class="btn btn-default navbar-btn" data-toggle="dropdown">Login</button>
 
    <div class="dropdown-menu" style="padding: 10px; background: #ddd">
      <form action="" role="form">
        <div class="form-group">
          <label for="user">User</label>
          <input type="text" class="form-control" id="user" placeholder="User" />
          <label for="password">Password</label>
          <input type="password" class="form-control" id="password" placeholder="Password" />
        </div>
        <button type="submit" class="btn btn-default">Sign in</button>
      </form>
    </div>
  </div>
 
</li>

Пример с 2-те форми може да се види тук:
Bootstrap 3 dropdown login form example

One thought on “Bootstrap 3 dropdown login form example

Leave a Reply

Your email address will not be published. Required fields are marked *

*