44.bootstrap完成表單

時間  2019-11-10
標籤 44.bootstrap bootstrap 完成 表單 欄目 Bootstarp 简体版
原文   原文鏈接

1.效果javascript

2.代碼css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <!--日曆控件的去掉了好像也能夠-->
        <title>註冊頁面</title>
        <!--1.入門meta部分   爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。-->
            <!--initial-scale=1  是爲了保證頁面是流動式頁面   user-scalable=no 禁止頁面縮放功能-->
          <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>bootstrap入門</title>
        <!--2.引入 bootstrap.min.css-->
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
        <!--3.引入jQuery庫   必須在bootstrap庫以前   建議使用1.x版本的-->
        <script src="../js/jquery-1.11.3.min.js"></script>
        <!--4.引入bootstrap庫-->
        <script src="../js/bootstrap.min.js"></script>
        
            
        <!--日曆控件的-->
        <link rel="stylesheet" href="../css/bootstrapDatepickr-1.0.0.css">
        <script src="../js/bootstrapDatepickr-1.0.0.js"></script>
        <script>
            $(document).ready(function() {
                $("#calendar1").bootstrapDatepickr({date_format: "Y-m-d"});
            });
        </script>
    </head>
    <body>
        <div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
        <h2 align="center">註冊頁面</h2>
        <form action="#" method="post" class="form-horizontal">
                <!--1.帳號-->
                <div class="form-group">
                    <label class="col-md-3 control-label">帳號：</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" placeholder="請輸入帳號" />
                    </div>
                    <!--2.email-->
                    <label class="col-md-2 control-label">Email：</label>
                    <div class="col-md-2">
                        <input type="email" class="form-control" placeholder="請輸入email" />
                    </div>
                </div>
                
                <div class="form-group">
                    <!--3.密碼-->
                    <label class="col-md-3 control-label">密碼：</label>
                    <div class="col-md-2">
                        <input type="password" class="form-control"  placeholder="請輸入密碼"/>
                    </div>
                    <!--4.確認密碼-->
                    <label class="col-md-2 control-label">確認密碼：</label>
                    <div class="col-md-2">
                        <input type="password" class="form-control"  placeholder="請再次輸入密碼"/>
                    </div>
                </div>
                
                
                
                <div class="form-group">
                    <!--4.姓名-->
                    <label class="col-md-3 control-label">姓名：</label>
                    <div class="col-md-2">
                        <input type="text"  class="form-control" placeholder="請輸入姓名"/>
                    </div>
                    <!--5.年齡-->
                    <label class="col-md-2 control-label">年齡：</label>
                    <div class="col-md-2">
                        <input type="text"  class="form-control" placeholder="請輸入年齡"/>
                    </div>
                </div>
                
            <div class="form-group">
                <!--6.性別-->
                <label class="col-md-3 control-label">性別：</label>
                <div class="col-md-2">
                    <div class="radio">
                        <label>
                            <input type="radio"  name="sex" value="1" checked="checked"/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio"  name="sex" value="0"/>女
                        </label>
                    </div>
                </div>
                <!--7.愛好-->
                <label class="col-md-2 control-label">愛好：</label>
                <div class="col-md-2">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"  name="habby" value="1" checked="checked"/>散步&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="checkbox"  name="habby" value="2"/>登山&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="checkbox"  name="habby" value="3"/>讀書&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </label>
                    </div>
                </div>
            </div>
                        
                <div class="form-group">
                    <!--8. 下拉框-->
                    <label class="col-md-3 control-label">工做年限：</label>
                    <div class="col-md-2">
                            <select id="time" name="time" class="selectpicker show-tick form-control"  data-live-search="false">
                                        <option value="0">1年如下</option>
                                        <option value="1">1--3年</option>
                                        <option value="2">3--5年</option>
                                        <option value="3">5年以上</option>
                                </select>
                    </div>
                    <!--9. 日曆-->
                    <label class="col-md-2 control-label">出生年月：</label>
                    <div class="col-md-2">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>
                            <input type="text" id="calendar1" placeholder="請如今出生日期" class="form-control">
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <!--10.我的近照-->
                    <label class="col-md-3 control-label">我的近照：</label>
                    <div class="col-md-2">
                                <input type="file"  name="photo"/>
                    </div>
                    <!--11.身份證號碼：-->
                    <label class="col-md-2 control-label">身份證號碼：</label>
                    <div class="col-md-2">
                        <input type="text"  class="form-control" placeholder="請輸入身份證號碼"/>
                    </div>
                </div>
                
                <div class="form-group">
                    <!--12.重置-->
                    <div class="col-sm-offset-3 col-md-2">
                        <button type="reset" class="btn btn-default">重置</button>
                    </div>
                        <!--13.登陸-->
                    <div class="col-sm-offset-2 col-md-2">
                        <button type="submit" class="btn btn-default">登陸</button>
                    </div>
                </div>html

        </form>
        <!--分頁-->
    <div class="container ">
        <nav aria-label="Page navigation" class="col-md-7 col-md-offset-4">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
    </div>
    </body>
</html>java

 

3.注意點jquery

（1） 注意引入bootstrap須要的js 及 css  還有日曆那個須要的css 及 jschrome

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程