Bootstrap+Masonry+imagesLoaded 快速实现瀑布流
lopo1983 发表了文章 • 0 个评论 • 2317 次浏览 • 2017-05-04 16:53
<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官网 查看全部
<div id="masonry" class="container-fluid">css
<div class="thumbnail">
<div class="imgs">
<img src="" />
</div>
<div class="caption">
<div class="title"></div>
<div class="content">
</div>
</div>
</div>
</div>
<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() {masonry官网
if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {
if(!imagesLoading) {
appendToMasonry();
}
}
});
捐献专用
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 查看全部
除去开支外若有结余? 将展开各种活动以各种书籍 谢谢大家支持?
?
捐献后请私聊我 并截图捐献信息 我将列入以下列表
?
排名 不分先后
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
bootstrap step vue版
lopo1983 发表了文章 • 0 个评论 • 1752 次浏览 • 2016-12-23 01:54
<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
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
<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
A: 设置该元素css属性
line-height:normal
A: 设置该元素css属性
line-height:normal
jquery-ui-autocomplete+Bootstrap modal 层级问题
lopo1983 发表了文章 • 0 个评论 • 2141 次浏览 • 2016-08-22 11:27
display:block;
z-index:99999;
}
.ui-autocomplete{
display:block;
z-index:99999;
}
bootstrap+swiper 全文图片预览
lopo1983 发表了文章 • 0 个评论 • 1849 次浏览 • 2016-08-16 15:26
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
(为同城交流更为便捷,望大家自觉准守)。?
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/ 发布,若急需发布的可联系群主!?
以上规定违反者 送禁言套餐一份 若多次再犯送全球通单程机票一张!
? 查看全部
(为同城交流更为便捷,望大家自觉准守)。?
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/ 发布,若急需发布的可联系群主!?
以上规定违反者 送禁言套餐一份 若多次再犯送全球通单程机票一张!
?