flexbox结合bootstrap表单（css合集）

来源：互联网发布：上海手机数据恢复编辑：程序博客网时间：2024/05/21 10:02

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>

阅读全文

0 0