2017年6月23号 星期五 暴雨转阵雨 空气质量：良

内容：

01jQuery-Validate验证插件的使用；02bootstrap小例子；

03引用charisma代码小例子

一、jQuery-Validate验证插件的使用

自己代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>jQuery-Validate验证插件的使用</title></head><body><form action="#" method="post" id="myForm">    <tr>        <td>用户名</td>        <td><input type="text" name="userName"/></td>        <br/>        <td>密码</td>        <td><input type="password" name="pwd" id="opwd"/></td>        <br/>        <td>确认密码</td>        <td><input type="password" name="repwd"/></td>        <br/>        <td>邮箱</td>        <td><input type="email" name="email"/></td>        <br/>        <td>日期</td>        <td><input type="text" name="dates"/></td>        <br/>        <td><input type="submit" value="登录"/></td>    </tr>

</form><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script>

<script type="text/javascript">$(function(){    $("#myForm").validate({        //定义验证规则        rules:{            userName:"required",            pwd:{                required:true,                minlength:6,                maxlength:10            },            repwd:{                required:true,                equalTo:"#opwd"            },            email:{                required:true,                email:true            },            dates:{                required:true,                dateISO:true            }        },        //验证提示信息        messages:{            userName:"请填写用户名",            pwd:{                required:"请填写密码",                minlength:"密码最小长度为6位",                maxlength:"密码最大长度为10位"            },            repwd:{                required:"请再次确认密码",                equalTo:"密码不相符，请再次确认"            },            email:{                required:"请输入邮箱地址",                email:"邮箱格式不正确"            },            dates:{                required:"请输入日期",                dateISO:"日期格式不正确"            }        }    })})

</script></body></html>效果如下：

二、bootstrap小例子

1、bootstrap01登录小例子

老师代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>登录界面</title><!--01.引入需要的css样式文件--><link rel="stylesheet" href="css/bootstrap.css"><!--02.引入我们的jQuery库--><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><!--03.引入bootstrap的js库--><script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<!--container:我们的代码写在这个容器中   就会具有一些样式-->
<div class="container"><!--设置字体图标 class="glyphicon glyphicon-user"--><h1 class="page-header"><span class="glyphicon glyphicon-user"></span> 用户登录</h1><form class="form-horizontal"><div  class="form-group"><div class="col-md-5"><input type="text" class="form-control" placeholder="请输入用户名/email"></div></div><div  class="form-group"><div class="col-md-5"><input type="text" class="form-control" placeholder="请输入密码"></div></div><div  class="form-group"><div class="col-md-5"><input type="button" class="btn btn-primary btn-block" value="登录"></div></div></form></div>
</body>
</html>效果如下：

2、bootstrap02导航菜单

老师代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>登录界面</title><!--01.引入需要的css样式文件--><link rel="stylesheet" href="css/bootstrap.css"><!--02.引入我们的jQuery库--><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><!--03.引入bootstrap的js库--><script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<!--导航菜单 默认的高度是50px navbar-fixed-top 始终位于网页的头部-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"><!--设置文字不显示时候的标签--><div class="navbar-header"><!--这里网页中也可以设置成一个图片  但是 需要设置图片的大小--><a class="navbar-brand">请选择姓名</a><button class="navbar-toggle" type="button" data-toggle="collapse"data-target=".navbar-collapse"><!--书写 横线--><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse"><!-- navbar-nav  这是我们的li左浮动--><ul class="nav navbar-nav"><li><a href="#">小强</a></li><li><a href="#">小红</a></li><li><a href="#">小白</a></li></ul><!--书写登录  注册  搜索框--><div class="navbar-form navbar-right"><a href="#">登录</a><a href="#">注册</a><input type="text" class="form-control" placeholder="请输入关键字"><button class="btn btn-primary">搜索</button></div></div>
</nav>
<!--为了不遮盖后面的内容  设置一个div高度为50px-->
<div  style="height: 50px"></div><!--container:我们的代码写在这个容器中   就会具有一些样式-->
<div class="container"><!--设置字体图标 class="glyphicon glyphicon-user"--><h1 class="page-header"><span class="glyphicon glyphicon-user"></span> 用户登录</h1><form class="form-horizontal"><div  class="form-group"><div class="col-md-5"><input type="text" class="form-control" placeholder="请输入用户名/email"></div></div><div  class="form-group"><div class="col-md-5"><input type="text" class="form-control" placeholder="请输入密码"></div></div><div  class="form-group"><div class="col-md-5"><input type="button" class="btn btn-primary" value="登录"></div></div></form><!--验证能固定在网页的顶部--><div  style="height: 1000px"></div></div>
</body>
</html>效果如下：

三、引用charisma代码小例子

1、引入代码中index.html中的左侧导航主菜单

自己引入代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <!-- The styles -->    <link id="bs-css" href="css/bootstrap-cerulean.css" rel="stylesheet">    <style type="text/css">        body {            padding-bottom: 40px;        }        .sidebar-nav {            padding: 9px 0;        }    </style>    <link href="css/bootstrap-responsive.css" rel="stylesheet">    <link href="css/charisma-app.css" rel="stylesheet">    <link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet">    <link href='css/fullcalendar.css' rel='stylesheet'>    <link href='css/fullcalendar.print.css' rel='stylesheet'  media='print'>    <link href='css/chosen.css' rel='stylesheet'>    <link href='css/uniform.default.css' rel='stylesheet'>    <link href='css/colorbox.css' rel='stylesheet'>    <link href='css/jquery.cleditor.css' rel='stylesheet'>    <link href='css/jquery.noty.css' rel='stylesheet'>    <link href='css/noty_theme_default.css' rel='stylesheet'>    <link href='css/elfinder.min.css' rel='stylesheet'>    <link href='css/elfinder.theme.css' rel='stylesheet'>    <link href='css/jquery.iphone.toggle.css' rel='stylesheet'>    <link href='css/opa-icons.css' rel='stylesheet'>    <link href='css/uploadify.css' rel='stylesheet'>

    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->    <!--[if lt IE 9]>    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>    <![endif]-->

    <!-- The fav icon -->    <link rel="shortcut icon" href="img/favicon.ico"></head><body>

<!-- left menu starts --><div class="span2 main-menu-span">    <div class="well nav-collapse sidebar-nav">        <ul class="nav nav-tabs nav-stacked main-menu">            <li class="nav-header hidden-tablet">Main</li>            <li><a class="ajax-link" href="01index.html"><i class="icon-home"></i><span class="hidden-tablet"> Dashboard</span></a></li>            <li><a class="ajax-link" href="ui.html"><i class="icon-eye-open"></i><span class="hidden-tablet"> UI Features</span></a></li>            <li><a class="ajax-link" href="form.html"><i class="icon-edit"></i><span class="hidden-tablet"> Forms</span></a></li>            <li><a class="ajax-link" href="chart.html"><i class="icon-list-alt"></i><span class="hidden-tablet"> Charts</span></a></li>            <li><a class="ajax-link" href="typography.html"><i class="icon-font"></i><span class="hidden-tablet"> Typography</span></a></li>            <li><a class="ajax-link" href="gallery.html"><i class="icon-picture"></i><span class="hidden-tablet"> Gallery</span></a></li>            <li class="nav-header hidden-tablet">Sample Section</li>            <li><a class="ajax-link" href="table.html"><i class="icon-align-justify"></i><span class="hidden-tablet"> Tables</span></a></li>            <li><a class="ajax-link" href="calendar.html"><i class="icon-calendar"></i><span class="hidden-tablet"> Calendar</span></a></li>            <li><a class="ajax-link" href="grid.html"><i class="icon-th"></i><span class="hidden-tablet"> Grid</span></a></li>            <li><a class="ajax-link" href="file-manager.html"><i class="icon-folder-open"></i><span class="hidden-tablet"> File Manager</span></a></li>            <li><a href="tour.html"><i class="icon-globe"></i><span class="hidden-tablet"> Tour</span></a></li>            <li><a class="ajax-link" href="icon.html"><i class="icon-star"></i><span class="hidden-tablet"> Icons</span></a></li>            <li><a href="error.html"><i class="icon-ban-circle"></i><span class="hidden-tablet"> Error Page</span></a></li>            <li><a href="login.html"><i class="icon-lock"></i><span class="hidden-tablet"> Login Page</span></a></li>        </ul>        <label id="for-is-ajax" class="hidden-tablet" for="is-ajax"><input id="is-ajax" type="checkbox"> Ajax on menu</label>    </div><!--/.well --></div><!--/span--><!-- left menu ends -->

</body></html>效果如下：

2、引入代码中login.html的登录界面

自己引入代码后略做修改：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <!-- The styles -->    <link id="bs-css" href="css/bootstrap-cerulean.css" rel="stylesheet">    <style type="text/css">        body {            padding-bottom: 40px;        }        .sidebar-nav {            padding: 9px 0;        }    </style>    <link href="css/bootstrap-responsive.css" rel="stylesheet">    <link href="css/charisma-app.css" rel="stylesheet">    <link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet">    <link href='css/fullcalendar.css' rel='stylesheet'>    <link href='css/fullcalendar.print.css' rel='stylesheet'  media='print'>    <link href='css/chosen.css' rel='stylesheet'>    <link href='css/uniform.default.css' rel='stylesheet'>    <link href='css/colorbox.css' rel='stylesheet'>    <link href='css/jquery.cleditor.css' rel='stylesheet'>    <link href='css/jquery.noty.css' rel='stylesheet'>    <link href='css/noty_theme_default.css' rel='stylesheet'>    <link href='css/elfinder.min.css' rel='stylesheet'>    <link href='css/elfinder.theme.css' rel='stylesheet'>    <link href='css/jquery.iphone.toggle.css' rel='stylesheet'>    <link href='css/opa-icons.css' rel='stylesheet'>    <link href='css/uploadify.css' rel='stylesheet'>

    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->    <!--[if lt IE 9]>    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>    <![endif]-->

    <!-- The fav icon -->    <link rel="shortcut icon" href="img/favicon.ico"></head><body>

<div class="container-fluid">    <div class="row-fluid">

        <div class="row-fluid">            <div class="span12 center login-header">                <h2>欢迎来到足球的世界！</h2>            </div><!--/span-->        </div><!--/row-->

        <div class="row-fluid">            <div class="well span5 center login-box">                <div class="alert alert-info">                    请输入用户名和密码.                </div>                <form class="form-horizontal" action="index.html" method="post">                    <fieldset>                        <div class="input-prepend" title="Username" data-rel="tooltip">                            <span class="add-on"><i class="icon-user"></i></span><input autofocus class="input-large span10" name="username" id="username" type="text" value="用户名" />                        </div>                        <div class="clearfix"></div>

                        <div class="input-prepend" title="Password" data-rel="tooltip">                            <span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="password" id="password" type="password" value="admin123456" />                        </div>                        <div class="clearfix"></div>

                        <div class="input-prepend">                            <label class="remember" for="remember"><input type="checkbox" id="remember" />记住密码</label>                        </div>                        <div class="clearfix"></div>

                        <p class="center span5">                            <button type="submit" formaction="01index.html" class="btn btn-primary">登录</button>                        </p>                    </fieldset>                </form>            </div><!--/span-->        </div><!--/row-->    </div><!--/fluid-row-->

</div><!--/.fluid-container-->

<!-- external javascript================================================== --><!-- Placed at the end of the document so the pages load faster -->

<!-- jQuery --><script src="js/jquery-1.7.2.min.js"></script><!-- jQuery UI --><script src="js/jquery-ui-1.8.21.custom.min.js"></script><!-- transition / effect library --><script src="js/bootstrap-transition.js"></script><!-- alert enhancer library --><script src="js/bootstrap-alert.js"></script><!-- modal / dialog library --><script src="js/bootstrap-modal.js"></script><!-- custom dropdown library --><script src="js/bootstrap-dropdown.js"></script><!-- scrolspy library --><script src="js/bootstrap-scrollspy.js"></script><!-- library for creating tabs --><script src="js/bootstrap-tab.js"></script><!-- library for advanced tooltip --><script src="js/bootstrap-tooltip.js"></script><!-- popover effect library --><script src="js/bootstrap-popover.js"></script><!-- button enhancer library --><script src="js/bootstrap-button.js"></script><!-- accordion library (optional, not used in demo) --><script src="js/bootstrap-collapse.js"></script><!-- carousel slideshow library (optional, not used in demo) --><script src="js/bootstrap-carousel.js"></script><!-- autocomplete library --><script src="js/bootstrap-typeahead.js"></script><!-- tour library --><script src="js/bootstrap-tour.js"></script><!-- library for cookie management --><script src="js/jquery.cookie.js"></script><!-- calander plugin --><script src='js/fullcalendar.min.js'></script><!-- data table plugin --><script src='js/jquery.dataTables.min.js'></script>

<!-- chart libraries start --><script src="js/excanvas.js"></script><script src="js/jquery.flot.min.js"></script><script src="js/jquery.flot.pie.min.js"></script><script src="js/jquery.flot.stack.js"></script><script src="js/jquery.flot.resize.min.js"></script><!-- chart libraries end -->

<!-- select or dropdown enhancer --><script src="js/jquery.chosen.min.js"></script><!-- checkbox, radio, and file input styler --><script src="js/jquery.uniform.min.js"></script><!-- plugin for gallery image view --><script src="js/jquery.colorbox.min.js"></script><!-- rich text editor library --><script src="js/jquery.cleditor.min.js"></script><!-- notification plugin --><script src="js/jquery.noty.js"></script><!-- file manager library --><script src="js/jquery.elfinder.min.js"></script><!-- star rating plugin --><script src="js/jquery.raty.min.js"></script><!-- for iOS style toggle switch --><script src="js/jquery.iphone.toggle.js"></script><!-- autogrowing textarea plugin --><script src="js/jquery.autogrow-textarea.js"></script><!-- multiple file upload plugin --><script src="js/jquery.uploadify-3.1.min.js"></script><!-- history.js for cross-browser state change on ajax --><script src="js/jquery.history.js"></script><!-- application script for Charisma demo --><script src="js/charisma.js"></script>

</body></html>

效果如下：

四、作业

看完MySQL

五、老师辛苦了！

转载于:https://www.cnblogs.com/wsnedved2017/p/7069994.html

2017年6月23号课堂笔记相关推荐

  1. 2017年6月21号课堂笔记

    2017年6月21号 星期三 多云转雷阵雨 空气质量:中度污染~轻度污染 内容: JavaScript 原型式面向对象 01基于Object的对象的方式创建对象:02使用字面量赋值方式创建对象 03构 ...

  2. 2017年4月5号课堂笔记

    2017年4月5号 晴 轻度雾霾 内容:Set,Map,遍历集合的方法,泛型,小Demo,Collections工具类的使用 一.Set 老师代码: package cn.bdqn.test; imp ...

  3. 2017年6月16号课堂笔记

    2017年6月16号 星期五 空气质量:中度污染~轻度污染 内容:jQuery:remove,bind,attr,on和live,同辈和父辈节点的操作, keyup/keypress/keydown, ...

  4. 2017年06月07号课堂笔记

    2017年06月07号 晴 空气质量:中度污染->良 内容:jQuery第二节:基本选择器,层次选择器,属性选择器, 基本过滤选择器,可见性过滤选择器 备注:代课老师:李老师 一.基本选择器 1 ...

  5. 2017年4月21号课堂笔记

    2017年4月21号 星期五 空气质量:良 内容:XML,Dom4j解析XML文件,单例 一.XML 老师代码: <?xml version="1.0" encoding=& ...

  6. 2017年07月03号课堂笔记

    2017年07月03号 星期一  多云 空气质量:轻度污染~中度污染 内容:MySQL第四节课 in和not in:两个表的内连接:exists和not exsits的使用:all,any和some: ...

  7. 2017年5月5号课堂笔记

    2017年5月5号 星期五 沙尘暴转晴 内容:U2 HTML5第一节课 一.01第一个霸气的网页 1.老师代码: <!DOCTYPE html><html><head l ...

  8. 2017年4月24号课堂笔记

    2017年4月24号  晴  空气质量:中度污染 内容:反射及相关,java设计六大原则(自学) 一.反射机制 在 程序运行期间,对于任何一个类,都能获得它的所有方法和属性! 对于任何一个对象,都能调 ...

  9. 2017年3月13号课堂笔记

    2017年3月13号 晴 空气质量:优 内容:双重循环,Java基础总结 一.Double01(3个班级各4名学员参赛,求每个班的平均分) 1.老师代码: public class Double01 ...

最新文章

  1. 洛谷4145上帝造题的七分钟2
  2. 怎样提高自己的团队合作能力
  3. python下划线变量的含义
  4. [转] JavaScript中的属性:如何遍历属性
  5. python 仪表盘_如何使用Python刮除仪表板
  6. 【Java从0到架构师】Zookeeper 应用 - Java 客户端操作、服务器动态感知、分布式锁业务处理
  7. 打包外星人_《疯狂外星人》中外星人带上金箍就是大圣，放下金箍就是至尊宝！...
  8. python标准库time_python标准库介绍——12 time 模块详解
  9. 异动处理中的发票类型应用(Complaint Processing)
  10. hbase集群 数据写入_大数据入门必学 - Hbase集群搭建
  11. Mybatis的xml映射文件，sql的模糊查询的实现（两种方式）占位符拼接，concat关键字
  12. VJC案例-走五角星
  13. 单片机c语言1602怎么接线,lcd1602中文资料分享：lcd1602接线图_lcd1602与单片机连接图 - 全文...
  14. 重构kz-admin
  15. 四阶幻方c语言编程,13年 第四届 蓝桥杯C语言C组 第4题 幻方填空
  16. 微信小程序【渲染层网络层错误】解决方法
  17. 蒲公英服务器搭建小程序,uniapp 小程序打包发布
  18. GISer从零开始学习ArcGIS API for JavaScriptArcGIS Online教程（三）免费注册和使用ArcGIS Online
  19. 为什么一条普通的100M有线网络要优于1000M无线?
  20. Android 切片软件使用教程,Cutterman 切图使用指南

热门文章

  1. 奋斗吧，程序员——第四十三章 十步杀一人，千里不留行
  2. tp5 华为云OBS对象存储
  3. 外媒推荐2014年不可错过的科技书单
  4. python随机种子数_关于随机：rng种子的Python数量
  5. 如何评价百度除搜索引擎外的其他产品（贴吧，音乐，文库等）及服务？
  6. 每架飞机只有一个油箱，一箱油可供一架飞机绕地球飞半圈，空中没有加油机，但飞机之间可以相互加油。...
  7. eNSP模拟器中FTP文件传输
  8. 阿里云开源离线同步工具DataX3.0,用于数据仓库、数据集市、数据备份
  9. 国产数据库的领导者——达梦DM8入门介绍
  10. YOLOv5的参数与性能指标