html-demo: JQuery&Bootstrap

最新推荐文章于 2021-01-30 22:25:32 发布
最新推荐文章于 2021-01-30 22:25:32 发布
阅读量731 收藏
点赞数
分类专栏： web前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25338745/article/details/51578714
版权

JQuery

Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <script type="text/javascript" src="../pagejs/bootstrap.min.js" ></script>
    <script type="text/javascript" src="../pagejs/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../pagecss/bootstrap.min.css"/>

    <script type="text/javascript">
        function showmsg(msgdata) {
            $("#msginfo").hide();
            $("#msginfo").html("<b>" + msgdata + "</b>");
            $("#msginfo").show(1000);
        }

        $().ready(function() {
            $("#login").click(function() {
                var user = $("#inputEmail").val();
                var pwd = $("#inputPassword").val();
                if (user == "" || pwd == "") {
                    showmsg("please input email and password");
                    return;
                }

                $.post("login.do", {
                    email:user,
                    pwd:pwd
                },
                function(data, status){
                    if (data == "loginok") {
                        location.href = "welcome.jsp";
                    } else {
                        showmsg(data);
                    }
                });
            });
        })
    </script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="breadcrumb">
                <li>
                    <a href="../index.html">Home</a>
                </li>
                <li class="active">
                    LOGIN
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
            <div style="height:100px;clear:both"></div>
            <img alt="140x140" src="../image/icon.jpg" class="img-circle" style="width:160px;height:160px" />
        </div>
        <div class="col-md-6 column">
            <div class="page-header">
                <h1>
                    Welcome to Sp4 System
                </h1>
            </div>
            <form class="form-horizontal" role="form" id="login_form" action="login.do" method="post">
                <div class="form-group">
                    <label for="inputEmail" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail" name="email" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword" name="pwd" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label><input type="checkbox" />Remember me</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-2">
                        <button id="login" type="button" class="btn btn-default">Sign in</button>
                    </div>
                    <div class="col-sm-8">
                        <h4 id="msginfo"></h4>
                    </div>
                </div>
            </form>


        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>
</body>
</html>

这里写图片描述

max-2016
关注
专栏目录
HTML、CSS 和 JS框架之Bootstrap
weixin_42625143的博客
07-27 725
阅读目录 一.Bootstrap简介： Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 详细参考内容：Bootstrap_v3 二.Bootstrap安装： 下载地址：https://v3.bootcss.com/（使用v3版，不要使用最新版） 使用方法一： 下载后解压文件bootstrap-3.3.7-dist 这里有一些...
Web前端（五）：Bootstrap+JQuery
weixin_43844995的博客
07-10 1778
通过之前的学习，差不多掌握了原生的HTML+CSS+JavaScript的我们，基本上已经能够做到很大程度上的网页开发了，虽然开发过程中必然会遇到很多困难，但是在不断的努力下一定都是能够解决的。不过仅仅依靠原生手段进行开发实在是有点累，今天我就简单介绍一下两个能够提高我们开发效率的工具：Bootstrap和JQuery。 Bootstrap是最一款使用最广泛的Web前端UI框架，Bootstrap提供了多种我们经常需要使用的元素样式，如各式各样的表格、表单等等，通过更改class就能够十分便捷地.
bootstrap完整Demo
01-08
bootstrap完整Demo。 BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架，他是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面设计上。 它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容，所有的元素都可以很优雅的呈现。所以，可以用他来开发适合各种设备浏览的页面，避免了大量的因为兼容性而导致的重复劳动。 它的最新版本是4.0，国内目前用的较多的是3.x,我们的教程也基于BootStrap3.x版本，也是目前最受欢迎的前端框架之一。 你可以使用默认的BootStrap样式和组件，你也可以对代码简洁。
bootstrap-demo
11-18
主要是针对bootstrap一些插件的源代码的介绍，对初学者有一定的借鉴意义
Bootstrap简单Demo（2015年05月-18日）
dizhouna1906的博客
05-27 133
Bootstrap的简单使用 1、Bootstrap是什么？ 这是Bootstrap官网上对它的描述：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目 2、Bootstrap的使用需求 1.Bootstrap是一个快速开发Web应用程序的前端框架，并且有丰富的组件、插件，可以用于我们快速开发出用户友好的WEB界面 2.支持移...
bootstrap-table-demo ( bootstraptable )
02-05
工作需要用到bootstrap-table（bootstrap table）。 网上找了例子参差不齐，实在不堪入目。 我只要最简单的例子，网上没有所需要的，只我自已整理一份了。 该demo包含5个可以运行的最基本的例子。 希望能得到像我这样的菜鸟点赞。
Gridstack-Demo:jQuery插件，用于小部件布局。 这是拖放式多列网格
05-15
gridstack.js允许您构建可拖动的，响应式的Bootstrap v3友好布局。 它还伟大工程 ， ，。 在Slack上加入gridstack.js： ://gridstackjs.troolee.com 用生成的目录 基本用法 迁移至v0.3.0 API文档 触控设备支持 ...
jquery-ui-bootstrap:bootstrap风格的jquery-ui
06-13
jquery-ui-bootstrap jquery-ui: v.1.12.0 bootstrap: v.3.3.4 融合了bootstrap风格的jquery-ui, 对jquery-ui的js文件有微量改动，主要是针对与class的添加改动。 请到demo文件夹下预览效果。
bootstrap-plugins:jquery-ui-bootstrap
05-21
Demo使用node.js + express + jade，先通过npm install安装依赖，启动Demo： node bootstrap-plugins.js How to use Update 2014-11-17 bsRichDropDown : 增加此组件及相关demo。 更新font-awesome至4.2.0 2014-10-...
BootStrapTableDemo
06-05
该bootStrapDemo包含两种样式的表格，封装的表格具有增删改查的功能。一种表格是Datatable,另外一个表格是StuPersonInfo2。前台主要采用的html5+Css3+bootstrap+MVC，希望我写的小demo为大家省一些力气。
bootstrap案例demo
07-27
bootstrap案例demo
bootstrap中自己总结的各种demo
11-11
各种bootstrap中出现过的实例基本都可以找到，还有一些demo
bootstrap 界面Demo
05-12
bootstrap 3.0界面deml
info-farma：Farma-Demo con Bootstrap，jQuery，NodeJs
02-26
信息农场 Bootstrap 3.x，jQuery 2.x，PHP 7.x，Html5和CSS3的Info-farma realizado con 德萨罗拉多人： 卡洛斯·帕里奥纳（秘鲁） 拉米罗·阿玛亚（萨尔瓦多） Inicio 2016年11月23日
flask-admin-tree-table-demo:flask-admin 树状表格示例
05-03
cd flask-admin-tree-table-demo pipenv install pipenv shell python app.py 启动后访问： 效果图 主要依赖 jquery-treegrid.js: 用于显示树状表格 sqlalchemy-mptt: 配置数据模型为“左右值树”数据结构 说明 本...
Bootstrap组件 demo
liuhui12345的博客
08-02 215
BootstrapDemo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>BootstrapDemo合集</title> <link rel="stylesheet" type="text/css" href="css/bootst...
2.7 bootstrapDemo
jiaguopeng的博客
01-30 370
2.7 bootstrapDemo 如果需要用到类似展示页面到官网查看 1 常用样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <script src="js/jquery-
Angle 3.5.4: 2017最强大Bootstrap管理模板 (AngularJS & jQuery Demo)
它融合了AngularJS和JQuery两种流行的JavaScript框架，旨在提供强大的功能和用户体验。Bootstrap 3.x的基础结构确保了模板具有响应式设计，适应不同设备屏幕尺寸，使得管理界面在移动设备和桌面电脑上都能流畅操作。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值