bootstrap+masonry.js写瀑布流

最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果。
因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式、内部样式,所以,自己写瀑布流就不行了,所以,根据要求,百度查找相关资料,看到masonry.js.
个人认为这是一个非常好用的瀑布流插件。
下面说一下我在引用的过程中遇到的问题,一开始我用bootstrap栅格系统布局,代码如下


<div class="row masonry">


<div class="col-xs-12 col-sm-6 col-md-6 item">
<div class="thumbnail">
图文展示
</div>
</div>


<div class="col-xs-12 col-sm-6 col-md-6 item">
<div class="thumbnail">
<div>
图文展示
</div>
</div>


..........(省略n多图文展示)


</div>


引入masonry.js


<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src=&#

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
首先,你需要确保已经引入了Bootstrap和Vue.js,并且创建了一个Vue实例。 接下来,你可以使用Bootstrap的模态框组件来实现删除确认弹窗: ```html <!-- 删除按钮 --> <button class="btn btn-danger" @click="showDeleteModal=true">删除</button> <!-- 删除确认模态框 --> <div class="modal" tabindex="-1" role="dialog" v-show="showDeleteModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">确认删除?</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="showDeleteModal=false"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>确定要删除这个记录吗?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="showDeleteModal=false">取消</button> <button type="button" class="btn btn-danger" @click="deleteRecord">删除</button> </div> </div> </div> </div> ``` 在Vue实例中,你需要定义一个`showDeleteModal`变量来控制模态框的显示和隐藏,并在删除按钮的点击事件中将其设置为`true`。同时,你还需要定义一个`deleteRecord`方法,在用户点击删除按钮后执行实际的删除操作,并将`showDeleteModal`设置为`false`以关闭模态框。 ```javascript new Vue({ el: '#app', data: { records: [ /* ... */ ], showDeleteModal: false, recordToDelete: null }, methods: { deleteRecord() { // 执行实际的删除操作 const index = this.records.indexOf(this.recordToDelete); if (index !== -1) { this.records.splice(index, 1); } // 关闭模态框 this.showDeleteModal = false; } } }); ``` 在删除按钮中,你需要将`recordToDelete`变量设置为当前要删除的记录,以便在`deleteRecord`方法中使用。 ```html <button class="btn btn-danger" @click="showDeleteModal=true; recordToDelete=record">删除</button> ``` 现在,当用户点击删除按钮时,将会弹出一个确认模态框,询问用户是否要删除该记录。如果用户点击了“删除”按钮,Vue实例中的`deleteRecord`方法将会被调用,执行实际的删除操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值