flexbox结合bootstrap表单（css合集）

最新推荐文章于 2024-05-19 13:56:53 发布

爆裂吧叶子

最新推荐文章于 2024-05-19 13:56:53 发布

阅读量740

点赞数 1

分类专栏：练习文章标签： bootstrap flexbox 表单

本文链接：https://blog.csdn.net/m0_37729058/article/details/78497643

版权

练习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

flexbox css合集

最近在使用flexbox，写一个flexbox和bootstrap结合的表单。这里提供一个整合好的css库，只需要引用类名即可完成效果。
同时demo里面提供了一些用来测试更改样式的按钮，不需要的直接删掉就好。
先上成品图
这里写图片描述

这里上方的input和select是为了演示样式的，实际使用时不需要。
**第一行输入要交换的行数（如1 ）点击就可以随意交换位置而不改变DOM实际位置

第二行的select则是改变表单的显示方式。**
这里写图片描述

这里首先提供css库，使用时只需引用对应的类名即可。

Class类作用于容器上·························································································

contains：提供垂直正序排列。

contains_reverse:提供垂直倒序排列。

contains_row:提供平行正序排列

contains_row_reverse：提供平行倒序排列

作用于容器内部div···································································································

容器内部的第一级子类div，默认order值为10，默认200px宽度和5px外边距。

order-start-max：使div排序最靠前。

order-end-max：使div排序最靠后。

order-start-1~5：靠前排列类，数字越小越靠前。

order-end-1~5：靠后排列类，数字越大越靠后。

·························································································································································

PS:有关浮动的bootstrap （pull-left，pull-right，center-block..等等）
会影响容器的居中效果，根据需要选择。

.contains{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items:center;
    width: 300px;
    margin: 10px auto;
    border: 1px solid #e3e3e3
}

.contains_reverse{
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-around;
    align-items:center;
    width: 300px;
    margin: 10px auto;
    border: 1px solid #e3e3e3
}
.contains_row{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items:center;
    flex-wrap: wrap;
}
.contains_row_reverse{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    align-items:center;
    flex-wrap: wrap-reverse;
}
/*child set*/
.contains_row_reverse>div{
    width:200px;
    margin: 5px;
}
.contains_row>div{
    width:200px;
    margin: 5px;
}
.contains>div{
    width:200px;
    margin: 5px;
}
.contains_reverse>div{
    width:200px;
    margin: 5px;
}
/*排序 sort*/
.contains>div {
    order: 10;
}
.contains_reverse>div {
    order: 10;
}
.contains_row>div {
    order: 10;
}
.contains_row_reverse>div {
    order: 10;
}
/*sort default:10*/
.order-start-1 {
    order:1 !important;
}
.order-start-2 {
    order:2 !important;
}
.order-start-3 {
    order:3 !important;
}
.order-start-4 {
    order:4 !important;
}
.order-start-5 {
    order:5 !important;
}
.order-end-1 {
    order:11  !important;
}
.order-end-2 {
    order:12 !important;
}
.order-end-3 {
    order:13 !important;
}
.order-end-4 {
    order:14 !important;
}
.order-end-5 {
    order:15 !important;
}
.order-start-max {
    order:0 !important;
}
.order-end-max {
    order:99 !important;
}

接下来是前台的测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/flexbox.css">
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<!--按钮演示-->
<div style="margin: 0 auto; width: 500px;">
    Index:<input type="text" id="start">
    ==>
    <input type="text" id="end">
    <button id="btnchange" class="btn btn-success">交换</button>
</div>
<select id="selectclass" class="form-control" style="width: 200px; margin: 20px auto">
    <option value="contains">垂直居中</option>
    <option value="contains_reverse">垂直居中倒序</option>
    <option value="contains_row">水平居中</option>
    <option value="contains_row_reverse">水平居中倒序</option>
</select>
<hr>

<div id="changeclass" class="contains">

    <div class="form-group order-start-1">
        <label for="firstname">名字</label>
        <div>
            <input type="text" class="form-control"  id="firstname" placeholder="name">
        </div>
    </div>

    <div  class="form-group order-start-2">
        <label for="lastname">姓</label>
        <div>
            <input type="text" class="form-control"  id="lastname" placeholder="surname">
        </div>
    </div>

    <div class="form-group order-start-3">
        <label for="email">邮箱</label>
        <div>
            <input type="email" class="form-control" id="email" placeholder="email">
        </div>
    </div>

    <div  class="form-group order-start-4">
        <label for="phone">手机</label>
        <div>
            <input type="tel" class="form-control" id="phone" placeholder="phone">
        </div>
    </div>

    <div  class="form-group order-start-5">
        <label for="vip">登录方式</label>
        <div>
            <select class="form-control" id="vip" >
                <option value="1">会员</option>
                <option value="2">管理员</option>
            </select>
        </div>
    </div>
<div class="form-group order-end-1">
    <div  class="checkbox ">
                <label>
                    <input type="checkbox">请记住我
                </label>
    </div>
</div>

  <div class="form-group order-end-2">
    <div>

            <button type="submit" class="btn btn-primary " style="width: 200px">登录</button>

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

<hr>
<script>
$(function () {
    var arr = [];
    for(var i=0;i<=6;i++ ){
        var ordernumber=$(".form-group").eq(i).css('order');
        arr.push(ordernumber);
    }
$("#selectclass").change(function () {
   var classdata=$(this).val();
   var divclass = $('#changeclass').attr('class');
   $('#changeclass').addClass(classdata);
   $('#changeclass').removeClass(divclass);
})

$("#btnchange").click(function () {
//    获取输入数据
      var val1=$("#start").val();
      var val2=$("#end").val();
//根据order值获取对应数据
        var data1;
        var data2;
        var order1=arr[val1-1];
        var order2=arr[val2-1];
        for(var i=0;i<=6;i++){
            if($("#changeclass>div:eq("+i+")").css('order') == order1){
                data1=$("#changeclass>div:eq("+i+")");
            }
            if($("#changeclass>div:eq("+i+")").css('order') == order2){
                data2=$("#changeclass>div:eq("+i+")");
            }
        }
//      交换类名
        var name1= data1.attr('class')
        var name2= data2.attr('class')
         var classnameset=name1.split(' ');
        for(var i=0;i<classnameset.length;i++) {
            data1.removeClass(classnameset[i]);
        }
        data1.addClass(name2)

        var classnameset=name2.split(' ');
        for(var i=0;i<classnameset.length;i++) {
            data2.removeClass(classnameset[i]);
        }
        data2.addClass(name1)
    })
})
</script>
</body>
</html>