![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaWeb
-森木-
这个作者很懒,什么都没留下…
展开
-
BootStrap4笔记——滚动监听
滚动监听自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。1.创建滚动监听<!-- 可滚动区域 --><body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area --><nav clas原创 2020-12-03 20:28:09 · 409 阅读 · 0 评论 -
BootStrap笔记——附加导航
附加导航锁定在某个位置,不会随着页面其他部分一起滚动<style>/* Custom Styles */ ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.na原创 2020-12-02 21:18:18 · 380 阅读 · 0 评论 -
BootStrap笔记——轮播
轮播1.基本轮播<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"><原创 2020-12-01 19:41:54 · 211 阅读 · 0 评论 -
BootStrap笔记——折叠
折叠1.基本折叠点击前点击后再次点击<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> 简单的可折叠组件</button><div id="demo" class="collapse in"> 折叠内容 折叠内容 折叠内容 折叠内容</div>2.面板折叠<div class="pan原创 2020-11-30 19:12:28 · 93 阅读 · 0 评论 -
BootStrap笔记——提示
提示1.左侧提示<button style="margin-left:100px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="提示信息">鼠标悬停</button> <script> $(function () { $("[data-toggle='tooltip']").tooltip(); });</scrip原创 2020-11-29 20:45:02 · 148 阅读 · 0 评论 -
BootStrap笔记——可切换导航栏
可切换导航栏ul标签与nav标签(及其相关标签)结合使用<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#1-1" data-toggle="tab">导航栏名称1-1</a></li> <li><a href="#1-2" data-toggle="tab">导航栏名称1-2</a></li>原创 2020-11-28 20:56:12 · 930 阅读 · 0 评论 -
BootStrap笔记——动态窗体
动态窗体1.静态模态窗口<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><原创 2020-11-27 21:41:07 · 175 阅读 · 0 评论 -
BootStrap笔记——顶部底部
顶部底部1.贴在顶部(不会消失)body{padding-top:70px;}下拉前:下拉后:<style> body{ padding-top:70px; }</style><nav class="navbar navbar-default navbar-fixed-top"> <button class="btn btn-info">菜单1</button> <button class="b原创 2020-11-26 21:04:26 · 366 阅读 · 0 评论 -
BootStrap笔记——列表组
列表组1.基本列表组<ul class="list-group"> <li class="list-group-item">回锅肉</li> <li class="list-group-item">烧烤</li> <li class="list-group-item">鱼香肉丝</li> <li class="list-group-item">麻婆豆腐</li> <li原创 2020-11-25 20:43:23 · 89 阅读 · 0 评论 -
BootStrap笔记——面板、嵌入效果
面板1.基本面板<div class="panel panel-default"> <div class="panel-body"> 这是一个基本的面板 </div></div>2.面板标题<div class="panel panel-default"> <div class="panel-heading"> 不带 title 的面板标题 </div> <di原创 2020-11-24 19:40:30 · 293 阅读 · 0 评论 -
BootStrap笔记19
进度条progress1.基本进度条.progress-bar<div class="progress"> <div class="progress-bar" style="width: 60%;"> </div></div>2.带有提示的进度条提示直接写在.progress-bar里<div class="progress"> <div class="progress-bar" style="width:原创 2020-11-23 19:46:55 · 62 阅读 · 0 评论 -
BootStrap笔记18
警告1.警告框.alert-success.alert-info.alert-warning.alert-danger<div class="alert alert-success">操作成功</div><div class="alert alert-info">信息提示</div><div class="alert alert-warning">警告提示</div><div class="alert aler原创 2020-11-22 21:57:56 · 120 阅读 · 0 评论 -
BootStrap笔记17
缩略图1.相册风格在图像周围添加带有 class .thumbnail 的 a 标签。这会添加四个像素的内边距(padding)和一个灰色的边框。当鼠标悬停在图像上时,会动画显示出图像的轮廓。<div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="kittens.jpg"原创 2020-11-21 21:43:49 · 43 阅读 · 0 评论 -
BootStrap笔记16
超大屏幕 页面标题1.超大屏幕该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距。<div class="jumbotron"> <h1>欢迎登陆页面!</h1> <p>这是一个超大屏幕(Jumbotron)的实例。</p> <p><a class="btn btn-primary btn-lg" role="button"> 学习更多</原创 2020-11-20 20:41:40 · 90 阅读 · 0 评论 -
BootStrap笔记15
标签 徽章1.标签标签可用于计数、提示或页面上其他的标记显示。<span class="label label-default">默认标签</span><span class="label label-primary">主要标签</span><span class="label label-success">成功标签</span><span class="label label-info">信息标签</s原创 2020-11-19 20:50:20 · 64 阅读 · 0 评论 -
BootStrap笔记14
分页1.基本分页<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li&g原创 2020-11-18 22:35:54 · 53 阅读 · 0 评论 -
BootStrap笔记13
面包屑导航面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。<ul class="breadcrumb"> <li><a href="#">前端技术</a></li> <li><a href="#">BootStrap </a></li> <li class="act原创 2020-11-17 19:41:02 · 41 阅读 · 0 评论 -
BootStrap笔记12
导航栏1.标签页<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Java</a></li> <li role="presentation"><a href="#">IOS</a></li> <li role="presentation"><a href="#"&原创 2020-11-16 22:53:50 · 53 阅读 · 0 评论 -
BootStrap笔记11
输入框组使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容,可以向用户输入添加公共的元素。1.基本组合<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="用户名" aria原创 2020-11-15 20:05:45 · 67 阅读 · 0 评论 -
Bootstrap笔记10
按钮式下拉菜单1.单按钮下拉菜单只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown"> 前端 <span class="caret"></span> </bu原创 2020-11-14 21:06:51 · 41 阅读 · 0 评论 -
BootStrap笔记9
按钮组按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。1.按钮组<div class="btn-group" role="group"> <button type="button" class="btn btn-default">按钮1</button> <button type="button" class="btn btn-default">按钮2</button> <button ty原创 2020-11-13 19:44:57 · 65 阅读 · 0 评论 -
BootStrap笔记8
下拉菜单1.下拉菜单<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> <!--下拉按钮,id用来给下拉菜单指向用的--> 菜单 <span class="caret"></span> <原创 2020-11-12 20:23:42 · 43 阅读 · 0 评论 -
BootStrap笔记7
栅格布局运用Bootstrap的栅格系统,可以做出像table那样定义多少行,多少列效果,但是又比table灵活。1.栅格系统运用Bootstrap的栅格系统,首选需要准备一个class=container的div紧接着需要一个class=row的 div,表示行再挨着的div,就是列了。Bootstrap的栅格系统会默认把一行,分成12列。<div class="container"> <div class="row"> <div cla原创 2020-11-11 19:47:32 · 52 阅读 · 0 评论 -
BootStrap笔记6
其他1.关闭按钮×close <button type="button" class="close" aria-hidden="true"> × </button>ARIA点击这里2.下拉菜单的按钮▼caret<span class="caret"></span>3.左浮动左浮动 ,相当于css中的float:leftpull-left4.右浮动右浮动 ,相当于css中的floa原创 2020-11-10 20:02:04 · 56 阅读 · 1 评论 -
BootStrap笔记5
背景1.强调的背景深蓝色,一般用在需要强调的文字上bg-primary2.成功操作文字的背景绿色,一般用在操作成功了的文字上bg-success3.信息提示文字的背景浅蓝色,一般用在提示性的文字上bg-info4.警告提示文字的背景黄色,一般用在警告信息的文字上bg-warning5.危险提示文字的背景红色,一般用在危险信息的文字上bg-danger...原创 2020-11-09 20:10:43 · 104 阅读 · 0 评论 -
BootStrap笔记4
表单 文本1.表单对输入元素使用form-control 可以去除阴影,边框附带淡蓝色,输入状态更加柔和form-control2.淡灰色文本淡灰色,常用在说明性文字text-muted3.强调的文本蓝色,常用在需要强调的文字上text-primary4.操作成功文本绿色,进行了成功的行为后的提示文字text-success5.提示信息文本蓝色(比强调文本颜色暗一点),一般用于指导性文字上text-info6.警告文本黄色,一般用于修改行为text-warnin原创 2020-11-08 21:03:35 · 58 阅读 · 0 评论 -
什么是浏览器跨域访问操作,JS如何实现?
什么是浏览器跨域访问操作,JS如何实现?浏览器跨域访问操作什么是跨域?跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。js实现跨域访问1.通过jsonp跨域2.通过修改document.domain来跨子域3.使用window.name来进行跨域4.使用HTML5中新引进的window.postMessage方法来跨域传送数据具体方法参考:https://blog.csdn.net/kongjiea/article/details/3886原创 2020-11-07 21:22:25 · 109 阅读 · 0 评论 -
JS在发送AJAX请求时,URL的域名地址是使用绝对地址还是相对地址
JS在发送AJAX请求时,URL的域名地址是使用绝对地址还是相对地址ajax的url有两种,一种是绝对路径,另一种是相对路径。一、绝对路径: 包括协议名称、主机地址、端口、web项目名称等的完整请求路径。例如:$.ajax({url:“http://localhost:8080/webname/test”});好处:比如在webA项目中的ajax需要请求webB项目中的服务,则必须使用绝对路径。坏处:使用绝对路径要求古地理更web项目的名称,如果webB项目重命名了,则对应的ajax请求都需转载 2020-11-07 21:10:49 · 920 阅读 · 0 评论 -
BootStrap笔记3
图片1.圆角图片的四个边角变得圆滑img-rounded2.圆形img-circle3.缩略图img-thumbnail原创 2020-11-05 20:49:06 · 36 阅读 · 0 评论 -
BootStrap笔记2
表格1.基本表格table<table class="table"></table>2.带斑马线的表格table table-striped3.带边框的表格table table-bordered4.有鼠标悬停状态的表格table table-hover5.多种表格效果整合在一起table table-striped table-bordered table-hover6.激活样式active7.成功样式(绿色)success8.信息样原创 2020-11-04 21:29:06 · 48 阅读 · 0 评论 -
BootStrap笔记
按钮样式1.原始样式按钮btn<button type="button" class="btn">原始样式按钮</button>2.默认按钮btn btn-default3.提交按钮(深蓝色)btn btn-primary4.成功按钮(绿色)btn btn-success5.信息按钮(浅蓝色)btn btn-info6.警告按钮(黄色)btn btn-warning7.危险按钮(红色)btn btn-danger8.表示为链接btn原创 2020-11-03 22:06:11 · 44 阅读 · 0 评论 -
HTML引用公共页面(header.html和footer.html)
HTML引用公共页面(header.html和footer.html)我们做项目时,会发现许多页面有相同的部分,重复写会花费大量不必要的时间,复制的话修改不方便。只要我们把公共部分提取出来,单独写,在需要用的时候引入就可以。<body><div class="headerpage"></div><div>...中间部分...</div><div class="footerpage"></div><scrip原创 2020-11-02 17:01:22 · 3435 阅读 · 0 评论 -
Javascript用户名验证
Javascript用户名验证核心:正则表达式验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS登录验证</title></head><body><script> function onclickFun() { var patt = /^\w{5,12}$原创 2020-11-01 22:10:48 · 1435 阅读 · 1 评论 -
数据库
数据库1.创建数据库create database 数据库名2.创建表create table 表名 ( 列名 数据类型 )3.查询数据select 目标列表达式from 表名[where 条件]4.插入数据insert into 表名 [属性列] values ( 常量 )5.修改数据update 表名 set 列名 = 表达式[where 条件]6.删除数据delete from 表名 [where 条件]...原创 2020-10-31 21:26:00 · 134 阅读 · 0 评论 -
JavaBean笔记
JavaBeanJavaBean是一个可重复使用的软件组件,是遵循一定标准、用Java语言编写的一个类,该类的一个实例称为一个JavaBean。1.动作标记useBeanuseBean动作标记用来查询或者实例化一个JavaBean。<jsp:useBean id = "bean的名字" class = "创建bean的类" scope = "bean的有效范围"/>或<jsp:useBean id = "bean的名字" type = "创建bean的类" scope = "b原创 2020-10-30 22:14:31 · 275 阅读 · 0 评论 -
JQuery笔记12
字符串 JSON 对象转换1.字符串 ——去除首尾空白$.trim() 去除首尾空白<script> document.write($.trim(" Hello JQuery "));document.close(); </script> Hello JQuery2.JSON——将JSON格式的字符串,转换为JSON对象$.parseJSON 将JSON格式的字符串,转换为JSON对象3.对象转换JQuery转DOM通过get(0)或原创 2020-10-29 20:57:45 · 99 阅读 · 0 评论 -
JQuery笔记11
数组操作1.遍历$.each 遍历一个数组第一个参数是数组第二个参数是回调函数 (i是下标,n是内容)<script>var a = new Array(1,2,3);$.each( a, function(i, n){ document.write( "元素[" + i + "] : " + n + "<br>" );})document.close(); </script> 元素[0] : 1元素[1] : 2元素[2] : 32原创 2020-10-28 20:40:33 · 60 阅读 · 0 评论 -
内置对象session与httpsession对象是同一个东西吗?
内置对象session与httpsession对象是同一个东西吗?jsp的Session和Servlet的Session本质上是一致的。区别是:jsp中session是作为隐式对象存在的,可以直接使用;Servlet中的session需要手动提取后才能使用.HttpSession是Java平台对session机制的实现规范,因为它仅仅是个接口,具体到每个web应用服务器的提供商,除了对规范支持之外,仍然会有一些规范里没有规定的细微差异。...原创 2020-10-27 19:57:02 · 121 阅读 · 0 评论 -
JQuery笔记10
事件 11.加载页面加载有两种方式表示$(document).ready();$(); 这种比较常用图片加载用load()函数<script> $(document).ready(function(){ $("#id1").html("页面加载成功"); }); $(function(){ $("#img").load(function(){ $("#id2").html("图片加载成功"); }); }); &l原创 2020-10-26 20:54:48 · 67 阅读 · 0 评论 -
JQuery笔记9
效果1.显示 隐藏 切换显示 :show()隐藏 :hide()切换 :toggle()延时操作 :()中填入时间,单位:毫秒<script>$(function(){var div = $("#d"); $("#b1").click(function(){ div.hide(); //div.hide(2000); });}</script>2.向上滑动 向下滑动 滑动切换向上滑动 :slideUp()向下滑动 :sl原创 2020-10-25 21:45:48 · 48 阅读 · 0 评论