bootstrap3.x

vue 验证码倒计时（jq vs vue）

VUE • lopo1983 发表了文章 • 0 个评论 • 1728 次浏览 • 2017-06-26 12:45 • 来自相关话题

短信验证现在是市面上比较流行的一种验证方式，最近公司的项目有涉及到故整体如下
?
JQ版本
?
jssendMsm: function(wait, objectb) {
var time = wait;
if(time == 0) {
$(objectb).removeAttr("disabled");
$(objectb).text("获取验证码");
$(objectb).removeClass('hidden');
$(objectb).next().addClass('hidden');
time = wait;
} else {
$(objectb).attr("disabled", true);
$(objectb).addClass('hidden');
$(objectb).next().removeClass('hidden').text(time + " s 后重发");
time--;
setTimeout(function() {
qdcms.sendMsm(time, objectb);
}, 1000)
}
}

html<a class="btn btn-black" onclick="qdcms.getcode(60,this)">获取验证码</a>
<span class="btn btn-black disabled hidden"></span>css
VBAdmin-UI
?
预览地址：https://www.tfstock.com.cn/?点击注册按钮
?
?
Vue 实现
?
template<template>
<button class="timerout" :disabled="disabled || time > 0" @click='run'>
{{ text }}
</button>
</template>script<script>
export default {
name: 'timerbtn',
props: {
second: {
type: Number,
default: 60
},
disabled: {
type: Boolean,
default: false
}
},
data: function() {
return {
time: 0
}
},
methods: {
run() {
this.time = this.second;
this.timer();
},
timer() {
if(this.time > 0) {
this.time--;
setTimeout(this.timer, 1000);
}
}
},
computed: {
text() {
return this.time > 0 ? this.time + 's 后重新获取' : '点击获取验证码';
}
},
mounted: function() {

}

}
</script>
style
css ?VBAdmin-UI<style lang="less">
@import (reference) "../../../assets/lib/css.less";
.timerout:disabled {
&,
&:hover,
&:focus {
.bgc(@cbla);
color: @cwh;
}
}
</style>
?
下载地址如下：查看全部

短信验证现在是市面上比较流行的一种验证方式，最近公司的项目有涉及到故整体如下

?
JQ版本
?
js

sendMsm: function(wait, objectb) {

	var time = wait;

	if(time == 0) {

		$(objectb).removeAttr("disabled");

		$(objectb).text("获取验证码");

		$(objectb).removeClass('hidden');

		$(objectb).next().addClass('hidden');

		time = wait;

	} else {

		$(objectb).attr("disabled", true);

		$(objectb).addClass('hidden');

		$(objectb).next().removeClass('hidden').text(time + " s 后重发");

		time--;

		setTimeout(function() {

			qdcms.sendMsm(time, objectb);

		}, 1000)

	}

}

html

<a class="btn btn-black" onclick="qdcms.getcode(60,this)">获取验证码</a>

<span class="btn btn-black disabled hidden"></span>

css
VBAdmin-UI
?
预览地址：https://www.tfstock.com.cn/?点击注册按钮
?
?
Vue 实现
?
template

<template>

	<button class="timerout" :disabled="disabled || time > 0" @click='run'>

        {{ text }}

    </button>

</template>

script

<script>

	export default {

		name: 'timerbtn',

		props: {

			second: {

				type: Number,

				default: 60

			},

			disabled: {

				type: Boolean,

				default: false

			}

		},

		data: function() {

			return {

				time: 0

			}

		},

		methods: {

			run() {

				this.time = this.second;

				this.timer();

			},

			timer() {

				if(this.time > 0) {

					this.time--;

					setTimeout(this.timer, 1000);

				}

			}

		},

		computed: {

			text() {

				return this.time > 0 ? this.time + 's 后重新获取' : '点击获取验证码';

			}

		},

		mounted: function() {



		}



	}

</script>

style
css ?VBAdmin-UI

<style lang="less">

	@import (reference) "../../../assets/lib/css.less";

	.timerout:disabled {

		&,

		&:hover,

		&:focus {

			.bgc(@cbla);

			color: @cwh;

		}

	}

</style>

?
下载地址如下：

关于组件和ui收集的想法

vbadmin-ui • lopo1983 发表了文章 • 2 个评论 • 1506 次浏览 • 2017-06-01 20:35 • 来自相关话题

项目地址：
coding：http://lopo.coding.me/VBAdmin-UI/
github：https://github.com/lopo1983/VBAdmin-UI?
预览地址：
http://lopo.coding.me/VBAdmin-UI/
http://lopo.coding.me/VBAdmin-UI/ui/login.html

?
由于个人习惯coding的代码比github的优先发布欢迎大家star fork

?vbadmin-ui 从去年就开始逐步更新组件,目的取代替换旧版的bsfanslib 扩展(原扩展已经力不从心,整体设计理念与现有的设计理念有较大偏差)!
vbadmin 为一套基于bootstrap原来样式的基础上根据目前设计理念和流行趋势重新进行定制的一套css 框架扩展（vba 奉行能用css实现的尽量不用js）
现在基础的form table 等已完成构建
已开始进入UI 组件制作阶段
希望大家踊跃提供
1.自己觉得好看实用的组件（截图，psd，链接均可,）
2.觉得某个组件需要基于其他组件的样式库里移植到使用bootstrap的
?
重要提示：
1.由于Vue的逐步流行，本框架中基础组件搭建完后，将于稍后推出基于vue的组件库（也是vba设计的初衷）
2.本扩展基于bootstrap3.x（目前由于能力和时间有限没做浏览器兼容）查看全部

Bootstrap+Masonry+imagesLoaded 快速实现瀑布流

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2338 次浏览 • 2017-05-04 16:53 • 来自相关话题

html
<div id="masonry" class="container-fluid">

<div class="thumbnail">
<div class="imgs">
<img src="" />
</div>
<div class="caption">
<div class="title"></div>
<div class="content">

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

</div>css
<script>
$(function() {

var masonryNode = $('#masonry');
masonryNode.imagesLoaded(function(){
masonryNode.masonry({
itemSelector: '.thumbnail',
isFitWidth: true
});
});

});
</script>// 首先将新元素添加到页面容器中

masonryNode.append(newItems);
// 等待新元素中的图片加载完毕
newItems.imagesLoaded(function(){

// 调用瀑布流布局的appended方法
masonryNode.masonry('appended', newItems);
});$(window).scroll(function() {

if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

if(!imagesLoading) {
appendToMasonry();
}

}

});masonry官网查看全部

html

<div id="masonry" class="container-fluid">

 

    <div class="thumbnail">

        <div class="imgs">

            <img src="" />

        </div>

        <div class="caption">

            <div class="title"></div>

            <div class="content">

                 

            </div>

        </div>

    </div>

     

</div>

css

<script>

    $(function() {

     

        var masonryNode = $('#masonry');

        masonryNode.imagesLoaded(function(){

            masonryNode.masonry({

                itemSelector: '.thumbnail',

                isFitWidth: true

            });

        });

         

         

    });

</script>

// 首先将新元素添加到页面容器中

 

masonryNode.append(newItems);

// 等待新元素中的图片加载完毕

newItems.imagesLoaded(function(){

 

// 调用瀑布流布局的appended方法

    masonryNode.masonry('appended',  newItems);

});

$(window).scroll(function() {

                 

    if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

         

        if(!imagesLoading) {

            appendToMasonry();

        }

         

    }

     

});

masonry官网

vue 路由keep-alive

javascript/jQuery • lopo1983 发表了文章 • 0 个评论 • 1861 次浏览 • 2017-01-14 22:17 • 来自相关话题

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>


<router-view v-if="!$route.meta.keepAlive"></router-view>?
路由设置
?
routes: [{
name: 'warp',
path: '/warp',
component: warp,
meta:{keepAlive:true}
}, {
name: 'grid',
path: '/grid',
component: grid,
meta:{keepAlive:true}
}, {
name: 'forms',
path: '/forms',
component: forms,
meta:{keepAlive:false}
}
] 查看全部

<!-- 这里是需要keepalive的 -->

<keep-alive>

    <router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>



<!-- 这里不会被keepalive -->

<router-view v-if="!$route.meta.keepAlive"></router-view>

?
路由设置
?

	routes: [{

			name: 'warp',

			path: '/warp',

			component: warp,

			meta:{keepAlive:true}

		}, { 

			name: 'grid',

			path: '/grid',

			component: grid,

			meta:{keepAlive:true}

		}, { 

			name: 'forms',

			path: '/forms',

			component: forms,

			meta:{keepAlive:false}

		}

	]

bsf-vue

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1805 次浏览 • 2017-01-09 01:35 • 来自相关话题

之前在coding上有开源的大狗头bootstrap 扩展
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢

bootstrap step vue版

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1772 次浏览 • 2016-12-23 01:54 • 来自相关话题

<template id="template_step">
<ul class="nav nav-pills nav-justified step" :class="[className]">
<li v-for="(n,index) in list" :class="{'active': n <= step }">
<a @click="select(index)">step{{ n }}</a>
</li>
</ul>
</template>

<div id="app" class="container">
<step :list="5" :current="2" theme="progress"></step>
<step :list="5" :current="3" theme="round"></step>
<step :list="5" :current="1" theme="square"></step>
<step :list="5" :current="2" theme="arrow"></step>
</div>

<script>
const map = {
progress:'step-progress',
round:'step-round',
square:'step-square',
arrow:'step-arrow'
}
Vue.component('step',{
template:'#template_step',
props:['list','theme','current'],
data(){
return {
step:1
}
},
computed:{
className(){
return map[this.theme]
}
},
methods:{
select(idx){
this.step = idx + 1
}
},
mounted(){
this.step = typeof this.current != undefined ? this.current : 1
}
})
new Vue({
el:'#app'
})
</script>

.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
width: 40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background-color: #f6f6f6;
border-radius: 0 5px 0 50px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: content-box;
}
.step-arrow li:not(:last-child) a:hover:after {
background-color: #00b8f5;
}
.step-arrow li a {
border-radius: 0;
color: #444444;
background-color: #f6f6f6;
}
.step-arrow li a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li a:hover:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
left: 3rem;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
top: 10px;
background: #d2d2d2;
color: #ffffff;
}
.step-arrow li.active a:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after {
background-color: #00b8f5;
}
.step-arrow li.active a,
.step-arrow li.active a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li.active a:before,
.step-arrow li.active a:hover:before {
background-color: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after,
.step-arrow li.active a:hover:after {
background-color: #00b8f5 !important;
}
.step-square {
margin-top: 40px;
}
.step-square > li:hover a:before,
.step-square > li:active a:before,
.step-square > li.active a:before {
background-color: #00b8f5;
color: #ffffff;
border-color: #00b8f5;
}
.step-square > li:hover a:after,
.step-square > li:active a:after,
.step-square > li.active a:after {
background-color: #00b8f5;
}
.step-square > li:first-child a:after {
left: 50%;
border-right: 1px solid #ffffff;
}
.step-square > li:last-child a:after {
right: 50%;
border-left: 1px solid #ffffff;
}
.step-square > li > a {
color: #ebebeb;
}
.step-square > li > a:hover {
background-color: #ffffff;
color: #00b8f5;
}
.step-square > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
background-color: #ffffff;
line-height: 20px;
border: 1px solid #ebebeb;
}
.step-square > li > a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #ebebeb;
z-index: 1;
height: 2px;
border: solid #ffffff;
border-width: 0 1px;
}
.step-square > li.active > a,
.step-square > li.active > a:focus,
.step-square > li.active > a:hover {
color: #00b8f5;
background: transparent;
}
.step-round {
margin-top: 40px;
}
.step-round > li:first-child > a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round > li:last-child > a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
.step-round > li.active > a,
.step-round > li.active > a:hover,
.step-round > li.active > a:focus {
background: transparent;
color: #00b8f5;
}
.step-round > li.active > a:before,
.step-round > li.active > a:hover:before,
.step-round > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li.active > a:after,
.step-round > li.active > a:hover:after,
.step-round > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-round > li > a {
color: #ebebeb;
}
.step-round > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-round > li > a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #ebebeb;
z-index: 1;
height: 8px;
}
.step-round > li > a:after:after {
background-color: #00b8f5;
}
.step-round > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-round > li > a:hover:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress {
margin-top: 60px;
}
.step-progress > li > a {
color: #ebebeb;
padding-top: 1.8rem;
}
.step-progress > li > a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-progress > li > a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #ebebeb;
float: left;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.step-progress > li > a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-progress > li > a:hover:before {
color: #ffffff;
background-color: #00b8f5;
}
.step-progress > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress > li.active > a,
.step-progress > li.active > a:hover,
.step-progress > li.active > a:focus {
color: #00b8f5;
background: transparent;
}
.step-progress > li.active > a:before,
.step-progress > li.active > a:hover:before,
.step-progress > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-progress > li.active > a:after,
.step-progress > li.active > a:hover:after,
.step-progress > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-progress > li.active > a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress > li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress > li:last-child a:after {
border-radius: 0 5px 5px 0;
}
/*step-progress*/

在哪遥远的地方有个预览地址查看全部

<template id="template_step">

  <ul class="nav nav-pills nav-justified step" :class="[className]">

				<li v-for="(n,index) in list" :class="{'active': n <= step }">

					<a @click="select(index)">step{{ n }}</a>

				</li>

			</ul>

</template>



<div id="app" class="container">

  <step :list="5" :current="2" theme="progress"></step>

  <step :list="5" :current="3" theme="round"></step>

  <step :list="5" :current="1" theme="square"></step>

  <step :list="5" :current="2" theme="arrow"></step>

</div>

<script>

const map = {

	progress:'step-progress',

  round:'step-round',

  square:'step-square',

  arrow:'step-arrow'

}

Vue.component('step',{

	template:'#template_step',

  props:['list','theme','current'],

  data(){

  	return {

    	step:1

    }

  },

  computed:{  	

  	className(){

			return map[this.theme]    	

    }    

  },

  methods:{

    select(idx){

    	this.step = idx + 1

    }

  },

  mounted(){

  	this.step = typeof this.current != undefined ? this.current : 1

  }

})

new Vue({

	el:'#app'

})

</script>



.step {

  counter-reset: flag;

}

.step li {

  position: relative;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a {

  cursor: pointer;

  padding: 10px 15px;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a:before {

  content: counter(flag);

  counter-increment: flag;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a:after {

  content: "";

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step-arrow {

  margin: 20px 0;

}

.step-arrow.unhover li a:hover,

.step-arrow.unhover li a:focus {

  background-color: #f6f6f6;

  color: #444444;

}

.step-arrow.unhover li a:hover:before,

.step-arrow.unhover li a:focus:before {

  background-color: #d2d2d2;

  color: #ffffff;

}

.step-arrow.unhover li:not(:last-child) a:hover:after,

.step-arrow.unhover li:not(:last-child) a:focus:after {

  background-color: #f6f6f6;

}

.step-arrow li {

  padding-right: 20px;

}

.step-arrow li:last-child {

  padding-right: 0;

}

.step-arrow li:nth-child(n+2) a {

  margin-left: -20px;

  border-radius: 0;

}

.step-arrow li:not(:last-child) a:after {

  position: absolute;

  top: -1px;

  right: -20px;

  width: 40px;

  height: 40px;

  transform: scale(0.707) rotate(45deg);

  z-index: 1;

  background-color: #f6f6f6;

  border-radius: 0 5px 0 50px;

  border-top: 1px solid #ffffff;

  border-right: 1px solid #ffffff;

  box-sizing: content-box;

}

.step-arrow li:not(:last-child) a:hover:after {

  background-color: #00b8f5;

}

.step-arrow li a {

  border-radius: 0;

  color: #444444;

  background-color: #f6f6f6;

}

.step-arrow li a:hover {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-arrow li a:hover:before {

  background: #ffffff;

  color: #00b8f5;

}

.step-arrow li a:before {

  position: absolute;

  z-index: 2;

  width: 20px;

  height: 20px;

  line-height: 20px;

  border-radius: 20px;

  left: 3rem;

  font-weight: bold;

  font-size: 1rem;

  overflow: hidden;

  top: 10px;

  background: #d2d2d2;

  color: #ffffff;

}

.step-arrow li.active a:before {

  background: #ffffff;

  color: #00b8f5;

}

.step-arrow li.active a:after {

  background-color: #00b8f5;

}

.step-arrow li.active a,

.step-arrow li.active a:hover {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-arrow li.active a:before,

.step-arrow li.active a:hover:before {

  background-color: #ffffff;

  color: #00b8f5;

}

.step-arrow li.active a:after,

.step-arrow li.active a:hover:after {

  background-color: #00b8f5 !important;

}

.step-square {

  margin-top: 40px;

}

.step-square > li:hover a:before,

.step-square > li:active a:before,

.step-square > li.active a:before {

  background-color: #00b8f5;

  color: #ffffff;

  border-color: #00b8f5;

}

.step-square > li:hover a:after,

.step-square > li:active a:after,

.step-square > li.active a:after {

  background-color: #00b8f5;

}

.step-square > li:first-child a:after {

  left: 50%;

  border-right: 1px solid #ffffff;

}

.step-square > li:last-child a:after {

  right: 50%;

  border-left: 1px solid #ffffff;

}

.step-square > li > a {

  color: #ebebeb;

}

.step-square > li > a:hover {

  background-color: #ffffff;

  color: #00b8f5;

}

.step-square > li > a:before {

  position: absolute;

  z-index: 2;

  top: -2rem;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  background-color: #ffffff;

  line-height: 20px;

  border: 1px solid #ebebeb;

}

.step-square > li > a:after {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: -35%;

  background-color: #ebebeb;

  z-index: 1;

  height: 2px;

  border: solid #ffffff;

  border-width: 0 1px;

}

.step-square > li.active > a,

.step-square > li.active > a:focus,

.step-square > li.active > a:hover {

  color: #00b8f5;

  background: transparent;

}

.step-round {

  margin-top: 40px;

}

.step-round > li:first-child > a:after {

  left: 30%;

  border-radius: 5px 0 0 5px;

}

.step-round > li:last-child > a:after {

  right: 30%;

  border-radius: 0 5px 5px 0;

}

.step-round > li.active > a,

.step-round > li.active > a:hover,

.step-round > li.active > a:focus {

  background: transparent;

  color: #00b8f5;

}

.step-round > li.active > a:before,

.step-round > li.active > a:hover:before,

.step-round > li.active > a:focus:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-round > li.active > a:after,

.step-round > li.active > a:hover:after,

.step-round > li.active > a:focus:after {

  background-color: #00b8f5;

}

.step-round > li > a {

  color: #ebebeb;

}

.step-round > li > a:before {

  position: absolute;

  z-index: 2;

  top: -2rem;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  background-color: #ffffff;

  line-height: 2rem;

  box-shadow: 0 0 0 5px #ebebeb;

}

.step-round > li > a:after {

  position: absolute;

  left: 0;

  right: 0;

  top: -38%;

  background-color: #ebebeb;

  z-index: 1;

  height: 8px;

}

.step-round > li > a:after:after {

  background-color: #00b8f5;

}

.step-round > li > a:hover {

  background: transparent;

  color: #00b8f5;

}

.step-round > li > a:hover:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-round > li > a:hover:after {

  background-color: #00b8f5;

}

.step-progress {

  margin-top: 60px;

}

.step-progress > li > a {

  color: #ebebeb;

  padding-top: 1.8rem;

}

.step-progress > li > a:before {

  position: absolute;

  z-index: 2;

  top: -35px;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  line-height: 2rem;

  box-shadow: 0 0 0 5px #ebebeb;

}

.step-progress > li > a:after {

  content: "";

  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));

  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));

  -webkit-background-size: 40px 40px;

  background-size: 40px 40px;

  background-color: #ebebeb;

  float: left;

  width: 100%;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 10px;

  transition: all 0.5s ease-in-out;

  -webkit-transition: all 0.5s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

}

.step-progress > li > a span.caret {

  position: absolute;

  left: 0;

  right: 0;

  margin: 0 auto;

  transform: rotate(180deg);

  top: -4px;

}

.step-progress > li > a:hover {

  background: transparent;

  color: #00b8f5;

}

.step-progress > li > a:hover:before {

  color: #ffffff;

  background-color: #00b8f5;

}

.step-progress > li > a:hover:after {

  background-color: #00b8f5;

}

.step-progress > li.active > a,

.step-progress > li.active > a:hover,

.step-progress > li.active > a:focus {

  color: #00b8f5;

  background: transparent;

}

.step-progress > li.active > a:before,

.step-progress > li.active > a:hover:before,

.step-progress > li.active > a:focus:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-progress > li.active > a:after,

.step-progress > li.active > a:hover:after,

.step-progress > li.active > a:focus:after {

  background-color: #00b8f5;

}

.step-progress > li.active > a:after {

  -webkit-animation: progress-bar-stripes 2s linear infinite;

  -o-animation: progress-bar-stripes 2s linear infinite;

  animation: progress-bar-stripes 2s linear infinite;

}

.step-progress > li:first-child a:after {

  border-radius: 5px 0 0 5px;

}

.step-progress > li:last-child a:after {

  border-radius: 0 5px 5px 0;

}

/*step-progress*/

在哪遥远的地方有个预览地址

bootstrap step 插件更新

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2609 次浏览 • 2016-12-16 01:57 • 来自相关话题

$(function() {
bsStep();
//bsStep(i) i 为number 可定位到第几步如bsStep(2)/bsStep(3)
})? ? ? ?描述：
? ? ? ?1. ?css.less 主色调蓝色修改@ces /背景色修改@cc2
? ? ? ?2. ?更新为less 书写的css 方便定制
? ? ? ?3. ?请便以为css后上线
? ? ? ?在线预览
?
死靓仔点击下面下载查看全部

			$(function() {

				bsStep();

				//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)

			})

? ? ? ?描述：
? ? ? ?1. ?css.less 主色调蓝色修改@ces /背景色修改@cc2
? ? ? ?2. ?更新为less 书写的css 方便定制
? ? ? ?3. ?请便以为css后上线
? ? ? ?在线预览
?
死靓仔点击下面下载

bootstrap 3.x +vue 2.x 饿了么pc端导航模拟

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2089 次浏览 • 2016-12-08 22:48 • 来自相关话题

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style>
.nav>li>a {
border-radius: 0;
cursor: pointer;
color: #101010;
}

#pmenu a {
cursor: pointer;
}

#pmenu .active a {
background-color: lightgrey;
color: #080808;
border-radius: 0;
}

#cmenu {
background-color: lightgrey;
}

#cmenu li {
padding: 10px 5px;
}

#cmenu .active a {}
</style>
</head>

<body>
<div id="app">
<topnav></topnav>
</div>

<template id="topnav-comp">
<div>
<ul class="nav nav-pills nav-justified" id="pmenu">
<li v-for="(nav,index) in navlist" :class="{active:iscurP==index}" @click="iscurP=index">
<a @click="getChild(index)">{{nav.name}}</a>
</li>
</ul>
<ul class="nav nav-pills" id="cmenu">
<li v-for="(navc,index) in navchild" :class="{active:iscurC==index}" @click="iscurC=index">
<a>{{navc.name}}</a>
</li>
</ul>
</div>
</template>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script>
Vue.component('topnav', {
template: '#topnav-comp',
data: function() {
return {
iscurP: 0,
iscurC: 0,
navlist: [],
navchild: []
}
},
methods: {
getNavlist: function() {
var self = this
$.ajax({
url: 'data/navlist.json',
type: 'get',
async: false,
dataType: "json",
success: function(data) {
self.navlist = data;
},
error: function() {
console.log('%c 数据加载失败,请检查数据是否存在', 'background: #222; color: #bada55')
}
});
},
getChild: function(index) {
this.navchild = this.navlist[index].sub_categories;
this.iscurC = 0
}
},
mounted: function() {},
created: function() {
this.getNavlist();
}
});
vm = new Vue({
el: "#app"
})
</script>
</body>

</htm 查看全部

<!DOCTYPE html>

<html>



	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

		<style>

			.nav>li>a {

				border-radius: 0;

				cursor: pointer;

				color: #101010;

			}

			

			#pmenu a {

				cursor: pointer;

			}

			

			#pmenu .active a {

				background-color: lightgrey;

				color: #080808;

				border-radius: 0;

			}

			

			#cmenu {

				background-color: lightgrey;

			}

			

			#cmenu li {

				padding: 10px 5px;

			}

			

			#cmenu .active a {}

		</style>

	</head>



	<body>

		<div id="app">

			<topnav></topnav>

		</div>

		<!--template-->

		<template id="topnav-comp">

			<div>

				<ul class="nav nav-pills nav-justified" id="pmenu">

					<li v-for="(nav,index) in navlist" :class="{active:iscurP==index}" @click="iscurP=index">

						<a @click="getChild(index)">{{nav.name}}</a>

					</li>

				</ul>

				<ul class="nav nav-pills" id="cmenu">

					<li v-for="(navc,index) in navchild" :class="{active:iscurC==index}" @click="iscurC=index">

						<a>{{navc.name}}</a>

					</li>

				</ul>

			</div>

		</template>

		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>

		<script type="text/javascript" src="js/vue.js"></script>

		<script>

			Vue.component('topnav', {

				template: '#topnav-comp',

				data: function() {

					return {

						iscurP: 0,

						iscurC: 0,

						navlist: [],

						navchild: []

					}

				},

				methods: {

					getNavlist: function() {

						var self = this

						$.ajax({

							url: 'data/navlist.json',

							type: 'get',

							async: false,

							dataType: "json",

							success: function(data) {

								self.navlist = data;

							},

							error: function() {

								console.log('%c 数据加载失败,请检查数据是否存在', 'background: #222; color: #bada55')

							}

						});

					},

					getChild: function(index) {

						this.navchild = this.navlist[index].sub_categories;

						this.iscurC = 0

					}

				},

				mounted: function() {},

				created: function() {

					this.getNavlist();

				}

			});

			vm = new Vue({

				el: "#app"

			})

		</script>

	</body>



	</htm

bootstrap 基础css 问题集锦

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1894 次浏览 • 2016-11-24 10:02 • 来自相关话题

1.Q:部分手机在bootstrap设置了input-lg 设置后会导致option 错位情况
A: 设置该元素css属性
line-height：normal

1.Q:部分手机在bootstrap设置了input-lg 设置后会导致option 错位情况
A: 设置该元素css属性

line-height：normal

可拖拽Modal

bootstrap3.x • lopo1983 发表了文章 • 1 个评论 • 2098 次浏览 • 2016-09-12 15:50 • 来自相关话题

<script src="//cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.js"></script>



$(document).on('show.bs.modal','.modal', function() {

?? ?$.fn.draggable && $('.modal-content',this).draggable({

?? ??? ?containment: 'document',

?? ??? ?scroll: false,

?? ??? ?handle: '.modal-header'

?? ?});

?? ?

?? ?$('.modal-dialog',this).css({

?? ??? ?position:'absolute',

?? ??? ?top:'50%',

?? ??? ?left:'50%',

?? ??? ?transform: 'translate(-50%, -50%)'

?? ?})

})

戏子大爷提供?预览地址
?

bootstrap modal 相关问题集锦！

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2271 次浏览 • 2016-01-13 11:35 • 来自相关话题

Q:Modal 点击后仅显示黑色半透背景而modalbody 主题在其背面？
源文件库是否与API 一致插件加载过多冲突JQ版本过低？？（本人未作验证真实性有待考究）
Q：modal 如何设置点击除modal主体外其他地方不关闭modal

这个问题其实API 有说明只是是英文的而且bootcss也未能详细的翻译该节点
实现方法
方法1$('#myModal').modal({
keyboard: false;//禁用键盘ESC 关闭
backdrop: false;//禁用非modal外半透背景点击关闭
})方法2data-backdrop="false"(html5 data 调用)

Q:在Modal中使用datepicker 错位?(该章节由戏子提供)
bootcss上未注明该插件的container用法(大多数人知晓这个插件也源自该网站)
而官方的API中是这么说的:container
String. Default: “body”
Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)示例如下:
html<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 17px;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group" style="position:relative;">
<label for="exampleInputEmail1">Datetimepicker</label>
<input type="text" class="form-control" id="datetimepicker">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>js $(function() {
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
container : '#myModal .form-group'
});
}); 查看全部

Q:Modal 点击后仅显示黑色半透背景而modalbody 主题在其背面？

源文件库是否与API 一致
插件加载过多冲突
JQ版本过低？？（本人未作验证真实性有待考究）

Q：modal 如何设置点击除modal主体外其他地方不关闭modal

这个问题其实API 有说明只是是英文的而且bootcss也未能详细的翻译该节点
实现方法
方法1

$('#myModal').modal({

  keyboard: false;//禁用键盘ESC 关闭

  backdrop: false;//禁用非modal外半透背景点击关闭

})

方法2

data-backdrop="false"(html5 data 调用)

Q:在Modal中使用datepicker 错位?(该章节由戏子提供)
bootcss上未注明该插件的container用法(大多数人知晓这个插件也源自该网站)
而官方的API中是这么说的:

container

String. Default: “body”

Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)

示例如下:
html

<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 17px;">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>

                <div class="modal-body">

                    <form>

                        <div class="form-group" style="position:relative;">

                            <label for="exampleInputEmail1">Datetimepicker</label>

                            <input type="text" class="form-control" id="datetimepicker">

                    </form>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>

            </div>

        </div>

    </div>

    $(function() {

        $('#datetimepicker').datetimepicker({

        	format: 'yyyy-mm-dd hh:ii',

        	container : '#myModal .form-group'

        });

    });

bs3.x dropdown 改写hover 触发

bootstrap3.x • lopo1983 发表了文章 • 1 个评论 • 2391 次浏览 • 2016-01-06 17:09 • 来自相关话题

$('[data-toggle="dropdown"]').each(function() {
var $this = $(this),
$parent = $this.parent();
$this.off('click.dropdown.data-api');
$parent.hover(function() {
$this.dropdown('toggle');
});
}); 查看全部

				$('[data-toggle="dropdown"]').each(function() {

					var $this = $(this),

						$parent = $this.parent();

					$this.off('click.dropdown.data-api');

					$parent.hover(function() {

						$this.dropdown('toggle');

					});

				});

vue 验证码倒计时（jq vs vue）

VUE • lopo1983 发表了文章 • 0 个评论 • 1728 次浏览 • 2017-06-26 12:45 • 来自相关话题

短信验证现在是市面上比较流行的一种验证方式，最近公司的项目有涉及到故整体如下

?
JQ版本
?
js

sendMsm: function(wait, objectb) {

	var time = wait;

	if(time == 0) {

		$(objectb).removeAttr("disabled");

		$(objectb).text("获取验证码");

		$(objectb).removeClass('hidden');

		$(objectb).next().addClass('hidden');

		time = wait;

	} else {

		$(objectb).attr("disabled", true);

		$(objectb).addClass('hidden');

		$(objectb).next().removeClass('hidden').text(time + " s 后重发");

		time--;

		setTimeout(function() {

			qdcms.sendMsm(time, objectb);

		}, 1000)

	}

}

html

<a class="btn btn-black" onclick="qdcms.getcode(60,this)">获取验证码</a>

<span class="btn btn-black disabled hidden"></span>

css
VBAdmin-UI
?
预览地址：https://www.tfstock.com.cn/?点击注册按钮
?
?
Vue 实现
?
template

<template>

	<button class="timerout" :disabled="disabled || time > 0" @click='run'>

        {{ text }}

    </button>

</template>

script

<script>

	export default {

		name: 'timerbtn',

		props: {

			second: {

				type: Number,

				default: 60

			},

			disabled: {

				type: Boolean,

				default: false

			}

		},

		data: function() {

			return {

				time: 0

			}

		},

		methods: {

			run() {

				this.time = this.second;

				this.timer();

			},

			timer() {

				if(this.time > 0) {

					this.time--;

					setTimeout(this.timer, 1000);

				}

			}

		},

		computed: {

			text() {

				return this.time > 0 ? this.time + 's 后重新获取' : '点击获取验证码';

			}

		},

		mounted: function() {



		}



	}

</script>

style
css ?VBAdmin-UI

<style lang="less">

	@import (reference) "../../../assets/lib/css.less";

	.timerout:disabled {

		&,

		&:hover,

		&:focus {

			.bgc(@cbla);

			color: @cwh;

		}

	}

</style>

?
下载地址如下：

关于组件和ui收集的想法

vbadmin-ui • lopo1983 发表了文章 • 2 个评论 • 1506 次浏览 • 2017-06-01 20:35 • 来自相关话题

Bootstrap+Masonry+imagesLoaded 快速实现瀑布流

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2338 次浏览 • 2017-05-04 16:53 • 来自相关话题

html

<div id="masonry" class="container-fluid">

 

    <div class="thumbnail">

        <div class="imgs">

            <img src="" />

        </div>

        <div class="caption">

            <div class="title"></div>

            <div class="content">

                 

            </div>

        </div>

    </div>

     

</div>

css

<script>

    $(function() {

     

        var masonryNode = $('#masonry');

        masonryNode.imagesLoaded(function(){

            masonryNode.masonry({

                itemSelector: '.thumbnail',

                isFitWidth: true

            });

        });

         

         

    });

</script>

// 首先将新元素添加到页面容器中

 

masonryNode.append(newItems);

// 等待新元素中的图片加载完毕

newItems.imagesLoaded(function(){

 

// 调用瀑布流布局的appended方法

    masonryNode.masonry('appended',  newItems);

});

$(window).scroll(function() {

                 

    if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

         

        if(!imagesLoading) {

            appendToMasonry();

        }

         

    }

     

});

masonry官网

vue 路由keep-alive

javascript/jQuery • lopo1983 发表了文章 • 0 个评论 • 1861 次浏览 • 2017-01-14 22:17 • 来自相关话题

<!-- 这里是需要keepalive的 -->

<keep-alive>

    <router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>



<!-- 这里不会被keepalive -->

<router-view v-if="!$route.meta.keepAlive"></router-view>

?
路由设置
?

	routes: [{

			name: 'warp',

			path: '/warp',

			component: warp,

			meta:{keepAlive:true}

		}, { 

			name: 'grid',

			path: '/grid',

			component: grid,

			meta:{keepAlive:true}

		}, { 

			name: 'forms',

			path: '/forms',

			component: forms,

			meta:{keepAlive:false}

		}

	]

bsf-vue

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1805 次浏览 • 2017-01-09 01:35 • 来自相关话题

之前在coding上有开源的大狗头bootstrap 扩展
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢

bootstrap step vue版

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1772 次浏览 • 2016-12-23 01:54 • 来自相关话题

<template id="template_step">

  <ul class="nav nav-pills nav-justified step" :class="[className]">

				<li v-for="(n,index) in list" :class="{'active': n <= step }">

					<a @click="select(index)">step{{ n }}</a>

				</li>

			</ul>

</template>



<div id="app" class="container">

  <step :list="5" :current="2" theme="progress"></step>

  <step :list="5" :current="3" theme="round"></step>

  <step :list="5" :current="1" theme="square"></step>

  <step :list="5" :current="2" theme="arrow"></step>

</div>

<script>

const map = {

	progress:'step-progress',

  round:'step-round',

  square:'step-square',

  arrow:'step-arrow'

}

Vue.component('step',{

	template:'#template_step',

  props:['list','theme','current'],

  data(){

  	return {

    	step:1

    }

  },

  computed:{  	

  	className(){

			return map[this.theme]    	

    }    

  },

  methods:{

    select(idx){

    	this.step = idx + 1

    }

  },

  mounted(){

  	this.step = typeof this.current != undefined ? this.current : 1

  }

})

new Vue({

	el:'#app'

})

</script>



.step {

  counter-reset: flag;

}

.step li {

  position: relative;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a {

  cursor: pointer;

  padding: 10px 15px;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a:before {

  content: counter(flag);

  counter-increment: flag;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a:after {

  content: "";

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step-arrow {

  margin: 20px 0;

}

.step-arrow.unhover li a:hover,

.step-arrow.unhover li a:focus {

  background-color: #f6f6f6;

  color: #444444;

}

.step-arrow.unhover li a:hover:before,

.step-arrow.unhover li a:focus:before {

  background-color: #d2d2d2;

  color: #ffffff;

}

.step-arrow.unhover li:not(:last-child) a:hover:after,

.step-arrow.unhover li:not(:last-child) a:focus:after {

  background-color: #f6f6f6;

}

.step-arrow li {

  padding-right: 20px;

}

.step-arrow li:last-child {

  padding-right: 0;

}

.step-arrow li:nth-child(n+2) a {

  margin-left: -20px;

  border-radius: 0;

}

.step-arrow li:not(:last-child) a:after {

  position: absolute;

  top: -1px;

  right: -20px;

  width: 40px;

  height: 40px;

  transform: scale(0.707) rotate(45deg);

  z-index: 1;

  background-color: #f6f6f6;

  border-radius: 0 5px 0 50px;

  border-top: 1px solid #ffffff;

  border-right: 1px solid #ffffff;

  box-sizing: content-box;

}

.step-arrow li:not(:last-child) a:hover:after {

  background-color: #00b8f5;

}

.step-arrow li a {

  border-radius: 0;

  color: #444444;

  background-color: #f6f6f6;

}

.step-arrow li a:hover {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-arrow li a:hover:before {

  background: #ffffff;

  color: #00b8f5;

}

.step-arrow li a:before {

  position: absolute;

  z-index: 2;

  width: 20px;

  height: 20px;

  line-height: 20px;

  border-radius: 20px;

  left: 3rem;

  font-weight: bold;

  font-size: 1rem;

  overflow: hidden;

  top: 10px;

  background: #d2d2d2;

  color: #ffffff;

}

.step-arrow li.active a:before {

  background: #ffffff;

  color: #00b8f5;

}

.step-arrow li.active a:after {

  background-color: #00b8f5;

}

.step-arrow li.active a,

.step-arrow li.active a:hover {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-arrow li.active a:before,

.step-arrow li.active a:hover:before {

  background-color: #ffffff;

  color: #00b8f5;

}

.step-arrow li.active a:after,

.step-arrow li.active a:hover:after {

  background-color: #00b8f5 !important;

}

.step-square {

  margin-top: 40px;

}

.step-square > li:hover a:before,

.step-square > li:active a:before,

.step-square > li.active a:before {

  background-color: #00b8f5;

  color: #ffffff;

  border-color: #00b8f5;

}

.step-square > li:hover a:after,

.step-square > li:active a:after,

.step-square > li.active a:after {

  background-color: #00b8f5;

}

.step-square > li:first-child a:after {

  left: 50%;

  border-right: 1px solid #ffffff;

}

.step-square > li:last-child a:after {

  right: 50%;

  border-left: 1px solid #ffffff;

}

.step-square > li > a {

  color: #ebebeb;

}

.step-square > li > a:hover {

  background-color: #ffffff;

  color: #00b8f5;

}

.step-square > li > a:before {

  position: absolute;

  z-index: 2;

  top: -2rem;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  background-color: #ffffff;

  line-height: 20px;

  border: 1px solid #ebebeb;

}

.step-square > li > a:after {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: -35%;

  background-color: #ebebeb;

  z-index: 1;

  height: 2px;

  border: solid #ffffff;

  border-width: 0 1px;

}

.step-square > li.active > a,

.step-square > li.active > a:focus,

.step-square > li.active > a:hover {

  color: #00b8f5;

  background: transparent;

}

.step-round {

  margin-top: 40px;

}

.step-round > li:first-child > a:after {

  left: 30%;

  border-radius: 5px 0 0 5px;

}

.step-round > li:last-child > a:after {

  right: 30%;

  border-radius: 0 5px 5px 0;

}

.step-round > li.active > a,

.step-round > li.active > a:hover,

.step-round > li.active > a:focus {

  background: transparent;

  color: #00b8f5;

}

.step-round > li.active > a:before,

.step-round > li.active > a:hover:before,

.step-round > li.active > a:focus:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-round > li.active > a:after,

.step-round > li.active > a:hover:after,

.step-round > li.active > a:focus:after {

  background-color: #00b8f5;

}

.step-round > li > a {

  color: #ebebeb;

}

.step-round > li > a:before {

  position: absolute;

  z-index: 2;

  top: -2rem;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  background-color: #ffffff;

  line-height: 2rem;

  box-shadow: 0 0 0 5px #ebebeb;

}

.step-round > li > a:after {

  position: absolute;

  left: 0;

  right: 0;

  top: -38%;

  background-color: #ebebeb;

  z-index: 1;

  height: 8px;

}

.step-round > li > a:after:after {

  background-color: #00b8f5;

}

.step-round > li > a:hover {

  background: transparent;

  color: #00b8f5;

}

.step-round > li > a:hover:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-round > li > a:hover:after {

  background-color: #00b8f5;

}

.step-progress {

  margin-top: 60px;

}

.step-progress > li > a {

  color: #ebebeb;

  padding-top: 1.8rem;

}

.step-progress > li > a:before {

  position: absolute;

  z-index: 2;

  top: -35px;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  line-height: 2rem;

  box-shadow: 0 0 0 5px #ebebeb;

}

.step-progress > li > a:after {

  content: "";

  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));

  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));

  -webkit-background-size: 40px 40px;

  background-size: 40px 40px;

  background-color: #ebebeb;

  float: left;

  width: 100%;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 10px;

  transition: all 0.5s ease-in-out;

  -webkit-transition: all 0.5s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

}

.step-progress > li > a span.caret {

  position: absolute;

  left: 0;

  right: 0;

  margin: 0 auto;

  transform: rotate(180deg);

  top: -4px;

}

.step-progress > li > a:hover {

  background: transparent;

  color: #00b8f5;

}

.step-progress > li > a:hover:before {

  color: #ffffff;

  background-color: #00b8f5;

}

.step-progress > li > a:hover:after {

  background-color: #00b8f5;

}

.step-progress > li.active > a,

.step-progress > li.active > a:hover,

.step-progress > li.active > a:focus {

  color: #00b8f5;

  background: transparent;

}

.step-progress > li.active > a:before,

.step-progress > li.active > a:hover:before,

.step-progress > li.active > a:focus:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-progress > li.active > a:after,

.step-progress > li.active > a:hover:after,

.step-progress > li.active > a:focus:after {

  background-color: #00b8f5;

}

.step-progress > li.active > a:after {

  -webkit-animation: progress-bar-stripes 2s linear infinite;

  -o-animation: progress-bar-stripes 2s linear infinite;

  animation: progress-bar-stripes 2s linear infinite;

}

.step-progress > li:first-child a:after {

  border-radius: 5px 0 0 5px;

}

.step-progress > li:last-child a:after {

  border-radius: 0 5px 5px 0;

}

/*step-progress*/

在哪遥远的地方有个预览地址

bootstrap step 插件更新

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2609 次浏览 • 2016-12-16 01:57 • 来自相关话题

			$(function() {

				bsStep();

				//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)

			})

bootstrap 3.x +vue 2.x 饿了么pc端导航模拟

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2089 次浏览 • 2016-12-08 22:48 • 来自相关话题

<!DOCTYPE html>

<html>



	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

		<style>

			.nav>li>a {

				border-radius: 0;

				cursor: pointer;

				color: #101010;

			}

			

			#pmenu a {

				cursor: pointer;

			}

			

			#pmenu .active a {

				background-color: lightgrey;

				color: #080808;

				border-radius: 0;

			}

			

			#cmenu {

				background-color: lightgrey;

			}

			

			#cmenu li {

				padding: 10px 5px;

			}

			

			#cmenu .active a {}

		</style>

	</head>



	<body>

		<div id="app">

			<topnav></topnav>

		</div>

		<!--template-->

		<template id="topnav-comp">

			<div>

				<ul class="nav nav-pills nav-justified" id="pmenu">

					<li v-for="(nav,index) in navlist" :class="{active:iscurP==index}" @click="iscurP=index">

						<a @click="getChild(index)">{{nav.name}}</a>

					</li>

				</ul>

				<ul class="nav nav-pills" id="cmenu">

					<li v-for="(navc,index) in navchild" :class="{active:iscurC==index}" @click="iscurC=index">

						<a>{{navc.name}}</a>

					</li>

				</ul>

			</div>

		</template>

		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>

		<script type="text/javascript" src="js/vue.js"></script>

		<script>

			Vue.component('topnav', {

				template: '#topnav-comp',

				data: function() {

					return {

						iscurP: 0,

						iscurC: 0,

						navlist: [],

						navchild: []

					}

				},

				methods: {

					getNavlist: function() {

						var self = this

						$.ajax({

							url: 'data/navlist.json',

							type: 'get',

							async: false,

							dataType: "json",

							success: function(data) {

								self.navlist = data;

							},

							error: function() {

								console.log('%c 数据加载失败,请检查数据是否存在', 'background: #222; color: #bada55')

							}

						});

					},

					getChild: function(index) {

						this.navchild = this.navlist[index].sub_categories;

						this.iscurC = 0

					}

				},

				mounted: function() {},

				created: function() {

					this.getNavlist();

				}

			});

			vm = new Vue({

				el: "#app"

			})

		</script>

	</body>



	</htm

bootstrap 基础css 问题集锦

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1894 次浏览 • 2016-11-24 10:02 • 来自相关话题

1.Q:部分手机在bootstrap设置了input-lg 设置后会导致option 错位情况
A: 设置该元素css属性
line-height：normal

1.Q:部分手机在bootstrap设置了input-lg 设置后会导致option 错位情况
A: 设置该元素css属性

line-height：normal

可拖拽Modal

bootstrap3.x • lopo1983 发表了文章 • 1 个评论 • 2098 次浏览 • 2016-09-12 15:50 • 来自相关话题

<script src="//cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.js"></script>



$(document).on('show.bs.modal','.modal', function() {

?? ?$.fn.draggable && $('.modal-content',this).draggable({

?? ??? ?containment: 'document',

?? ??? ?scroll: false,

?? ??? ?handle: '.modal-header'

?? ?});

?? ?

?? ?$('.modal-dialog',this).css({

?? ??? ?position:'absolute',

?? ??? ?top:'50%',

?? ??? ?left:'50%',

?? ??? ?transform: 'translate(-50%, -50%)'

?? ?})

})

戏子大爷提供?预览地址
?

更多...

vue 验证码倒计时（jq vs vue）

关于组件和ui收集的想法

Bootstrap+Masonry+imagesLoaded 快速实现瀑布流

vue 路由keep-alive

bsf-vue

bootstrap step vue版

bootstrap step 插件更新

bootstrap 3.x +vue 2.x 饿了么pc端导航模拟

bootstrap 基础css 问题集锦

可拖拽Modal

vue 验证码倒计时（jq vs vue）

关于组件和ui收集的想法

Bootstrap+Masonry+imagesLoaded 快速实现瀑布流

vue 路由keep-alive

bsf-vue

bootstrap step vue版

bootstrap step 插件更新

bootstrap 3.x +vue 2.x 饿了么pc端导航模拟

bootstrap 基础css 问题集锦

可拖拽Modal

话题描述

相关话题

最佳回复者

18 人关注该话题