水平排列的表单

1 :  form表单标签要添加 class="form-horizontal"				表示水平排列
2 : 内部div标签要添加 class="form-group"				表示一个表单组的元素
3 : div内部的label要添加 class="col-sm-1 control-label"	表示一个label占一格,且右对齐
4 : 下层的div要添加  class="col-sm-11"	表示div占11格
5 : input要添加 class="form-control"		表示输入框的样式
6 : 为了使得下层的两个按钮也和左边一格字体对齐,我们可以使用col-md-1再加一个col-md-offset-1
单选和多选

<form action="" >
  <div class="form-group">
      <label for="">多选:</label>
      <div class="checkbox">
          <lable>
              <input type="checkbox">篮球
           </lable>
       </div>
 </div>
</form>

<form action="" >
   <div class="form-group">
      <label for="">单选</label>
    <div class="radio">
          <label>
            <input type="radio" name="dan">单选答案
          </label>
        </div>
</div>
</div>
</form>

内联表单(所有的都为一行) : 

class="form-inline"


简单的全屏表单:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--匹配移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>简单的全屏表单</title>
    <!--安装bootstrap-->

    <!--第一步必须先引入:jquery.js,   bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的-->
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <!--生成占位图-->
    <script src="../bs/js/holder.js"></script>
    <!--css-->
    <link rel="stylesheet" href="../bs/css/bootstrap.css">
    <!--bootstrap.js-->
    <script src="../bs/js/bootstrap.js"></script>
</head>
<body>
    <div class="container" id="con">
        <h2 class="page-header" style="text-align: center">Bootstarp前端框架</h2>
        <!--先写一个form表单标签-->
        <div class="col-md-2">
            <form action="">
                <div class="form-group">
                    <label for="username" class="form-label">用户名:</label>   <!--<label> 标签为 input 元素定义标注(标记)。通过input输入框的id来查找匹配的input输入框-->
                    <input type="text"  class="form-control" id="username">
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="text"  class="form-control" id="password">
                </div>
                <div class="form-group">
                    <label for="chengshi">城市:</label>
                    <select class="form-control" id="chengshi">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                        <option value="深圳">深圳</option>
                    </select>
                </div>



                <div class="form-group">
                    <input type="button" class="btn btn-primary" id="bnt" value="提交">   <!--提交按钮-->
                    <input type="reset" class="btn btn-danger" >   <!--重置按钮-->
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>
                    <div>dddddddddddd</div>

                    <input type="button" class="btn btn-warning" style="position:fixed; top:600px; left:80%; display: none" id="goTop" value="顶部">
                </div>

            </form>


        </div>
    </div>
</body>

<script>
    //匀速去往指定滚动条索引位置,注意,这里的值不是document也不是window, 而是body , 加上html.或者单独body也行
    $("#bnt").click(function() {
        $('body').animate({scrollTop:600},300);
    })

    //获取滚动条当前的位置
    $(document).scroll(
            function(){
                //判断,滚动条的高度
                if($(document).scrollTop() > 550){
                    $("#goTop").show();
                }else{
                    $("#goTop").hide();
                }
            }
    );

    //匀速去往指定滚动条索引位置,注意,这里的值不是document也不是window, 而是body , 加上html.或者单独body也行
    $("#goTop").click(function() {
        $('body').animate({scrollTop:0},300);
    })
</script>
</html>

没有更多推荐了,返回首页