![](https://img-blog.csdnimg.cn/6dece1a8f0044a9da32c78f30b859305.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 85
前端总结,bootstrap框架,html,css,js。
微雨停了
靠近光,追随光,成为光,发散光。
展开
-
【前端】弹窗美化 layer 与 sweetalert 弹窗插件学习
文章目录一、layer.confirm1.1 效果1.2 用法1.3 代码分析二、layer.open2.1 效果2.2 用法2.3 示例三、layer.alert3.1 效果3.2 用法3.3 示例四、layer.msg 与 layer.load五、layer.js引入方法六、另一种alert美化——swal6.1 引入6.2 用法6.2.1 标准弹窗6.2.2 带标题的弹窗6.2.2 带成功提示的弹窗七、layer学习一、layer.confirm1.1 效果此时只有点击确定,才会执行删除操作;原创 2022-04-27 01:48:03 · 2434 阅读 · 0 评论 -
【Bootstrap】等待加载页面的实现
文章目录一、效果二、代码实现2.1 将内容通过onclick事件提交到go()2.2 go()函数的处理三、附:一段点击切换块隐藏与显示状态的代码一、效果原始页面:点击查询后:查询结束后:二、代码实现2.1 将内容通过onclick事件提交到go() <button class="btn btn-dark" type="button" onclick="go()">Go! </button> 被提交内容1:表单数据(省略)内容2:加载框(id为wai原创 2022-04-26 20:16:55 · 4280 阅读 · 0 评论 -
【Bootstrap】Bootstrap v5 nav导航条实现部分居左,部分居右布局
文章目录一、效果二、修改后代码三、分析3.1 修改前效果3.2 修改前代码3.3 方法四、学习网址一、效果在同一行中,资产收集、信息探测等内容居左对齐,而测试与退出登录居右对齐。二、修改后代码 <!-- nav --> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <!-- div1 start --> <div class="colla原创 2022-04-26 15:32:07 · 5116 阅读 · 0 评论 -
【Django】后端分页与Bootstrap前端分页分别实现记录
文章目录一、后端分页MVC1.1 路由url.py1.2 视图views.py1.3 模板template.html1.4 效果二、前端分页—Bootstrap-table2.1 路由url.py2.2 视图views.py2.3 目标template.html2.4 效果三、总结一、后端分页MVC1.1 路由url.py路由入口:<a class="dropdown-item" href="{% url 'detect_history' 1 %}">资产探测与信息收集搜索记录</原创 2022-04-26 02:09:53 · 1800 阅读 · 2 评论 -
【Bootstrap】模态框(Modal)传值踩坑记录
文章目录一、模态框介绍二、实现效果三、实现代码—整个table部分+js四、分析4.1 html-button传值4.2 javascript-接值并传值4.3 input-接值五、Reference一、模态框介绍模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。为了实现父窗体与其的交互,通常需要向其传值,实现带参数的传递,查看数据的唯一性。例如下面窗体:点击任意一个模态框("回复"按钮),如果不做任原创 2022-04-26 01:34:57 · 3571 阅读 · 0 评论 -
【前端】particle.js页面粒子效果
一、效果二、使用GitHub地址:https://github.com/VincentGarreau/particles.jshtml中引入:<div id="particles-js"></div><script src="particles.js"></script><script src="app.js"></script>踩坑注意:<div id="particles-js"></div&原创 2022-04-25 16:45:08 · 3388 阅读 · 1 评论 -
【Bootstrap】前端美化—Bootstrap实现按钮组分散对齐
一、美化代码与图示1.1 美化前1.2 美化后1.3 代码<div class="row justify-content-between"> <div class="btn-group btn-group-justified"> <input type="radio" class="btn-check" name="scan_type" value="full_scan" id="option1" autocomplete="off" checke原创 2022-04-24 21:20:45 · 1681 阅读 · 0 评论 -
【Bootstrap】Bootsrap v5 footer页尾
一、代码 <style> a { text-decoration: none !important; } a:hover { text-decoration: none !important; } </style> <div class="container-fluid"> <footer style=原创 2022-04-24 21:29:18 · 872 阅读 · 0 评论 -
【Bootstrap】Bootstrap v5 Table插件疯狂踩坑记录
一、报错代码<table class="table table-hover text-center" id="table" data-toggle="table" data-search="true" data-pagination="true" data-id-field="id"原创 2022-04-25 01:31:22 · 3442 阅读 · 8 评论