Я пытаюсь разработать модуль входа, который выглядит как этот Login Screen Bootstrap 3 - Отзывчивый Войти Диалог

Я попытался ищет шаблоны бутстраповских, которые позволяют это, но я не могу найти любой доступный. Мне было интересно, если кто здесь знает, какие шаблоны начальной загрузки, что делает:

Отзывчивый Войти Dialog Box ж/Logo
Затемняет фон

шли гайки над этим. Любая помощь будет принята с благодарностью. :)

источник

2014-12-23 Chrisette Angeline

В принципе, вы можете сделать модальную коробку с классами: модальные, скрыть. И разделение модального содержимого коробки в трех разных разделах, если вы хотите: заголовок, тело и нижний колонтитул.

<div class="modal hide" id="myModal"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">x</button> 
     <h3>Login to MyWebsite.com</h3> 
     </div> 
     <div class="modal-body"> 
     <form method="post" action='' name="login_form"> 
      <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p> 
      <p><input type="password" class="span3" name="passwd" placeholder="Password"></p> 
      <p><button type="submit" class="btn btn-primary">Sign in</button> 
      <a href="#">Forgot Password?</a> 
      </p> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     New To MyWebsite.com? 
     <a href="#" class="btn btn-primary">Register</a> 
     </div> 
    </div>

Для получения дополнительной информации вы можете проверить: Login form in modal

источник

2014-12-23 15:45:41 tblancog

Обновлено мой ответ @caramba – tblancog

Есть способы обойти с помощью любого JS, если вы предпочитаете, хотя вы можете принять модальный подход. вот еще одно предложение.

Вот Bootly аналогичное решение

SeRZCS7L09

вы можете использовать Twitter Bootstrap 3 для этого. Поскольку вы можете указать ширину в своем собственном CSS, а затем использовать систему сетки для обеспечения остальных. Взгляните через НАЧАТЬ РАБОТУ Секция O самозагрузки 3.

, если я собирался сделать это я хотел бы сделать следующее:

HTML пропускаются этикетки и т.д. juut краткий пример

<body> 
    <div id="login-form"> 
     <h2>Login</h2> 
     <input type="text" class="form-control" name="password/> 
     <input type="text" class="form-control" name="username/> 
    </div> 
</body>

Ссылка мой Bootstrap, чтобы получить преимущества форм-контроля

то в моем CSS листе:

#login-form{ 
    width: 400px; 
    margin:0 auto; 
    //etc etc etc 
}

Это очень простой, но я чувствую, что нет необходимости повторять много, так как вы сможете просмотреть документацию по начальной загрузке, и она показывает вам, как использовать сетки/столбцы/строки и т. Д., Используя их, вы можете легко создайте этот взгляд! я использую его для большого количества проектов.

Bootstrap 3

затемненный фон может быть достигнуто с помощью DIV с черным фоном с половиной, может быть, непрозрачности или меньше, вы бы сделать это с помощью перехода появляются или JS. CSS3 Opacity

источник

2014-12-23 15:47:22 Kieranmv95

Bootstrap 3 - Отзывчивый Войти Диалог

ответ

http://www.bootply.com/SeRZCS7L09

Смежные вопросы