node

node

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
javascript/jQuery

javascript/jQuery

一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
MongoDB

MongoDB

MongoDB 是一个基于分布式文件存储的数据库
openstack

openstack

OpenStack是一个由NASA(美国国家航空航天局)和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。
VUE

VUE

一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
bootstrap

bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
HTML

HTML

超文本标记语言,标准通用标记语言下的一个应用。
CSS/SASS/SCSS/Less

CSS/SASS/SCSS/Less

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
PHP

PHP

PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,执行效率比完全生成HTML标记的CGI要高许多;PHP还可以执
每天进步一点点

每天进步一点点

乌法把门的各累笑寂静
求职招聘

求职招聘

猎头招聘专用栏目
Python

Python

一种解释型、面向对象、动态数据类型的高级程序设计语言。

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

lopo1983 发表了文章 • 0 个评论 • 2317 次浏览 • 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官网

捐献专用

lopo1983 发表了文章 • 0 个评论 • 2237 次浏览 • 2017-02-17 16:20 • 来自相关话题

捐献主要用于群和网站相关费用开支 相关开支 将以透明的方式发布出来

除去开支外若有结余? 将展开各种活动以各种书籍 谢谢大家支持?
?
捐献后请私聊我 并截图捐献信息 我将列入以下列表
?















排名 不分先后
2017 年度
熊猫 ¥?1.00
雪原 ¥?1.00
美人鱼 ¥?1.00
大头 ¥?1.00
小妖 ¥?1.00
戏子 ¥?1.00
LYa0 ¥?1.00
pp ¥?1.00
柏龙 ¥?1.00
帮主 ¥6.00
小妖 ¥5.00
重庆小付 ¥5.55
大师傅 ?¥66.66
轮子 ?¥8.88
龙柏 ¥ 6.66
成都-尤里 ¥13.00
深圳糖糖 ¥2.00
天津-菜鸟笑画 ¥5.00
成都-银子 ¥6.66
成都-kris ¥6.66
广东-翔子 ¥8.88
?
2018 查看全部
捐献主要用于群和网站相关费用开支 相关开支 将以透明的方式发布出来

除去开支外若有结余? 将展开各种活动以各种书籍 谢谢大家支持?
?
捐献后请私聊我 并截图捐献信息 我将列入以下列表
?
629234185569915761.jpg


704571490366060626.jpg


230560633606015006.jpg


排名 不分先后
2017 年度
熊猫 ¥?1.00
雪原 ¥?1.00
美人鱼 ¥?1.00
大头 ¥?1.00
小妖 ¥?1.00
戏子 ¥?1.00
LYa0 ¥?1.00
pp ¥?1.00
柏龙 ¥?1.00
帮主 ¥6.00
小妖 ¥5.00
重庆小付 ¥5.55
大师傅 ?¥66.66
轮子 ?¥8.88
龙柏 ¥ 6.66
成都-尤里 ¥13.00
深圳糖糖 ¥2.00
天津-菜鸟笑画 ¥5.00
成都-银子 ¥6.66
成都-kris ¥6.66
广东-翔子 ¥8.88
?
2018

bsf-vue

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

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

bootstrap step vue版

lopo1983 发表了文章 • 0 个评论 • 1752 次浏览 • 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 插件更新

lopo1983 发表了文章 • 0 个评论 • 2587 次浏览 • 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端导航模拟

lopo1983 发表了文章 • 0 个评论 • 2064 次浏览 • 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 查看全部
<!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 问题集锦

lopo1983 发表了文章 • 0 个评论 • 1877 次浏览 • 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

jquery-ui-autocomplete+Bootstrap modal 层级问题

lopo1983 发表了文章 • 0 个评论 • 2141 次浏览 • 2016-08-22 11:27 • 来自相关话题

.ui-autocomplete{
display:block;
z-index:99999;
}
.ui-autocomplete{
display:block;
z-index:99999;
}

bootstrap+swiper 全文图片预览

lopo1983 发表了文章 • 0 个评论 • 1849 次浏览 • 2016-08-16 15:26 • 来自相关话题

$('#product-info .pro-img img').click(function() {
var $index = $(this).index();
var temp = '<div class="modal fade" id="modalSwiper" tabindex="-1"><div class="modal-dialog modal-full" role="document"><div class="modal-content"><div class="modal-body"><div class="swiper-container" id="modSwiper"><div class="swiper-wrapper"></div><div class="swiper-pagination"></div><div class="swiper-button-prev iconfont icon-left"></div><div class="swiper-button-next iconfont icon-right"></div></div></div></div></div></div>';
$('body').append(temp);
var tempslider = '';
$('#product-info .pro-img img').each(function() {
tempslider += '<div class="swiper-slide"><img src="' + $(this).attr('src') + '" class="img-responsive center-block" alt="" /></div>';
});
$('#modalSwiper').find('.swiper-wrapper').append(tempslider);
var modalSwiper = $('#modSwiper').swiper({
autoplay: 4000,
speed: 1500,
loop: true,
pagination: '.swiper-pagination',
lazyLoading: true,
paginationClickable: true,
runCallbacksOnInit: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
});
$('#modalSwiper').modal('show');
$('#modalSwiper').on('shown.bs.modal', function() {
var a = $('#modalSwiper .modal-full').height(),
b = $('#modalSwiper .modal').height();
if(a < b) {
$('#modalSwiper .modal-full').css('transform', 'translate(0,' + (b - a) / 2 + ')')
}
modalSwiper.update(true);
modalSwiper.slideTo($index + 1,500);
});
$('#modalSwiper').on('hidden.bs.modal', function() {
$('#modalSwiper').remove();
})
}) 查看全部
$('#product-info .pro-img img').click(function() {
var $index = $(this).index();
var temp = '<div class="modal fade" id="modalSwiper" tabindex="-1"><div class="modal-dialog modal-full" role="document"><div class="modal-content"><div class="modal-body"><div class="swiper-container" id="modSwiper"><div class="swiper-wrapper"></div><div class="swiper-pagination"></div><div class="swiper-button-prev iconfont icon-left"></div><div class="swiper-button-next iconfont icon-right"></div></div></div></div></div></div>';
$('body').append(temp);
var tempslider = '';
$('#product-info .pro-img img').each(function() {
tempslider += '<div class="swiper-slide"><img src="' + $(this).attr('src') + '" class="img-responsive center-block" alt="" /></div>';
});
$('#modalSwiper').find('.swiper-wrapper').append(tempslider);
var modalSwiper = $('#modSwiper').swiper({
autoplay: 4000,
speed: 1500,
loop: true,
pagination: '.swiper-pagination',
lazyLoading: true,
paginationClickable: true,
runCallbacksOnInit: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
});
$('#modalSwiper').modal('show');
$('#modalSwiper').on('shown.bs.modal', function() {
var a = $('#modalSwiper .modal-full').height(),
b = $('#modalSwiper .modal').height();
if(a < b) {
$('#modalSwiper .modal-full').css('transform', 'translate(0,' + (b - a) / 2 + ')')
}
modalSwiper.update(true);
modalSwiper.slideTo($index + 1,500);
});
$('#modalSwiper').on('hidden.bs.modal', function() {
$('#modalSwiper').remove();
})
})

群规2018

lopo1983 发表了文章 • 0 个评论 • 3295 次浏览 • 2016-07-30 18:51 • 来自相关话题

1.进群请改名称为 地区-称呼的格式
(为同城交流更为便捷,望大家自觉准守)。?
2.请尊重群内其他群员,上班期间尽量少聊与群主题无关的内容,恶意发大图刷屏(除了qq自带表情外其他的一律视为大图),上班时间请勿红包刷屏(禁令时间为: 周一 ~ 周五 8:30~12:00 13:00~17:30 ),发引导用户注册的AD链接直接飞机。
3.问问题前,请先baidu和查看api无果后再提问,问问题时 请尽量图文并茂,以节约时间!bootstrap相关的问题,请先申明版本号(呵呵!本群不再讨论兼容问题)。
4.若提问暂时没人回答,可到www.bsfans.com/wenda/ 留言或查看是否有和你一样的问题已被解答,不要随意@别人,你忙别人也忙!
5.群内禁止发黄赌毒 反党反社会的言论 图片
6.猎头、招聘请到www.bsfans.com/wenda/ 发布,若急需发布的可联系群主!?
以上规定违反者 送禁言套餐一份 若多次再犯送全球通单程机票一张!
? 查看全部
1.进群请改名称为 地区-称呼的格式
(为同城交流更为便捷,望大家自觉准守)。?
2.请尊重群内其他群员,上班期间尽量少聊与群主题无关的内容,恶意发大图刷屏(除了qq自带表情外其他的一律视为大图),上班时间请勿红包刷屏(禁令时间为: 周一 ~ 周五 8:30~12:00 13:00~17:30 ),发引导用户注册的AD链接直接飞机。
3.问问题前,请先baidu和查看api无果后再提问,问问题时 请尽量图文并茂,以节约时间!bootstrap相关的问题,请先申明版本号(呵呵!本群不再讨论兼容问题)。
4.若提问暂时没人回答,可到www.bsfans.com/wenda/ 留言或查看是否有和你一样的问题已被解答,不要随意@别人,你忙别人也忙!
5.群内禁止发黄赌毒 反党反社会的言论 图片
6.猎头、招聘请到www.bsfans.com/wenda/ 发布,若急需发布的可联系群主!?
以上规定违反者 送禁言套餐一份 若多次再犯送全球通单程机票一张!
?