flexbox结合bootstrap表单（css合集）
2017-11-10 11:05
323 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- bootstrap学习之利用CSS属性pointer-events禁用表单控件
- FlexBoxLayout结合DBFlow实现流式布局
- BootStrap--CSS布局--表单
- Bootstrap CSS布局之表单
- Bootstrap全局CSS样式之表单
- CSS Flexbox 学习指南、工具与框架
- CSS学习笔记：flexbox
- Bootstrap的全局css样式之栅格系统、表单和图片部分常用类.
- 使用CSS Flexbox创建等高定价表
- 使用CSS flexbox创建一个干净的CSS比较表
- CSS3盒模型display:box;box-flex:3;
- extjs的css效果及与传统布局结合下的panel的使用及表单提交
- flexbox——css伸缩布局
- CSS box-flex属性，然后弹性盒子模型简介
- CSS Flexbox（弹性盒子）
- Designing CSS Layouts With Flexbox Is As Easy As Pie
- CSS box-flex属性
- vue结合bootstrap表单验证 FormValidation 图片验证
- 关于学习CSS flexbox的文章或网址链接
- 结合FlexboxLayout实现标签选择功能