Bootstrap框架使用及可视化布局

最新推荐文章于 2024-05-10 09:42:37 发布
最新推荐文章于 2024-05-10 09:42:37 发布
阅读量5.8k 收藏 36
点赞数 6
分类专栏： JavaScript 文章标签： bootstrap java css javascript
©辛勤耕耘，转载请注明来源。 || 自建博客: janycode.github.io || CSDN博客：simple.blog.csdn.net
本文链接：https://blog.csdn.net/sinat_36184075/article/details/106168159
版权

Bootstrap框架的入门学习

1. Bootstrap 概述

Bootstrap是一个前端框架，由Twitter开发，非常受欢迎。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
相当于半成品；开发人员基于框架可以进行二次开发，大大的节省开发人员的开发时间。
特点：

  • 定义了很多的css样式和js插件，直接可以使用这些样式和插件得到丰富的 页面效果
  • 支持响应式布局，写一套页面就可以在不同分辨率的设备上有比较好的效果。

2. Bootstrap 环境配置

  1. 下载 Bootstrap：https://v3.bootcss.com/
  2. 创建 bootstrap 目录，导入 css/ fonts/ js/ ：
    Bootstrap 环境配置
  3. 导入 jQuery 库：bootstrap/js/jquery-3.5.1.min.js
  4. 将资源导入到页面：
    Bootstrap 样式文件：bootstrap/css/bootstrap.min.css
    jQuery 类库文件：bootstrap/js/jquery-3.5.1.min.js
    Bootstrap 类库文件：bootstrap/js/bootstrap.min.js
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>

3. Bootstrap 基本使用

CV大法，按需微调。

4. Bootstrap 可视化布局

  • Bootstrap 官方可视化布局工具：https://www.bootcss.com/p/layoutit/
    拖拽布局，【下载】按钮生成干净的HTML, 可以复制粘贴代码到项目。

  • 第三方可视化布局工具：

  1. ibootstrap.cn：http://www.ibootstrap.cn/
  2. 15 款最好的 Bootstrap 在线编辑工具：https://www.runoob.com/bootstrap/bootstrap-ui-editor.html

5. 测试 demo

效果图：
Bootstrap框架使用及可视化布局demo
源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>炎黄子孙旅游网</title>
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <style>
        body {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .container-fluid {
            padding: 0;
        }

        /* 图片随窗口大小变化自动伸缩 */
        #top_banner {
            width: 100%;
            height: auto;
        }

        hr {
            margin-top: 5px;
        }

        .price {
            color: orange;
        }
		/* 需要两边留白且居中的主体内容 */
        .content {
            width: 80%;
        }

        .thumbnail {
            padding: 0;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <%--顶部banner--%>
            <img id="top_banner" src="image/top_banner.jpg" alt="top-banner"/>
            <%--导航条--%>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a style="color: orange; margin-left: 10px" class="navbar-brand" href="#">炎黄子孙旅游网</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">名胜 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">古迹</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false">各地景区 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">郑州</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">开封</a></li>
                                    <li><a href="#">洛阳</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">南阳</a></li>
                                    <li><a href="#">驻马店</a></li>
                                    <li><a href="#">平顶山</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form navbar-left">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="地区或景点名称">
                            </div>
                            <button type="submit" class="btn btn-default">搜索</button>
                        </form>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">关于我们</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">我的足迹</a></li>
                                    <li><a href="#">我的旅记</a></li>
                                    <li><a href="#">我的相册</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">退出</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
            <%--轮播图--%>
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="image/banner_1.jpg" alt="轮播图1">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>
                    <div class="item">
                        <img src="image/banner_2.jpg" alt="轮播图2">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>
                    <div class="item">
                        <img src="image/banner_3.jpg" alt="轮播图3">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">上一张</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">下一张</span>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="content container-fluid">
    <div class="mod_title row-fluid">
        <div class="span12">
            <%--栏目标题--%>
            <div style="margin-top: 20px">
                <div>
                    <img src="image/icon_5.jpg" alt="">旅游精选
                </div>
                <hr/>
            </div>
            <%--栏目内容 2x4--%>
            <div class="row-fluid">
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="image/jingxuan_1.jpg" alt="精选1">
                        <div class="caption">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                            <span class="price">$699</span>
                            <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="image/jingxuan_1.jpg" alt="精选1">
                        <div class="caption">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                            <span class="price">$699</span>
                            <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="image/jingxuan_1.jpg" alt="精选1">
                        <div class="caption">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                            <span class="price">$699</span>
                            <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="image/jingxuan_1.jpg" alt="精选1">
                        <div class="caption">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                            <span class="price">$699</span>
                            <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="image/jingxuan_1.jpg" alt="精选1">
                        <div class="caption">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                            <span class="price">$699</span>
                            <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="image/jingxuan_1.jpg" alt="精选1">
                        <div class="caption">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                            <span class="price">$699</span>
                            <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="image/jingxuan_1.jpg" alt="精选1">
                        <div class="caption">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                            <span class="price">$699</span>
                            <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="image/jingxuan_1.jpg" alt="精选1">
                        <div class="caption">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                            <span class="price">$699</span>
                            <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                        </div>
                    </div>
                </div>
            </div>
            <%--分页栏--%>
            <div align="center">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <%--栏目标题--%>
            <div>
                <div>
                    <img src="image/icon_6.jpg" alt="">人气推荐
                </div>
                <hr/>
            </div>
            <%--栏目内容 1 + 2x3--%>
            <div class="row-fluid">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 30%">
                    <img style="width: 300px; height: 445px;" src="image/guonei_1.jpg" alt="特卖">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 70%; padding: 0">
                    <div class="row-fluid">
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                            <div class="thumbnail">
                                <img src="image/jingxuan_1.jpg" alt="精选1">
                                <div class="caption">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                    <span class="price">$699</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                            <div class="thumbnail">
                                <img src="image/jingxuan_2.jpg" alt="精选1">
                                <div class="caption">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                    <span class="price">$699</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                            <div class="thumbnail">
                                <img src="image/jingxuan_3.jpg" alt="精选1">
                                <div class="caption">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                    <span class="price">$699</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                            <div class="thumbnail">
                                <img src="image/jingxuan_4.jpg" alt="精选1">
                                <div class="caption">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                    <span class="price">$699</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                            <div class="thumbnail">
                                <img src="image/jingxuan_5.jpg" alt="精选1">
                                <div class="caption">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                    <span class="price">$699</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                            <div class="thumbnail">
                                <img src="image/jingxuan_6.jpg" alt="精选1">
                                <div class="caption">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                    <span class="price">$699</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid" style="background-color: #383838; width: 100%; height: 100px;">
    <div class="content container-fluid">
        <div class="row-fluid">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
                    <img src="image/icon_1.jpg">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
                     style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
                    <span style="font-size: 20px"><b>产品齐全</b></span>
                    <p style="color: gray; padding-top: 0px">产品全自主选，随心买</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
                    <img src="image/icon_1.jpg">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
                     style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
                    <span style="font-size: 20px"><b>便利快捷</b></span>
                    <p style="color: gray; padding-top: 0px">产品全自主选，随心买</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
                    <img src="image/icon_1.jpg">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
                     style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
                    <span style="font-size: 20px"><b>安全支付</b></span>
                    <p style="color: gray; padding-top: 0px">产品全自主选，随心买</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
                    <img src="image/icon_1.jpg">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
                     style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
                    <span style="font-size: 20px"><b>贴心服务</b></span>
                    <p style="color: gray; padding-top: 0px">产品全自主选，随心买</p>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
姜源Jerry
关注
  • 6
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap前端框架学习（一）：Bootstrap在Vue项目中的安装及可视化布局
看门猫的博客
01-08 5148
Boostrap前端框架学习（一）：Boostrap的安装及在Vue项目中的使用node.js的安装Boostrap的安装 node.js的安装 我们需要安装node.js，使用node.js的npm包管理器来完成Boostrap的安装。 前往Node.js中文网下载并安装node.js，安装程序会自动把node添加到环境变量，在安装完成后重启即可生效。 重启后在终端中输入以下命令查看node.j...
Bootstrap在线可编辑可视化布局系统模板下载
05-03
本资源是一个基于Bootstrap的在线可编辑可视化布局系统模板，旨在帮助开发者和设计师更直观地创建和编辑网页布局。 在可视化布局系统中，用户可以通过拖放组件、调整大小和位置来构建页面，而无需深入编写代码。...
Bootstrap可视化布局
qq_48621751的博客
01-08 4020
直接搜索bootstrap可视化布局,即可在线布局
Bootstrap可视化布局系统使用文档
自娱《测试开发》专栏
01-04 991
 利用Bootstrap可视化布局系统可以拖拽生成统一的基本的样式布局HTML代码，对于没有前端介入的情况下，java开发也能快速搭建一套标准美观的后台系统，使用简单、方便、灵活。可视化布局系统地址：http://www.bootcss.com/p/layoutit/。另外bootstrap提供了一整套CSS样式，可以满足后台系统所有样式需求，不用依赖前端开发，想要什么样式先到这里找找http:...
推荐开源项目：layoutit - Bootstrap 可视化布局神器
最新发布
gitblog_00096的博客
05-10 414
推荐开源项目：layoutit - Bootstrap 可视化布局神器 项目地址:https://gitcode.com/justjavac/layoutit 1. 项目介绍 layoutit 是一个基于著名的前端框架 Bootstrap 的可视化布局工具，提供了离线中文版，为开发者和设计者打造了一种高效便捷的方式，让他们可以快速地构建 Bootstrap 格式的页面布局。这个开源项目旨在简化网页...
4 数据可视化大屏 - 布局： BootStrap 之网格Grid
YYDataV的博客
03-20 2733
目录 一、最简单的例子 二、网格grid特性 三、自动布局列 1、列自动等宽度 col 2、设置某一列宽度，其余列自动等宽度 3、可变宽度内容col-{ breakpoint }-auto 四、响应类Responsive classes 1、所有断点breakpoint col-x(1-12) 2、向水平方向堆叠Stacked to horizontal 3、Row columns行列 五、嵌套布局 Nesting 本文章示例基于最新版BootStrap 5.1。 网...
前端框架bootstrap和可视化布局工具
kekefen01的博客
11-06 5935
layoutit可以快速构建网页 http://www.bootcss.com/p/layoutit/ http://www.ibootstrap.cn/ 另外两个jetstrap和bootswatchr好像都需要翻墙
bootstrap可视化布局
陪衬丶角色的博客
07-05 376
bootstrap可视化布局链接地址： http://www.ibootstrap.cn/
Python数据可视化Dash+Bootstrap
扶摇直上
03-15 3691
Python基于Dash+Bootstrap的数据可视化 Dash框架是基于flask、React 、plotly开发的可视化框架，不仅对其进行了集成、还将繁琐的方法统一起来。简单好学，通过极少量的代码就可以实现炫酷的可视化界面，简直不要太方便。 效果如下： 可视化图形，八大功能 下载图片、变焦、图片移动、框中选择、套索选中、放大、缩小、居中显示 代码实现思路 主要分为两点 1、app.py中编写程序代码。包含创建画布、绘制图形、界面布局三个部分 2、assets文件下的index.css文件进行界面布
BootStrap入门教程(一)之可视化布局
09-01
这个“BootStrap入门教程(一)之可视化布局”将带你走进Bootstrap的世界，了解如何利用其强大的可视化工具创建美观且适应各种设备的网页。 首先，Bootstrap 提供了一套完整的CSS和JavaScript组件，包括网格系统、...
bootstrap3-layout可视化布局源代码
05-14
Bootstrap3-Layout是一款基于Bootstrap 3框架的可视化布局工具，它允许开发者通过拖拽和配置组件，快速构建响应式网页布局。这个源代码包包含了实现这一功能所需的所有文件和资源，使得开发人员能够更高效地设计和...
bootstrap可视化布局系统
03-31
在Bootstrap中，可视化布局系统是构建用户界面的关键工具，它允许开发者通过直观的方式来设计和组织网页元素，从而提高开发效率并确保跨设备的兼容性。 在Bootstrap的可视化布局系统中，网格（Grid System）是最...
VisualizationLayOut:基于bootstrap3的可视化布局
06-07
这个"VisualizationLayOut"项目是基于Bootstrap 3的可视化布局实现，它提供了中文版的界面和文档，便于中国开发者理解和使用。在这个项目中，你将能够学习到以下关于Bootstrap 3和HTML的知识点： 1. **栅格系统**：...
ECharts 数据可视化图表简单使用
Hello, New World!
05-18 3328
ECharts 数据可视化图表的使用1. ECharts 概述2. ECharts 使用步骤3. ECharts 官方示例4. ECharts 异步请求 官网：https://echarts.apache.org/zh/index.html 下载：https://echarts.apache.org/zh/builder.html 实例：https://echarts.apache.org/examples/zh/index.html 教程：https://echarts.apache.org/zh/tut
基于阿里云的手机短信验证码和注册校验逻辑
Hello, New World!
05-21 2627
基于阿里云的手机短信验证码demo实现1. 环境依赖2. 页面表单3. 校验与短信发送4. SmsUtils 工具类5. 后台调用匹配验证码 阿里云的短信平台：http://www.aliyun.com 搜索短信服务，进入短信服务控制台，设置AccessKey+签名+短信模板。 SDK及DEMO下载：https://help.aliyun.com/document_detail/55359.html 注意事项：阿里云短信服务，1条验证码 0.045元，需要有余额才能发送！ 1. 环境依赖 boot
Bootstrap Validator：更好的表单校验
Hello, New World!
05-18 1703
Bootstrap Validator：更好的表单校验1. 概述2. 环境配置3. 表单验证使用 更好的表单校验：Bootstrap Validator 官网(GitHub)：https://github.com/nghuuphuoc/bootstrapvalidator 官网(jQuery)：https://plugins.jquery.com/bootstrapValidator/ 文档(API)：http://bootstrapvalidator.votintsev.ru/api/ API文档可
JS中异步请求无法返回给方法正确的布尔值 - 解决方案
Hello, New World!
06-06 1263
JS中异步请求无法返回给方法正确的布尔值 - 解决方案1. 问题现象2. 解决方案 1：改变 async 为同步 + 变量赋值3. 解决方案 2：使用全局变量 + 写 get/set 方法4. demo 源码 1. 问题现象 普通的 ajax 校验会出现的问题：无法正确返回 boolean 值 false，因此无法正确拦截表单提交！！！ // 注册 $.ajax({ type : "post", async : true, url : "<%=request.getContextPa
bootstrap可视化拖拽布局源码
01-27
Bootstrap可视化拖拽布局源码是一种用于实现网页布局的前端框架。它提供了一套美观、响应式的UI组件和网格系统，使开发者能够快速搭建出适配不同设备的网页。 在Bootstrap中，可视化拖拽布局源码是指使用拖拽操作来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜源Jerry

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值