web-dev-qa-db-fra.com

Bootstrap 3: popup HTML sensible

Comment créer un popup HTML réactif avec Bootstrap 3?

HTML,

<div class="center-pane">

  <div class="pane-left">
    Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
  </div>

  <div class="pane-right">

    <form method="post" action="/login/">
      <div class="form-group">
        <label class=" required-field">E-Mail:</label>
        <input type="text" name="username" required id="id_username" class="form-control" maxlength="150">
      </div>
      <div class="form-group">
        <label class=" required-field">Password:</label>
        <input type="password" name="password" required class="form-control" id="id_password">
      </div>
      <button type="submit" class="btn btn-default btn-primary btn-block" value="Login">Login</button><br>
      <a href="/omg">I'm desperated!</a>
    </form>
    <div class="misc text-center">
      Some text
      <br>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
      <a href="http://validator.w3.org/check/referer">HTML5</a>
    </div>
  </div>


</div>

CSS,

/* HTML POPUP
-------------------------------------------------- */
.center-pane {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  max-width: 1000px;
  height: 320px;
  border:1px solid red;
}

.pane-left,
.pane-right{
    width:480px;
    float:left;
    border:1px solid blue;
}

.center-pane est réactif lorsque je redimensionne la fenêtre de mon navigateur. mais pas .pane-left et .pane-right - comment puis-je rendre ces deux réactifs également?

MODIFIER:

si j'utilise la solution du modèle , il semble que je doive résoudre davantage de problèmes:

      <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

la boîte de dialogue model n'est pas absolue verticalement centrée par défaut - comment puis-je changer cela? aussi, comment puis-je changer la taille de la boîte de dialogue alors? et j’ai besoin de deux colonnes - une à gauche, une à droite pour répondre. comment le modèle peut m'aider à le faire. Je ne le vois pas dans la documentation du site web bootstrap. Je voudrais essayer d'éviter toute personnalisation via js cependant. 

de plus, vous devez cliquer sur un bouton pour ouvrir la boîte de dialogue. Je ne souhaite pas utiliser le bouton pour afficher la boîte de dialogue, je souhaite obtenir le menu contextuel lorsque le document html est chargé. c'est possible?

javascriptjqueryhtmlcsstwitter-bootstrap
5
laukok

La largeur du volet-gauche et du volet-droite doit changer dynamiquement lorsque le navigateur est redimensionné pour le rendre réactif!

Mais si vous lui fournissez une largeur fixe telle que width:value in px. Le redimensionnement du navigateur n'aura aucun effet sur la div!

Je vous recommande d'utiliser des classes incorporées de BOOTSTRAP POPUP COMPONENTS ..

En savoir plus sur BOOTSTRAP MODAL POPUPS -> ICI

4
Magesh Kumaar

J'ai ma propre solution avec la méthode des colonnes - col col-xs-6,

<div class="pane-left col col-xs-6">
 Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
</div>

<div class="pane-right col col-xs-6">
....

</div>
1
laukok