Bootstrap 3：響應式HTML彈出窗口

如何使用Bootstrap 3響應HTML彈出窗口？Bootstrap 3：響應式HTML彈出窗口

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響應，當我調整我的瀏覽器窗口。但不是.pane-left和 .pane-right - 我怎樣才能使這兩個響應以及？

編輯：

如果我用model's solution，似乎更多的問題，我需要解決：

 <!-- 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>

的model對話框默認情況下不絕對垂直中心 - 我怎麼能改變？另外，我怎樣才能改變對話框的大小呢？我需要兩列 - 一個左邊，一個右邊是響應。模型如何幫助我做到這一點。我無法在bootstrap網站的文檔中看到它。我會盡量避免通過js進行任何定製。

另外，您需要點擊按鈕來觸發對話框。我不想使用按鈕來獲得對話框，我想要加載html文檔時獲得彈出窗口。可能嗎？

來源

2014-02-09 laukok

爲什麼不使用引導模型？ http://getbootstrap.com/javascript/#modals – vlio20

謝謝。請參閱我上面的編輯。 – laukok

當瀏覽器調整大小以使其響應時，窗格左側和窗格右側的寬度必須動態更改！

但是，如果你提供一個固定的寬度，如width:value in px。瀏覽器調整大小不會對div有任何影響！

我建議你使用的BOOTSTRAP彈出式組件內置類..

瞭解更多關於BOOTSTRAP MODAL POPUPS - >HERE

來源

2014-02-09 06:43:55

謝謝。請參閱我上面的編輯。 – laukok

有我自己用的列方法解決方案 - 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>

來源

2014-02-09 08:01:45 laukok

Bootstrap 3：響應式HTML彈出窗口

回答

相關問題