自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

熊猫大哥大

如有技术问题可通过微信公众号【熊猫大哥大】与我联系

  • 博客(24)
  • 资源 (7)
  • 论坛 (1)
  • 收藏
  • 关注

原创 Bootstrap教程(21)--响应式导航栏详解

本文目录1. 概述2. 响应式导航栏3. 可折叠导航栏4. 深色导航栏5. 顶部固定菜导航栏6. 导航栏添加下拉菜单和表单控件7. 小结1. 概述在很长的一段时间里,我都很羡慕一个一些大神的个人网站。这些网站有一个共同特点,同时支持PC端显示和手机端显示。当使用手机打开时,导航栏会自动折叠为一个按钮,效果棒极了。后来学会了Bootstrap才知道,偶买噶,Bootstrap提供的导航栏原来天生就带这效果。厉害!2. 响应式导航栏导航栏的创建还是比较复杂的,但是不要担心,我们来一步步分析创建过程。

2021-02-28 17:29:43 139

原创 Bootstrap教程(20)--选项卡式导航、胶囊式导航、面包屑导航

本文目录1. 概述2. 选项卡式导航2.1 普通选项卡导航2.2 等宽选项卡导航3. 胶囊式导航3.1 普通胶囊式导航3.2 垂直胶囊式导航4. 面包屑导航5. 小结1. 概述Bootstrap提供了多种导航控件,本篇就来介绍下常用的选项卡式导航、胶囊式导航及面包屑导航。2. 选项卡式导航2.1 普通选项卡导航选项卡式导航,顾明司仪,看起来就像多个选项卡,基本用法如下: 选项卡式导航 <nav> <

2021-02-28 16:02:19 141

原创 Bootstrap教程(19)--下拉菜单、按钮式下拉菜单

本文目录1. 概述2. 下拉菜单2.1 普通下拉菜单2.2 更换颜色2.3 更换尺寸2.4 添加分割线2.5 菜单分组2.6 上拉菜单3. 按钮式下拉菜单4. 小结1. 概述下拉菜单使用频率也是比较高的,比较常见的使用场景是在导航菜单栏,某个主菜单含有下拉的子菜单。Bootstrap为下拉菜单提供了两种实现方式,即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下,从图中可以看出,普通下拉菜单和按钮式下拉菜单的样式基本相同,唯一比较明显的区别是:普通下拉菜单相当于菜单,前后自动换行;而按钮式的下

2021-02-28 09:54:45 62

原创 Bootstrap教程(18)--进度条

本文目录1. 概述2. 普通进度条3. 隐藏文本4. 调整颜色5. 条纹效果6. 动画效果7. 小结1. 概述进度条的使用频率并不高,但是如果遇到合适的场景,使用之后对显示效果的提升还是比较明显的。Bootstrap为进度条提供了比较优雅的实现,本篇就来介绍下常见用法。2. 普通进度条先看一段代码: <div class="progress"> <div class="progress-bar" aria-valuenow="60

2021-02-25 16:36:59 45

原创 反射之IllegalAccessException、NoSuchFieldException

1. IllegalAccessException使用反射访问对象的私有属性,正常代码如下: Field field = obj.getClass().getDeclaredField(fieldName); field.setAccessible(true); // 设置对象的访问权限,保证对private的属性的访问 String result=(String) field.get(obj);此时,如果没有写field.setAccessible(true);这一行代码,会导致I

2021-02-25 09:53:35 36

原创 Bootstrap教程(17)--分页

本文目录1. 概述2. 基本分页3. 使用转义字符4. 调整分页控件大小5. 设置分页按钮状态6. 小结1. 概述Bootstrap除了提供了表格,还提供了分页控件,使用起来也是比较简单,推荐大家尝试。2. 基本分页通过为<ul>元素设置pagination类,即可将列表转化为分页控件。示例代码: <div class="col-md-12"> 普通分页:<br> <ul class="p

2021-02-24 15:47:22 37

原创 Bootstrap教程(16)--模态框

本文目录1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结1. 概述模态框这个名字有点高雅了,其实就是对话框,用来弹出一个新的界面。模态框的使用非常的场景,例如在用户管理页面,当进行用户新增时,可以点击新增按钮,弹出一个窗体供填入用户信息然后保存。注意Bootstrap的模态框一次只能显示一个,不能在打开一个模态框后尝试继续打开第二个。2. 模态框样式模态框相关的样式类比较多,我个人是感觉有些过于复杂了,当然这里也不排除Bo

2021-02-24 14:11:29 49

原创 Bootstrap教程(15)--警告框、弹出框、工具提示框

本文目录1. 概述2. 警告框2.1 普通警告框2.2 可关闭警告框3. 弹出框3.1 弹出框初始化3.2 弹出框显示4. 工具提示框4.1 工具提示框初始化4.2 工具提示框显示5. 小结1. 概述本篇介绍的几种显示提示信息的方式,这几种方式并不常用,大家了解即可。2. 警告框2.1 普通警告框警告框用来显示一些希望让用户注意到的内容,例如上传文件时的主要注意的警示信息,或者更加严重的上传失败的提示信息。警告框有4中具体样式类,我们通过一个示例来演示下: <div class="

2021-02-23 16:56:12 111

原创 Bootstrap教程(14)--媒体与媒体列表

本文目录1. 概述2. 媒体实现3. 媒体列表4. 小结1. 概述看到媒体,不要误解,此处媒体不是指的单纯的图形、视频、音频等媒体形式,而是指的Bootstrap中提供的一种显示组件。Bootstrap媒体一般由文字、图像构成,大多数情况下图像作为一个抽象代表,文字作为内容描述。举个最常见例子,微信中的聊天会话就是一个典型的媒体,左侧是头像,右侧上方是微信名称,右侧下方是最新的消息内容。接下来我们就来使用Bootstrap实现下媒体。2. 媒体实现我们以微信聊天会话为例实现下媒体。首先,我们

2021-02-21 18:05:22 33

原创 Bootstrap教程(13)--图像和缩略图组

本文目录1. 概述2. 响应式图像3. 图像样式4. 缩略图组5. 小结1. 概述图片比文字传达信息更加直观、更加具象,具备不可代替的意义。必不可少的,Bootstrap也为图像提供了一定支持,本篇就来具体介绍下。2. 响应式图像通过给图像设置.img-responsive类,即可将图像设置为响应式图像,可以自动适应容器的大小。<img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-responsive">3.

2021-02-21 17:41:55 61

原创 Bootstrap教程(12)--使用图标

本文目录1. 背景2. 使用Glyphicon图标3. 结合按钮使用4. 小结1. 背景大家都晓得,使用图标后,页面效果肯定是好许多的。一个简单的按钮,添加图标后,有一种传神的效果。精美的图标是要收费的,你享受人家优秀的成果,就得付出相应的价钱。有一个相当不错的图标库Glyphicon,老外做的,一般情况下咱们要正儿八经的使用,是要收费的。但是在Bootstrap框架下,使用Glyphicon图标是免费的,就是这么神奇!2. 使用Glyphicon图标使用Glyphicon图标很简单,为&lt

2021-02-21 17:19:05 49

原创 Bootstrap教程(11)--按钮与按钮组

本文目录1. 概述2. 按钮的使用2.1 设置Bootstrap按钮2.2 调整按钮大小2.3 调整按钮颜色样式3. 按钮组的使用3.1 使用按钮组3.2 调整按钮组的大小3.3 调整按钮组方向4. 小结1. 概述按钮可以说是使用频率最高的交互组件之一了,Bootstrap框架对按钮也非常重视,提供了多种样式强化类。同时还提供了按钮组,可以组合使用按钮,更加方便。2. 按钮的使用2.1 设置Bootstrap按钮在Bootstrap框架下,只需要为按钮添加.btn类,然后添加.btn-defaul

2021-02-21 12:28:03 41

原创 Bootstrap教程(10)--使用输入组来组合控件

本文目录1. 概述2. 使用输入组3. 调整输入组的大小4. 小结1. 概述Bootstrap还提供了一种组合使用表单控件的方式,即输入组。可以为输入控件添加前置、后置的补充内容。注意补充内容可以是文本,也可以是其他表单控件。2. 使用输入组输入组的使用并不复杂,通过.input-group类修饰的元素包裹输入控件,然后在输入控件的前、后添加.input-group-addon类修饰的元素即可。代码如下: <div class="col-md-6">

2021-02-21 10:48:50 36

原创 Bootstrap系列入门教程(已完结)

2021年春节,闲来无事,学习了下HTML/CSS/JavaScript基础知识。学习完成后发现,作为一个重逻辑轻设计的程序员,自己在样式设计上存在天然缺陷——缺乏美感。要想实现漂亮的网页,还是只能借助框架,于是翻出Bootstrap,作为新一代响应式Web框架的鼻祖,在样式设计方面,堪称权威。温故知新,在学习过程中,自己对Bootstrap进行了重点提炼、归纳总结,故有此教程。目录如下:Bootstrap教程(1)–为何要学习BootstrapBootstrap教程(2)–安装Bootstrap

2021-02-21 09:46:31 149 2

原创 Bootstrap教程(9)--使用表单控件

本文目录1. 概述2. 基本输入控件3. 调整表单控件的大小4. 表单控件的特殊用法4.1 单选框用法4.2 复选框用法5. 小结1. 概述表单控件用来获取表单中输入的信息,HTML5提供了各种不同的表单控件,而在Bootstrap中这些控件的样式得到了进一步的加强。2. 基本输入控件在Bootstrap中,只需为基本输入控件添加.form-control类,即可将控件的样式设置为Bootstrap提供的预设样式。接下来我们用一个实例来展示下常用的输入控件。 <!-- 基本输入控件 -

2021-02-21 09:33:27 54

原创 Bootstrap教程(8)--使用表单样式

本文目录1. 概述2. HTML表单样式3. Bootstrap默认表单4. Bootstrap水平表单5. Bootstrap内联表单6. 小结1. 概述HTML自带的表单没有样式可言,非常难看。Bootstrap提供了样式优雅大方的表单,拿来即用,非常nice。本篇就来讲解下Bootstrap框架下表单样式的设置方法。2. HTML表单样式我们先来看下HTML自带的表单是啥样的。 <form action="#"> <label fo

2021-02-20 17:36:37 71

原创 Bootstrap教程(5)--使用标签、徽章、巨幕、Well

本文目录1. 概述2. 标签3. 徽章4. 巨幕5. Well6. 小结1. 概述本篇介绍下几个常用的Bootstrap组件,即标签、徽章、巨幕和Well。这几个组件都比较简单,直接在HTML元素上添加class样式即可。2. 标签标签一般用于为元素添加附加信息,一般通过为<span>元素添加样式类来实现,例如: <div class="container-fluid"> <div class="row"> <d

2021-02-18 17:58:20 64

原创 Bootstrap教程(4)--开发标准的响应式网页

本文目录1. 背景2. 创建标准HTML5页面3. 添加响应式内容4. 小结1. 背景响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页,本篇就来讲解下如何使用Bootstrap构建符合标准规范的响应式网页。2. 创建标准HTML5页面首先创建一个标准的HTML5网页,代码如下:<!DOCTYPE html><html><head> <title>boostrap-responsive</title>

2021-02-18 10:04:09 80

原创 Window对象提示框、确认框、输入框、弹窗详解

1. 背景Window对象即浏览器窗口对象,提供了很多实用的属性和方法,也包含多种交互的对话框。一般开发人员习惯上使用UI框架提供的弹窗,能够提供更加精美的样式,而且在各个浏览器下表现一致。其实Window对象自带的对话框功能还算比较丰富,也算是一种可行的选择,本篇就来具体了解下。2. alert提示框window.alert方法用来显示一个提示框,该方法没有返回值,注意弹窗后脚本将被阻塞,直到用户点击确定后才执行后面的脚本。 <button type="button" onclick="

2021-02-10 10:46:44 148

原创 CSS元素盒类型block/inline/inline-block/none详解

1. 背景CSS中的盒子模型大家肯定比较熟悉了,实际上CSS还提供了一种设置HTML元素盒类型的属性,即display属性。通过display属性,可以设定元素的盒类型,比较常见的类型即block/inline/inline-block/none,接下来我们具体演示下。2. blockblock表示将元素设定为块级元素,也就是说单独的占用一块,这一块跟前后的元素在垂直方向是隔离的,相当于前后都有换行符。看如下代码:<html><head> <meta ch

2021-02-10 09:13:24 86

原创 HTML设置表单的enctype编码方式

1. 用途HTML表单可以通过enctype属性设定表单内容提交给服务器时,发送的数据的编码方式,具体有三个值:application/x-www-form-urlencoded,默认的编码方式,传输普通的表单内容(不能传输文件)multipart/form-data,可用于将文件上传到服务器的编码方式text/plain,目前使用较少的编码方式,也不推荐使用2. application/x-www-form-urlencoded 解释当表单代码如下:<form> <i

2021-02-09 18:30:18 64

原创 Element el-input-number 计数器详解

1. 用途计数器是一种特殊的输入框,用来输入数字。除了可以直接键盘输入外,还支持通过按钮对数字进行调整。2. 基本用法如下示例,计数器显示数字绑定变量后,可以直接通过+/-按钮调整数值。 基本用法 <el-input-number v-model="num1" label="请输入数量"></el-input-number> <el-divider></el-divider>效果:3. 指定最大、最小值可以为计数器指定数值的最

2021-02-02 11:46:39 1472 4

原创 Element el-input 输入框详解

1. 用途输入框是使用非常多的元素,用来输入用户名、密码等等信息。Element提供了功能和样式丰富的输入框,本篇就来了解下。2. 输入框输入框为el-input,其编译后生成的HTML元素为input,样式class中包含el-input,所以我们首先设定下统一样式,便于演示。.el-input { width: 200px;}2.1 输入框基本功能输入框可以与js变量双向绑定,代码为: 输入框基本功能:双向绑定 <el-input v-model="input1

2021-02-02 10:15:56 3172 4

原创 window.innerHeight window.outerHeight 与screen.height

window与screenwindow是浏览器支持的全局变量,也可以通过document.defaultView获取它,表示浏览器的窗口信息。innerHeight与outerHeightinnerHeight表示窗口内容区域的高度,这是不包括边框、菜单栏的。而outerHeight是窗口的整体高度,包括边框、菜单栏等。所以一般常用的是innerHeight。screen.heightscreen是指的屏幕,表示当前整个显示器显示的屏幕部分,不限于当前的窗口。height是屏幕的宽度,例如屏幕

2021-02-02 08:00:51 127 2

pywin32(Python打包exe所需工具)

pywin32

2021-02-11

Eclipse适用YaHei.Consolas字体

ECLIPSE适用字体,建议适用。ECLIPSE适用字体,建议适用。ECLIPSE适用字体,建议适用。ECLIPSE适用字体,建议适用。

2017-11-24

Spring4.3.25Jar包.zip

Spring 4.3.25 版本所有Jar包,供使用下载。包含Spring开发常用Jar,如mvc、aop等等。

2019-08-25

ICBC_NC3.1.0.8.rar

工商银行银企互联NC工具3.1版本,通过该工具可下载U盾证书并访问工行接口,包含相关安装包和文档说明。

2019-09-02

工行银企互联业务整合项目错误代码记录表.xls

工行银企互联业务整合项目错误代码记录表.xls

2021-02-26

JSP+Servlet培训班作业管理系统

使用JSP和Servlet开发的作业管理系统,包含校长、教师、学生三种用户,可以发布课程、发布作业、在线提交作业。

2017-05-03

pandaorm.jar

使用方法参见博客:http://blog.csdn.net/woshisangsang/article/details/64127570

2017-07-17

熊猫大哥大的留言板

发表于 2020-01-02 最后回复 2020-01-11

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除