Търсих си неразкрасена логин форма за Bootstrap 3. Трябваше да я набутам в бутон на на nav-панела. Не намерих нищо свястно, ам тя работата е елементарна. Ще покажа 2 различни примера.
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
Здравей.
Не забравяй да споменеш и Jquery 🙂
Жив и здрав!