欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap 模態(tài)框?qū)嵗寮咐治?/h1>
 更新時間：2016年12月28日 09:46:08   作者：http://www.cnblogs.com/liubofight/p/6227624.html  
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來創(chuàng)建模態(tài)窗口豐富用戶體驗，或者為用戶添加實用功能。下面通過本文給大家介紹如何使用bootstrap插件來實現(xiàn)模態(tài)框

好久沒有發(fā)過自己的代碼的狀態(tài)了，今天編寫代碼感覺有力不從心了。不過慢慢的找回了感覺，正好朋友問了我一個問題，就是如何實現(xiàn)模態(tài)框。其實就是引用bootstrap插件來實現(xiàn)。下面通過本文給大家介紹下。

           Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來創(chuàng)建模態(tài)窗口豐富用戶體驗，或者為用戶添加實用功能。您可以在 Modals（模態(tài)框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）。頁面中的模態(tài)框一般分為注冊模態(tài)框、變更模態(tài)框、刪除（信息提示）模態(tài)框三種基本模態(tài)框。

好了看代碼。更希望大家互相關(guān)注，留下您的寶貴意見

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 實例 - 模態(tài)框（Modal）插件</title>
 <link rel="stylesheet" >
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
 h4{
  text-align: center;
 }
   .c-right{
  width:100%;
  height:130px;
  border: 1px solid #fff;
  background-color: #fff;
 }
 .foot a{
  text-decoration-line: none;
 }
 .one {
 width: 65%;
 height: 40px;
 margin-top: 5px;
 margin-left: 35px;
 border-radius: 5px;
 color: #999;
 line-height: 40px;
 padding-left: 16px;
 border: 1px solid #e5e5e5;
}
 .two {
 width: 65%;
 height: 40px;
 margin-top: 5px;
 border-radius: 5px;
 margin-left: 35px;
 color: #999;
 line-height: 40px;
 padding-left: 16px;
 border: 1px solid #e5e5e5;
}
 .login_submit {
 width: 62%;
 height: 25px;
 color: #fff;
 background: #FB5C5A;
 border: 0;
 margin-left: 45px;
 outline: none;
 border-radius: 3px;
}
 .footer{
   width: 100%；
  height:80px;
  border: 1px solid #333333;
  background-color:#333333; 
  margin-left: 200px;
 }
 </style>
</head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 開始
</button>
<!-- 模態(tài)框（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">
     網(wǎng)上輔導管理系統(tǒng)
    </h4>
   </div>
   <div class="modal-body">
    <div id="div2" class="div2 Absolute-Center">
    <div class="c-right">  
    <div class="middle">
     <p><input type="text"id="username" class="one"name="username"placeholder="username"></p>
     <p><input type="password"id="" class="two" name="password"placeholder="password"></p>  
    </div>
    <div class="foot">
     <p>
       <input type="submit" class="login_submit" id="btn2" value="登入"/>
     </p>
    </div>
    </div>
 </div>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉
    </button>
    <button type="button" class="btn btn-primary">
     提交更改
    </button>
   </div>
  </div>
 </div>
</div>
</body>
</html>

以上所述是小編給大家介紹的Bootstrap 模態(tài)框?qū)嵗寮咐治?，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論