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教程