BootStrap 图片样式、辅助类样式和CSS组件的实例详解

首先把模板代码上上来:



 
  
  
  
  
  
  
  BootStrap基础入门

图片样式

.img-responsive：直接为图片添加该样式，可以实现响应式图片。

.center-block：图片居中样式，而不能使用text-center样式。

图片形状样式：.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)

图片样式应用
   
    
    文字文字文字文字文字文字文字文字文字文字文字文字

辅助类样式

文本颜色类：.text-muted(柔和的)、.text-primary、.text-success、.text-info、.text-warning、.text-danger

背景颜色类：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger

三角符号：

快速浮动类：.pull-left(左浮动)、.pull-right(右浮动)

清除浮动：为父元素添加 .clearfix 可以清除浮动。

让内容块网页居中：

CSS组件

下拉菜单

.dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。

data-toggle属性：下拉菜单触发器。取值为“dropdown”。

.dropdown-menu：给

.dropup：向上弹出的下拉菜单(下拉菜单父元素)。

下拉菜单对齐方式：.dropdown-menu-left和.dropdown-menu-right

.divider：为下拉菜单添加分隔线，用于将多个链接分组。

.disabled：禁用的菜单项。

 下拉菜单的应用
   
    
    
     
      HTML
     
     
      CSS
     
     
      Java
     
     
     
      Maven
     
     
      MySQL
     
     
      Spring

按钮组

.btn-group：按钮组(可以实现将一组按钮放在同一行)。

.btn-toolbar：按钮组工具栏(将多个按钮组放在其中)。

按钮组的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs

.btn-group-vertical：垂直排列的按钮组。

按钮组的应用

按钮式下拉菜单

在这里呢，如果我们下拉菜单很多，就可以用滚动条来解决！

用overflow: auto;，然后定义一个高度就好。

输入框组

.input-group：只能用于文本框，不能用于。</p> <p>.input-group-addon用于在<input>前后添加额外元素，赋给一个<span>元素即可。</p> <p><span style="color: #ff0000">注意：</span>将.input-group-addon和<input>元素包在.input-group之中。</p> <p>.input-group-lg 和 .input-group-sm 可以改变输入框组的尺寸。</p> <p>.input-group-btn可以作为额外元素的按钮，应该是作为<button>的父元素。 </p> <div class="jb51code"> <pre class="brush:js;"> <h2 class="page-header">输入框组的应用</h2> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="username" /> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default">Go!</button> </span> <input type="text" class="form-control" placeholder="username" /> </div> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li class="divider"></li> <li> <a href="#">Separated link</a> </li> </ul> </div>  <input type="text" class="form-control"> </div>  <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default"> 按钮 </button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="">按钮</a> </li> <li> <a href="">按钮</a> </li> <li> <a href="">按钮</a> </li> <li class="divider"></li> <li> <a href="">按钮</a> </li> </ul> </div> <input type="text" class="form-control"> </div></pre> </div> <p style="text-align: center"><a href="http://img.e-com-net.com/image/info11/ce84fc30736f405990aa0042bc82187c.jpg" target="_blank"><img title="" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解_第6张图片" src="http://img.e-com-net.com/image/info11/ce84fc30736f405990aa0042bc82187c.jpg" width="650" height="128" style="border:1px solid black;"></a></p> <p><span style="color: #ff0000"><strong>标签页(选项卡)</strong></span></p> <p>.nav是标签页的基类</p> <p>.nav-tabs是标签页类样式</p> <p>.active是标签页的状态类(当前样式)</p> <p>.nav-pills胶囊式标签页</p> <p>.nav-stacked胶囊式标签页堆放排列(垂直排列) </p> <div class="jb51code"> <pre class="brush:js;"> <h2 class="page-header">选项卡效果</h2> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#">Home</a> </li> <li role="presentation"> <a href="#">Profile</a> </li> <li role="presentation"> <a href="#">Messages</a> </li> </ul> <ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"> <a href="#">Home</a> </li> <li role="presentation"> <a href="#">Profile</a> </li> <li role="presentation"> <a href="#">Messages</a> </li> </ul></pre> </div> <p style="text-align: center"><a href="http://img.e-com-net.com/image/info11/c3711aa33eeb421e8a62e2136a2f38f8.jpg" target="_blank"><img title="" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解_第7张图片" src="http://img.e-com-net.com/image/info11/c3711aa33eeb421e8a62e2136a2f38f8.jpg" width="518" height="191" style="border:1px solid black;"></a></p> <p><span style="color: #ff0000"><strong>路径导航</strong></span></p> <p>.breadcrumb：赋给</p> <p>可以实现面包屑效果。</p> <p>.active赋给当前栏目，当前栏目不加链接。 </p> <div class="jb51code"> <pre class="brush:js;"> <h2 class="page-header">路径导航效果</h2> <ol class="breadcrumb"> <li> <a href="#">Home</a> </li> <li> <a href="#">Library</a> </li> <li class="active">Data</li> </ol></pre> </div> <p style="text-align: center"><a href="http://img.e-com-net.com/image/info11/f9e21b711a5b447185af43a882ad5cfb.jpg" target="_blank"><img title="" alt="" src="http://img.e-com-net.com/image/info11/f9e21b711a5b447185af43a882ad5cfb.jpg" width="650" height="86"></a></p> <p><span style="color: #ff0000"><strong>分页</strong></span></p> <p>.pagination赋给</p> <p>元素可以实现分页效果</p> <p>« 上一页</p> <p>» 下一页</p> <p>.disabled禁用状态</p> <p>.active激活状态</p> <p>.pagination-lg分页大尺寸</p> <p>.pagination-sm分页小尺寸</p> <p>.pager可以实现翻页效果。上一页、下一页效果。 </p> <div class="jb51code"> <pre class="brush:js;"> <div class="text-center" style="border: 1px solid red;"> <ul class="pagination pagination-lg pager"> <li class="previous"> <a href="#">← 上一页</a> </li> <li class="disabled"> <a href="">«</a> </li> <li class="active"> <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="">6</a> </li> <li> <a href="">7</a> </li> <li> <a href="">8</a> </li> <li> <a href="">9</a> </li> <li> <a href="">10</a> </li> <li> <a href="">»</a> </li> <li class="next"> <a href="#">下一页 →</a> </li> </ul> </div> <div class="text-center" style="border: 1px solid red;"> <ul class="pagination pagination-lg"> <li> <a href="">«</a> </li> <li class="active"> <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="">6</a> </li> <li> <a href="">7</a> </li> <li> <a href="">8</a> </li> <li> <a href="">9</a> </li> <li> <a href="">10</a> </li> <li> <a href="">»</a> </li> </ul> </div></pre> </div> <p style="text-align: center"><a href="http://img.e-com-net.com/image/info11/a3ae4839ebdd482982fabdf32818eb61.jpg" target="_blank"><img title="" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解_第8张图片" src="http://img.e-com-net.com/image/info11/a3ae4839ebdd482982fabdf32818eb61.jpg" width="650" height="119" style="border:1px solid black;"></a></p> <p><span style="color: #ff0000"><strong>缩略图</strong></span></p> <p>.thumbnail赋给<a>元素，可以实现缩略图样式。</p> <p>.caption 可以实现缩略图标题及描述 </p> <div class="jb51code"> <pre class="brush:js;"> <h2 class="page-header">缩略图效果</h2> <div class="row"> <div class="col-md-2"> <a href="" class="thumbnail"><img src="img/001.png" /></a> <div class="caption"> <h4>图片一</h4> </div> </div> <div class="col-md-4"> <a href="" class="thumbnail"><img src="img/001.png" /></a> <div class="caption"> <h4>图片一</h4> </div> </div> <div class="col-md-6"> <a href="" class="thumbnail"><img src="img/001.png" /></a> <div class="caption"> <h4>图片一</h4> </div> </div> </div></pre> </div> <p style="text-align: center"><a href="http://img.e-com-net.com/image/info11/8ea401033c66442989e38f444df54be2.gif" target="_blank"><img title="" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解_第9张图片" src="http://img.e-com-net.com/image/info11/8ea401033c66442989e38f444df54be2.gif" width="1173" height="205" style="border:1px solid black;"></a></p> <p><span style="color: #ff0000"><strong>导航栏</strong></span></p> <p>导航栏有一个不同，他不是写在Container包含层里面了，而是那个div的上面！</p> <p>.navbar：导航栏的基类，用于<nav>元素。 <br> .navbar-default：导航栏默认样式，用于<nav>元素。 <br> .container是<nav>的子元素。导航栏内容都放入其中。 <br> .navbar-header：导航栏头部样式。 <br> .navbar-brand：设置品牌图标样式 <br> .collapse是折叠导航栏的样式的基类。 <br> .navbar-collapse是折叠导航栏样式。 <br> .nav是导航栏的链接基类。 <br> .navbar-nav是导航栏的链接样式。 <br> .navbar-from：导航栏表单，可以使表单元素排在同一行。 <br> .navbar-left 或 .navbar-right ：组件排列。导航链接、表单、按钮或文本对齐。 <br> .navbar-btn：对于不在<form>中的<button>元素，实现垂直对齐。 <br> .navbar-text：对于导航栏的普通文本有了行距和颜色，通常用于<p>元素。 <br> .navbar-fixed-top：导航栏固定在顶部，用于<nav>元素。需要为<body>设置padding-top:70px <br> .navbar-fixed-bottom：导航栏固定在底部，用于<nav>元素。需要为<body>设置padding-bottom:70px; <br> .navbar-static-top：导航栏静止在顶部，用于<nav>元素。会随着滚动条移动而消失。 <br> .navbar-inverse：可以实现反色导航栏，用于<nav>元素。</p> <div class="jb51code"> <pre class="brush:js;"> <nav class="navbar navbar-default navbar-static-top">  <div class="container">  <div class="navbar-header"> <a class="navbar-brand" href="">Brand</a> <p class="navbar-text">欢迎光临</p> </div>  <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-left"> <li class="active"> <a href="">起步</a> </li> <li> <a href="">CSS全局样式</a> </li> <li> <a href="">组件</a> </li> <li> <a href="">插件</a> </li> <li> <a href="">网站案例</a> </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="">Link</a> </li> <li class="dropdown"> <a href="" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li class="divider"></li> <li> <a href="#">Separated link</a> </li> </ul> </li> </ul> </div> </div> </nav> <div class="container" style="background-color: #FFFFFF;"> ... </div></pre> </div> <p style="text-align: center"><a href="http://img.e-com-net.com/image/info11/50ce9e95e7a5439e9c27506a9067c96c.jpg" target="_blank"><img title="" alt="" src="http://img.e-com-net.com/image/info11/50ce9e95e7a5439e9c27506a9067c96c.jpg" width="650" height="54"></a></p> <p>好了，然后直接上完整的源码:</p> <p>完整的源码链接:</p> <p>https://github.com/chenhaoxiang/BootStrap/tree/master/day3</p> <p>像学后台的，把这个BootStrap学到这里，然后能灵活应用基本就差不多啦~~~如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！</p> <div class="clearfix"> <span id="art_bot" class="jbTestPos"></span> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1175757105836142592"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(BootStrap 图片样式、辅助类样式和CSS组件的实例详解)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1880678349370617856.htm" title="__init__() missing 1 required positional argument: 'units'" target="_blank">__init__() missing 1 required positional argument: 'units'</a> <span class="text-muted">low sapkj</span> <div>这是一个代码错误，提示缺少一个必需的位置参数：“单位”。可能是因为没有正确地调用函数或类的实例，并且没有提供必需的参数。请检查代码，确保提供了所有必需的参数，并重新运行代码。</div> </li> <li><a href="/article/1880678097125175296.htm" title="mysql8查看data目录_windows环境MySQL8.0的data目录变更方法及问题" target="_blank">mysql8查看data目录_windows环境MySQL8.0的data目录变更方法及问题</a> <span class="text-muted">刘泽宏</span> <a class="tag" taget="_blank" href="/search/mysql8%E6%9F%A5%E7%9C%8Bdata%E7%9B%AE%E5%BD%95/1.htm">mysql8查看data目录</a> <div>windows环境安装MySQL8.0，默认安装在C盘的。basedir是：C:\ProgramFiles\MySQL\MySQLServer8.0\bindatadir是：C:\ProgramData\MySQL\MySQLServer8.0\data#这是一个隐藏文件夹现在想把datadir迁移到E盘，做法是：1、关闭数据库服务cdC:\ProgramFiles\MySQL\MySQLServ</div> </li> <li><a href="/article/1880677844099592192.htm" title="海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现，并可以在浏览器vue前端播放(附带源码)" target="_blank">海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现，并可以在浏览器vue前端播放(附带源码)</a> <span class="text-muted">web14786210723</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>1.首先说了一下为什么要用ISUP协议来取流ISUP主要就是用来解决摄像头没有公网ip的情况,如果摄像头或者所在局域网的路由器有公网ip的话，其实采用rtsp直接取流是最方便也是性能最好的，但是项目的摄像头没有公网IP所以被迫使用ISUP，ISUP是海康自己的协议，海康官网是有对应的DEMO，我主要根据他们的java版本的demo进行改造海康DEMO地址，2.具体实现首先得设置摄像头编码格式H.2</div> </li> <li><a href="/article/1880677844888121344.htm" title="k8s mysql数据目录挂载_【kubernetes】k8s数据卷,pod挂载本地路径" target="_blank">k8s mysql数据目录挂载_【kubernetes】k8s数据卷,pod挂载本地路径</a> <span class="text-muted">九罭之魚</span> <a class="tag" taget="_blank" href="/search/k8s/1.htm">k8s</a><a class="tag" taget="_blank" href="/search/mysql%E6%95%B0%E6%8D%AE%E7%9B%AE%E5%BD%95%E6%8C%82%E8%BD%BD/1.htm">mysql数据目录挂载</a> <div>环境：Linux服务器配置挂载目录思路：在部署pod的节点(宿主机)配置同样的挂载路径到一个固定的服务器(目标服务器)，这样不管pod在哪里跑，文件的保存路径都是不变的1.安装sshfsyuminstall-ysshfs2.添加ssh认证把节点的ssh公钥拷贝到目标服务器的~/.ssh/authorizedkeys中3.挂载目录在节点服务器执行：sshfsUSER@目标服务器IP:/path/to</div> </li> <li><a href="/article/1880677340153966592.htm" title="Web实时通信的学习之旅：SSE（Server-Sent Events）的技术详解及简单示例演示" target="_blank">Web实时通信的学习之旅：SSE（Server-Sent Events）的技术详解及简单示例演示</a> <span class="text-muted">web14786210723</span> <a class="tag" taget="_blank" href="/search/vip1024p/1.htm">vip1024p</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>文章目录一、什么是SSE二、SSE技术的基本原理三、SSE适用于场景四、Node服务端示例1、协议2、格式3、事件3.1、事件3.2、事件唯一标识符3.3、重连事件4、具体示例五、客户端示例1、检测客户端是否支持SSE2、创建客户端连接3、事件监听4、接收事件5、自定义事件6、错误处理7、主动断开连接8、具体示例六、注意事项1、nginx配置2、EventSource一、什么是SSE服务器向浏览器</div> </li> <li><a href="/article/1880677213771198464.htm" title="R语言 | vscode R plot 不弹出图形窗口，看不到图怎么办？" target="_blank">R语言 | vscode R plot 不弹出图形窗口，看不到图怎么办？</a> <span class="text-muted">biomooc</span> <a class="tag" taget="_blank" href="/search/R/1.htm">R</a><a class="tag" taget="_blank" href="/search/win10/1.htm">win10</a><a class="tag" taget="_blank" href="/search/r%E8%AF%AD%E8%A8%80/1.htm">r语言</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>原因未知。现在可以逐行执行了，但是要在浏览器查看图片：#install.packages("httpgd")library(httpgd)hgd()httpgd::hgd_url()#把输出的url复制到浏览器，查看接下来的绘图#同样打开设置面板，搜索r.plot.usehttpgd，勾选开启即可。x=seq(0,3*pi,by=0.1)plot(x,sin(x),type="l")支持拖拽改变长</div> </li> <li><a href="/article/1880676206395846656.htm" title="Web的基本架构" target="_blank">Web的基本架构</a> <span class="text-muted">ssdljwdxml</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a> <div>随着互联网的普及和发展，Web已经成为人们获取信息、交流和娱乐的主要方式之一。而支撑着这个庞大网络世界的就是Web的基本架构。本文将深入探讨Web的基本架构，包括客户端、服务器、网络协议等核心组件，以及它们之间的交互关系。一、客户端客户端是用户直接与之交互的界面，可以是浏览器或其他支持Web的应用程序。浏览器是最常见的客户端，它负责向服务器发送请求并接收服务器返回的响应。当用户在浏览器中输入一个网</div> </li> <li><a href="/article/1880676205481488384.htm" title="【AIcoding技术必知必会】12问--前后端联调是什么？" target="_blank">【AIcoding技术必知必会】12问--前后端联调是什么？</a> <span class="text-muted">srzxy42</span> <a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/coding%E6%8A%80%E6%9C%AF%E5%BF%85%E7%9F%A5%E5%BF%85%E4%BC%9A/1.htm">coding技术必知必会</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a><a class="tag" taget="_blank" href="/search/%E4%BA%A7%E5%93%81%E7%BB%8F%E7%90%86/1.htm">产品经理</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>基础说明前后端联调（Frontend-BackendIntegration）是指前端工程师和后端工程师将各自开发的功能模块进行对接和测试的过程。这个过程确保前端页面能够正确地与后端API进行数据交互，实现完整的业务功能。具体步骤准备阶段前后端团队共同制定接口文档（APIDocumentation）确定接口的请求方式（GET/POST等）定义请求参数和返回数据格式（通常是JSON）约定接口的命名规范</div> </li> <li><a href="/article/1880676078150807552.htm" title="32单片机综合应用案例——基于GPS的车辆追踪器（三）（内附详细代码讲解！！！）" target="_blank">32单片机综合应用案例——基于GPS的车辆追踪器（三）（内附详细代码讲解！！！）</a> <span class="text-muted">不能只会打代码</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/32%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">32单片机</a> <div>困难不会永远存在，只要你勇于面对，坚持努力，就一定能够战胜一切困难。每一次挑战都是一次成长的机会，不要害怕失败，失败是成功之母。只有经历过失败，你才能更加明白自己的不足，并不断改进自己，最终走向成功。不要被别人的眼光束缚，相信自己的能力和潜力，勇敢地去追求自己的梦想。成功需要付出努力和汗水，没有捷径可走，但只要坚持不懈，成功一定会属于你。无论遇到多少困难和阻挠，只要心怀梦想，勇往直前，你一定能够创</div> </li> <li><a href="/article/1880676079136468992.htm" title="32单片机综合应用案例——物联网(IoT)环境监测站（四）（内附详细代码讲解！！！）" target="_blank">32单片机综合应用案例——物联网(IoT)环境监测站（四）（内附详细代码讲解！！！）</a> <span class="text-muted">不能只会打代码</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/32%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">32单片机</a> <div>无论你身处何种困境，都要坚持下去，因为勇气和毅力是成功的基石。不要害怕失败，因为失败并不代表终结，而是为了成长和进步。相信自己的能力，相信自己的潜力，相信自己可以克服一切困难。成功需要付出努力和坚持不懈的努力，只有不断地努力才能够取得真正的收获和成就。不要停止追求自己的梦想，即使道路艰辛，也要坚持走下去。每一个人的成功都有一个起点，只要你敢于追求，就一定能够实现自己的梦想。目录硬件部分软件部分通信</div> </li> <li><a href="/article/1880675574230347776.htm" title="在你的云服务器上安装一个code server 随时随地打开网页Visual Studio Code" target="_blank">在你的云服务器上安装一个code server 随时随地打开网页Visual Studio Code</a> <span class="text-muted">但老师</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</a><a class="tag" taget="_blank" href="/search/server/1.htm">server</a> <div>文章目录背景环境安装步骤1.下载codeserver2.安装codeserver3.启动4.配置公网访问5.持续运行背景我是一个一直使用VisualStudioCode的开发者,有时候真想打开网页可以直接用VSC写代码就好了还真的有,不过服务端叫codeserver,你也可以理解为它是CloudVisualStudioCodeVisualStudioCodeServer环境CentOS7.9在腾讯</div> </li> <li><a href="/article/1880675447772082176.htm" title="渗透测试工具包 | 开源安全测试工具 | 网络安全工具_网络安全渗透测试工具" target="_blank">渗透测试工具包 | 开源安全测试工具 | 网络安全工具_网络安全渗透测试工具</a> <span class="text-muted">程序员安安</span> <a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%AE%89%E5%85%A8/1.htm">信息安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>项目介绍记录渗透测试开源工具。自动化渗透测试AttackSurfaceMapper-自动化渗透测试工具,使用手册/测试流程。vajra-自动化渗透测试.Savior-渗透测试报告自动生成工具！.漏洞利用框架hackUtils-它是一个用于渗透测试和网络安全研究的黑客工具包，渗透以及web攻击脚本。msf框架：pocsscan攻击框架Pocsuite攻击框架Beebeeto攻击框架漏洞POC&EXP</div> </li> <li><a href="/article/1880675321318010880.htm" title="MySQL DCL数据控制语言" target="_blank">MySQL DCL数据控制语言</a> <span class="text-muted">青花锁</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/DCL/1.htm">DCL</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8E%A7%E5%88%B6%E8%AF%AD%E8%A8%80/1.htm">数据控制语言</a> <div>作者主页：青花锁简介：Java领域优质创作者、Java微服务架构公号作者简历模板、学习资料、面试题库、技术互助文末获取联系方式往期热门专栏回顾专栏描述Java项目实战介绍Java组件安装、使用；手写框架等Aws服务器实战AwsLinux服务器上操作nginx、git、JDK、VueJava微服务实战Java微服务实战，SpringCloudNetflix套件、SpringCloudAlibaba套</div> </li> <li><a href="/article/1880675068825104384.htm" title="SpringMVC工作流程（经典11步）" target="_blank">SpringMVC工作流程（经典11步）</a> <span class="text-muted">With.627</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>11步来辣：1、用户发送请求至前端控制器DispatcherServlet。2、DispatcherServlet收到请求调用HandlerMapping处理器映射器。3、处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。4、DispatcherServlet调用HandlerAdapter处</div> </li> <li><a href="/article/1880674942480084992.htm" title="深入探索 Vue.js 组件开发中的最新技术：Teleport 和 Suspense 的使用" target="_blank">深入探索 Vue.js 组件开发中的最新技术：Teleport 和 Suspense 的使用</a> <span class="text-muted">桂月二二</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Vue.js是一款广泛使用的前端框架，凭借其简洁的设计和强大的功能，已经成为了许多开发者首选的框架。随着Vue3的发布，新的特性和改进为开发者提供了更多的选择和灵活性。其中，Teleport和Suspense是Vue3引入的两项非常有趣和强大的技术，它们能够极大地提升应用的性能和用户体验。本篇博客将深入探讨Vue3中Teleport和Suspense的具体使用方法，介绍它们的应用场景，以及如何在实</div> </li> <li><a href="/article/1880674816097316864.htm" title="0、springboot3 vue3开发平台-系统简介" target="_blank">0、springboot3 vue3开发平台-系统简介</a> <span class="text-muted">不知所云,</span> <a class="tag" taget="_blank" href="/search/springboot3/1.htm">springboot3</a><a class="tag" taget="_blank" href="/search/%2B/1.htm">+</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%B9%B3%E5%8F%B0/1.htm">开发平台</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>文章目录1.技术栈1.1后端1.2前端2.开发环境和工具3.项目模块说明3.1模块间关联关系1.技术栈1.1后端JDK17SpringBoot3.Xsa-tokenMySQL8.XMyBatis-Plus3.5.XJWTRedismaven等其他工具类技术1.2前端Node.is20.XVue3vue-router4painaviteElement-plus2.开发环境和工具JDK17IDEAMy</div> </li> <li><a href="/article/1880674563990286336.htm" title="代码随想录算法训练营总结" target="_blank">代码随想录算法训练营总结</a> <span class="text-muted">whpu_yb</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>本人是一名普普通通的计算机专业的毕业生，在大学学数据结构和算法就感觉非常难，到毕业也没刷过几道题，所幸后来入职的公司也没有考察算法相关的内容。到现在已经工作两年多了，看到过许多聊面试聊算法的文章，也接触到一些对我来说很厉害的大佬，发现在面试尤其是大厂面试时对算法的考察还是很重要的，遂重新打开leetcode开始刷题，起初只是实在无聊的时候看下每日一题，这里用“看题”主要是因为完全不会做啊，毫不夸张</div> </li> <li><a href="/article/1880674185898946560.htm" title="SpringAOP前置——代理模式" target="_blank">SpringAOP前置——代理模式</a> <span class="text-muted">兜里ヌ有糖</span> <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86%E6%A8%A1%E5%BC%8F/1.htm">代理模式</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>代理模式是SpringAOP（面向切面编程）的底层原理代理模式的分类静态代理动态代理静态代理角色分析：抽象角色：一般使用抽象类或接口来解决代理角色：代理真实角色，在代理真实角色后，一般会做一些附属操作真实角色：被代理的角色客户：访问代理对象的角色，可以理解为一个处理事务的线程，多为一次业务处理以租房举例子进行理解房东有房子要出租，将房源信息告诉中介，也就是让中介代理房东进行房屋租赁这件事。房东是真</div> </li> <li><a href="/article/1880673430093754368.htm" title="鸿蒙和安卓、ios的对比" target="_blank">鸿蒙和安卓、ios的对比</a> <span class="text-muted">惺星</span> <a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a> <div>鸿蒙系统、安卓系统、iOS系统各有特点。总体来说，鸿蒙系统在流畅性、分布式能力和可扩展性方面表现出色，安卓系统在开放性和可定制性方面具有优势，而iOS系统在稳定性和易用性方面占优。流畅性：鸿蒙系统在流畅性方面表现优秀。由于其基于微内核设计，且对硬件资源进行深度优化，使得设备在运行鸿蒙系统时更为流畅。相比之下，安卓系统的流畅性表现稍逊色，主要是由于安卓系统的碎片化问题导致设备之间的性能差异较大。而i</div> </li> <li><a href="/article/1880673177063976960.htm" title="springMVC文件上传和下载" target="_blank">springMVC文件上传和下载</a> <span class="text-muted">xls丶</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>[置顶]SpringMVC单文件上传、多文件上传、文件列表显示、文件下载标签：SpringMVC文件上传文件下载列表显示2015-05-1821:0122627人阅读评论(6)收藏举报分类：SpringMVC（8）作者同类文章X•Shrio登陆验证实例详细解读•Spring+Mybatis+SpringMVC后台与前台分页展示实例（附工程）•Spring+Mybatis+SpringMVC+Mav</div> </li> <li><a href="/article/1880673177852506112.htm" title="docker mysql数据迁移" target="_blank">docker mysql数据迁移</a> <span class="text-muted">进击的铁甲小宝</span> <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>dockermysql数据迁移1.导出mysql数据1.1#导出对应数据库mysqldump-u用户名-p数据库名>导出的文件名1.2#示例mysqldump-urootmy_mysql_data>./my_mysql_data.sql#将mysql数据库中的my_mysql_data导出保存在当前目录下为my_mysql_data.sql文件。#注意：windows系统在，要在mysql安装目录</div> </li> <li><a href="/article/1880673050643460096.htm" title="mysql删除日记" target="_blank">mysql删除日记</a> <span class="text-muted">大得369</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>mysql删除日记查看showbinarylogs;删除这个日期之前的purgebinarylogsbefore'2025-10-1714:05:00'</div> </li> <li><a href="/article/1880672797118754816.htm" title="Spring Boot经典面试题及答案" target="_blank">Spring Boot经典面试题及答案</a> <span class="text-muted">codeBrute</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>一、SpringBoot基础知识什么是SpringBoot？答案：SpringBoot是Spring开源组织下的子项目，是Spring组件一站式解决方案。它简化了Spring应用程序的初始化和开发过程，通过“约定大于配置”的原则，减少了手动配置的繁琐工作，使开发者能够更快速地构建独立、可运行的、生产级别的Spring应用程序。SpringBoot有哪些特点？答案：独立运行：SpringBoot应用</div> </li> <li><a href="/article/1880672798389628928.htm" title="Sentinel配置流控规则详解" target="_blank">Sentinel配置流控规则详解</a> <span class="text-muted">codeBrute</span> <a class="tag" taget="_blank" href="/search/sentinel/1.htm">sentinel</a> <div>前言在微服务架构中，流量控制（FlowControl）是保障服务稳定性的重要手段之一。Sentinel作为一款开源的流量控制、熔断降级Java库，以其丰富的应用场景和完善的监控能力，在微服务保护中扮演了重要角色。本文将详细介绍Sentinel的流控规则配置，帮助读者理解和应用这一关键特性。一、Sentinel流控规则的基本原理Sentinel的流控规则主要监控应用流量的QPS（每秒查询率）或并发线</div> </li> <li><a href="/article/1880672544818786304.htm" title="Elasticsearch二次开发：实现实时定时同步同义词、近义词与停用词" target="_blank">Elasticsearch二次开发：实现实时定时同步同义词、近义词与停用词</a> <span class="text-muted">codeBrute</span> <a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E5%88%86%E8%AF%8D/1.htm">中文分词</a> <div>Elasticsearch二次开发：实现实时定时同步同义词、近义词与停用词引言Elasticsearch（ES）作为开源搜索引擎的典范，以其强大的全文搜索、结构化搜索以及分析能力，在各个领域得到了广泛应用。在复杂的搜索场景中，同义词、近义词和停用词的处理对于提升搜索的准确性和用户体验至关重要。为了满足动态变化的业务需求，实现同义词、近义词与停用词的定时同步成为了一项关键任务。本文将详细介绍如何在E</div> </li> <li><a href="/article/1880672540955832320.htm" title="MySQL SQL优化技巧与原理" target="_blank">MySQL SQL优化技巧与原理</a> <span class="text-muted">codeBrute</span> <a class="tag" taget="_blank" href="/search/%E5%85%B3%E7%B3%BB%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">关系型数据库</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>前言随着业务数据量的不断增加，MySQL查询语句的执行效率对程序的运行效率影响逐渐增大。因此，进行SQL优化变得至关重要。本文将结合SQL的执行语句顺序和各种SQL场景，介绍一些常见的MySQLSQL优化技巧及其背后的原理。一、MySQLSQL执行语句顺序MySQLSQL的执行顺序通常分为以下步骤：FROM子句：加载表，计算笛卡尔积，生成虚拟表VT1。ON子句：筛选关联表符合ON表达式的数据，生成</div> </li> <li><a href="/article/1880672288769110016.htm" title="PHP流程控制" target="_blank">PHP流程控制</a> <span class="text-muted">程序员老卢</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/php%E5%9F%BA%E7%A1%80/1.htm">php基础</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录if语句else语句elseif语句while语句do-while语句for语句foreach语句breakcontinueswitch语句match表达式returnincludeinclude_oncerequirerequire_oncegoto流程控制是指用于控制代码执行顺序的机制，PHP提供了多种流程控制结构，例如条件判断语句以及循环语句等。if语句if语句是很多语言包括PHP在内最</div> </li> <li><a href="/article/1880672287179468800.htm" title="Python type()函数" target="_blank">Python type()函数</a> <span class="text-muted">软件测试李同学</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/type%28%29%E5%87%BD%E6%95%B0/1.htm">type()函数</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E7%BD%AE%E5%87%BD%E6%95%B0/1.htm">内置函数</a> <div>描述：type()函数只传第一个参数则返回对象的类型，三个参数返回新的类型对象，也就是说返回自定义的新类型。只传一个参数时，作用和isinstance()类似，但是有区别，type()不考虑继承关系，不认为子类是一种父类类型，而isinstance()考虑继承关系，认为子类是一种父类类型。所以，比较两个类型是否相同，推荐用isinstance()。语法：type(object)type(name,</div> </li> <li><a href="/article/1880672035135352832.htm" title="Java 基础之正则表达式：强大的文本匹配利器" target="_blank">Java 基础之正则表达式：强大的文本匹配利器</a> <span class="text-muted">幽兰的天空</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E5%90%AF%E8%88%AA%EF%BC%9A%E4%BB%8E%E9%9B%B6%E5%88%B0%E5%B0%8F%E6%9C%89%E6%89%80%E6%88%90/1.htm">基础启航：从零到小有所成</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一、什么是Java正则表达式Java正则表达式是一个用于匹配字符串的模板，由字符和特殊字符组成，可用于查找、替换、验证特定的模式。在Java中，我们可以使用java.util.regex包中的类来操作正则表达式。正则表达式在Java编程中发挥着重要作用。它可以被看作是一种定义字符串规则的工具，通过特定的模式来匹配、查找、替换和验证字符串。例如，我们可以使用正则表达式来验证用户输入的邮箱地址是否合法</div> </li> <li><a href="/article/1880671530262786048.htm" title="算法设计与分析第一章课后作业" target="_blank">算法设计与分析第一章课后作业</a> <span class="text-muted">小毛头~</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>第一章一.单选题1【单选题】子程序（包括函数和方法）是用来被调用的，递归指的是A、不同子程序之间直接或间接调用的程序设计方法B、同一个子程序直接或间接调用自己的程序设计方法C、子程序向调用它的程序段返回结果的程序设计方法D、子程序不向调用它的程序段返回结果的程序设计方法正确答案：B我的答案：B得分：4.0分2【单选题】背包问题:n个物品和1个背包。对物品i,其价值为vi,重量为wi,背包的容量为W</div> </li> <li><a href="/article/25.htm" title="Java实现的简单双向Map，支持重复Value" target="_blank">Java实现的简单双向Map，支持重复Value</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8F%8C%E5%90%91map/1.htm">双向map</a> <div>关键字：Java双向Map、DualHashBidiMap 有个需求，需要根据即时修改Map结构中的Value值，比如，将Map中所有value=V1的记录改成value=V2，key保持不变。数据量比较大，遍历Map性能太差，这就需要根据Value先找到Key，然后去修改。即：既要根据Key找Value，又要根据Value</div> </li> <li><a href="/article/152.htm" title="PL/SQL触发器基础及例子" target="_blank">PL/SQL触发器基础及例子</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/oracle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">oracle数据库</a><a class="tag" taget="_blank" href="/search/%E8%A7%A6%E5%8F%91%E5%99%A8/1.htm">触发器</a><a class="tag" taget="_blank" href="/search/PL%2FSQL%E7%BC%96%E7%A8%8B/1.htm">PL/SQL编程</a> <div> 触发器的简介; 触发器的定义就是说某个条件成立的时候，触发器里面所定义的语句就会被自动的执行。因此触发器不需要人为的去调用，也不能调用。触发器和过程函数类似过程函数必须要调用, 一个表中最多只能有12个触发器类型的,触发器和过程函数相似触发器不需要调用直接执行, 触发时间：指明触发器何时执行，该值可取： before：表示在数据库动作之前触发</div> </li> <li><a href="/article/279.htm" title="[时空与探索]穿越时空的一些问题" target="_blank">[时空与探索]穿越时空的一些问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98/1.htm">问题</a> <div> 我们还没有进行过任何数学形式上的证明,仅仅是一个猜想..... 这个猜想就是; 任何有质量的物体(哪怕只有一微克)都不可能穿越时空,该物体强行穿越时空的时候,物体的质量会与时空粒子产生反应,物体会变成暗物质,也就是说,任何物体穿越时空会变成暗物质..(暗物质就我的理</div> </li> <li><a href="/article/406.htm" title="easy ui datagrid上移下移一行" target="_blank">easy ui datagrid上移下移一行</a> <span class="text-muted">商人shang</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E7%A7%BB%E4%B8%8B%E7%A7%BB/1.htm">上移下移</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/datagrid/1.htm">datagrid</a> <div>/** * 向上移动一行 * * @param dg * @param row */ function moveupRow(dg, row) { var datagrid = $(dg); var index = datagrid.datagrid("getRowIndex", row); if (isFirstRow(dg, row)) {</div> </li> <li><a href="/article/533.htm" title="Java反射" target="_blank">Java反射</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/%E5%8F%8D%E5%B0%84/1.htm">反射</a> <div>本人菜鸟，今天恰好有时间，写写博客，总结复习一下java反射方面的知识，欢迎大家探讨交流学习指教首先看看java中的Class package demo; public class ClassTest { /*先了解java中的Class*/ public static void main(String[] args) { //任何一个类都</div> </li> <li><a href="/article/660.htm" title="springMVC 使用JSR-303 Validation验证" target="_blank">springMVC 使用JSR-303 Validation验证</a> <span class="text-muted">杨白白</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>JSR-303是一个数据验证的规范，但是spring并没有对其进行实现，Hibernate Validator是实现了这一规范的，通过此这个实现来讲SpringMVC对JSR-303的支持。 JSR-303的校验是基于注解的，首先要把这些注解标记在需要验证的实体类的属性上或是其对应的get方法上。登录需要验证类 public class Login { @NotEmpty</div> </li> <li><a href="/article/787.htm" title="log4j" target="_blank">log4j</a> <span class="text-muted">香水浓</span> <a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a> <div> log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, HTML, DATABASE #log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, ROLLINGFILE, HTML #console log4j.appender.STDOUT=org.apache.log4j.ConsoleAppender log4</div> </li> <li><a href="/article/914.htm" title="使用ajax和history.pushState无刷新改变页面URL" target="_blank">使用ajax和history.pushState无刷新改变页面URL</a> <span class="text-muted">agevs</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a> <div>表现如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。是什么有这么强大的功能呢？ HTML5里引用了新的API，history.pushState和history.replaceState，就是通过</div> </li> <li><a href="/article/1041.htm" title="centos中文乱码" target="_blank">centos中文乱码</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a> <div>一、CentOS系统访问 g.cn ，发现中文乱码。于是用以前的方式：yum -y install fonts-chinese CentOS系统安装后，还是不能显示中文字体。我使用 gedit 编辑源码，其中文注释也为乱码。后来，终于找到以下方法可以解决，需要两个中文支持的包： fonts-chinese-3.02-12.</div> </li> <li><a href="/article/1168.htm" title="触发器" target="_blank">触发器</a> <span class="text-muted">baalwolf</span> <a class="tag" taget="_blank" href="/search/%E8%A7%A6%E5%8F%91%E5%99%A8/1.htm">触发器</a> <div>触发器(trigger)：监视某种情况，并触发某种操作。触发器创建语法四要素：1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/before) 4.触发事件(insert/update/delete) 语法： create trigger triggerName after/before </div> </li> <li><a href="/article/1295.htm" title="JS正则表达式的i m g" target="_blank">JS正则表达式的i m g</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div> g:表示全局（global)模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止。 i:表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写。 m:表示</div> </li> <li><a href="/article/1422.htm" title="HTML5模式和Hashbang模式" target="_blank">HTML5模式和Hashbang模式</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Hashbang%E6%A8%A1%E5%BC%8F/1.htm">Hashbang模式</a><a class="tag" taget="_blank" href="/search/HTML5%E6%A8%A1%E5%BC%8F/1.htm">HTML5模式</a> <div> 我们可以用$locationProvider来配置$location服务（可以采用注入的方式，就像AngularJS中其他所有东西一样）。这里provider的两个参数很有意思，介绍如下。 html5Mode 一个布尔值，标识$location服务是否运行在HTML5模式下。 ha</div> </li> <li><a href="/article/1549.htm" title="[Maven学习笔记六]Maven生命周期" target="_blank">[Maven学习笔记六]Maven生命周期</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>从mvn test的输出开始说起当我们在user-core中执行mvn test时，执行的输出如下： /software/devsoftware/jdk1.7.0_55/bin/java -Dmaven.home=/software/devsoftware/apache-maven-3.2.1 -Dclassworlds.conf=/software/devs</div> </li> <li><a href="/article/1676.htm" title="【Hadoop七】基于Yarn的Hadoop Map Reduce容错" target="_blank">【Hadoop七】基于Yarn的Hadoop Map Reduce容错</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>运行于Yarn的Map Reduce作业，可能发生失败的点包括 Task Failure Application Master Failure Node Manager Failure Resource Manager Failure 1. Task Failure 任务执行过程中产生的异常和JVM的意外终止会汇报给Application Master。僵死的任务也会被A</div> </li> <li><a href="/article/1803.htm" title="记一次数据推送的异常解决端口解决" target="_blank">记一次数据推送的异常解决端口解决</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%B8%80%E6%AC%A1%E6%95%B0%E6%8D%AE%E6%8E%A8%E9%80%81%E7%9A%84%E5%BC%82%E5%B8%B8%E8%A7%A3%E5%86%B3/1.htm">记一次数据推送的异常解决</a> <div>　　需求：从db获取数据然后推送到B 程序开发完成，上jboss,刚开始报了很多错，逐一解决，可最后显示连接不到数据库。机房的同事说可以ping 通。　　自已画了个图，逐一排除，把linux 防火墙　和　setenforce　设置最低。　　　service iptables stop </div> </li> <li><a href="/article/1930.htm" title="巧用视错觉-UI更有趣" target="_blank">巧用视错觉-UI更有趣</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/ui%E8%A7%86%E9%A2%91/1.htm">ui视频</a><a class="tag" taget="_blank" href="/search/ui%E6%95%99%E7%A8%8B/1.htm">ui教程</a><a class="tag" taget="_blank" href="/search/ui%E8%87%AA%E5%AD%A6/1.htm">ui自学</a><a class="tag" taget="_blank" href="/search/ui%E8%B5%84%E6%96%99/1.htm">ui资料</a> <div>我们每个人在生活中都曾感受过视错觉（optical illusion）的魅力。视错觉现象是双眼跟我们开的一个玩笑，而我们往往还心甘情愿地接受我们看到的假象。其实不止如此，视觉错现象的背后还有一个重要的科学原理——格式塔原理。格式塔原理解释了人们如何以视觉方式感觉物体，以及图像的结构，视角，大小等要素是如何影响我们的视觉的。在下面这篇文章中，我们首先会简单介绍一下格式塔原理中的基本概念，</div> </li> <li><a href="/article/2057.htm" title="线段树-poj1177-N个矩形求边长（离散化+扫描线）" target="_blank">线段树-poj1177-N个矩形求边长（离散化+扫描线）</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E6%AE%B5%E6%A0%91/1.htm">线段树</a> <div>package com.ljn.base; import java.util.Arrays; import java.util.Comparator; import java.util.Set; import java.util.TreeSet; /** * POJ 1177 (线段树+离散化+扫描线)，题目链接为http://poj.org/problem?id=1177 </div> </li> <li><a href="/article/2184.htm" title="HTTP协议详解" target="_blank">HTTP协议详解</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/http%E5%8D%8F%E8%AE%AE/1.htm">http协议</a> <div>引言 </div> </li> <li><a href="/article/2311.htm" title="Scala设计模式" target="_blank">Scala设计模式</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>Scala设计模式我的话：在国外网站上看到一篇文章，里面详细描述了很多设计模式，并且用Java及Scala两种语言描述，清晰的让我们看到各种常规的设计模式，在Scala中是如何在语言特性层面直接支持的。基于文章很nice，我利用今天的空闲时间将其翻译，希望大家能一起学习，讨论。翻译</div> </li> <li><a href="/article/2438.htm" title="安装mysql" target="_blank">安装mysql</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85/1.htm">安装</a> <div>安装mysql (1)删除linux上已经安装的mysql相关库信息。rpm -e xxxxxxx --nodeps (强制删除) 执行命令rpm -qa |grep mysql 检查是否删除干净 (2)执行命令 rpm -i MySQL-server-5.5.31-2.el</div> </li> <li><a href="/article/2565.htm" title="HTTP状态码大全" target="_blank">HTTP状态码大全</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/http%E7%8A%B6%E6%80%81%E7%A0%81/1.htm">http状态码</a> <div>完整的 HTTP 1.1规范说明书来自于RFC 2616，你可以在http://www.talentdigger.cn/home/link.php?url=d3d3LnJmYy1lZGl0b3Iub3JnLw%3D%3D在线查阅。HTTP 1.1的状态码被标记为新特性，因为许多浏览器只支持 HTTP 1.0。你应只把状态码发送给支持 HTTP 1.1的客户端，支持协议版本可以通过调用request</div> </li> <li><a href="/article/2692.htm" title="asihttprequest上传图片" target="_blank">asihttprequest上传图片</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/ASIHTTPRequest/1.htm">ASIHTTPRequest</a> <div>NSURL *url =@"yourURL"; ASIFormDataRequest*currentRequest =[ASIFormDataRequest requestWithURL:url]; [currentRequest setPostFormat:ASIMultipartFormDataPostFormat];[currentRequest se</div> </li> <li><a href="/article/2819.htm" title="C语言中，关键字static的作用" target="_blank">C语言中，关键字static的作用</a> <span class="text-muted">e200702084</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div>在C语言中，关键字static有三个明显的作用： 1)在函数体，局部的static变量。生存期为程序的整个生命周期，（它存活多长时间）；作用域却在函数体内（它在什么地方能被访问（空间））。一个被声明为静态的变量在这一函数被调用过程中维持其值不变。因为它分配在静态存储区，函数调用结束后并不释放单元，但是在其它的作用域的无法访问。当再次调用这个函数时，这个局部的静态变量还存活，而且用在它的访</div> </li> <li><a href="/article/2946.htm" title="win7/8使用curl" target="_blank">win7/8使用curl</a> <span class="text-muted">geeksun</span> <a class="tag" taget="_blank" href="/search/win7/1.htm">win7</a> <div>1. WIN7/8下要使用curl，需要下载curl-7.20.0-win64-ssl-sspi.zip和Win64OpenSSL_Light-1_0_2d.exe。下载地址： http://curl.haxx.se/download.html 请选择不带SSL的版本，否则还需要安装SSL的支持包 2. 可以给Windows增加c</div> </li> <li><a href="/article/3073.htm" title="Creating a Shared Repository; Users Sharing The Repository" target="_blank">Creating a Shared Repository; Users Sharing The Repository</a> <span class="text-muted">hongtoushizi</span> <a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>转载自： http://www.gitguys.com/topics/creating-a-shared-repository-users-sharing-the-repository/ Commands discussed in this section: git init –bare git clone git remote git pull git p</div> </li> <li><a href="/article/3200.htm" title="Java实现字符串反转的8种或9种方法" target="_blank">Java实现字符串反转的8种或9种方法</a> <span class="text-muted">Josh_Persistence</span> <a class="tag" taget="_blank" href="/search/%E5%BC%82%E6%88%96%E5%8F%8D%E8%BD%AC/1.htm">异或反转</a><a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92%E5%8F%8D%E8%BD%AC/1.htm">递归反转</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E4%BA%A4%E6%8D%A2%E5%8F%8D%E8%BD%AC/1.htm">二分交换反转</a><a class="tag" taget="_blank" href="/search/java%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%8F%8D%E8%BD%AC/1.htm">java字符串反转</a><a class="tag" taget="_blank" href="/search/%E6%A0%88%E5%8F%8D%E8%BD%AC/1.htm">栈反转</a> <div>注：对于第7种使用异或的方式来实现字符串的反转，如果不太看得明白的，可以参照另一篇博客： http://josh-persistence.iteye.com/blog/2205768 /** * */ package com.wsheng.aggregator.algorithm.string; import java.util.Stack; /** </div> </li> <li><a href="/article/3327.htm" title="代码实现任意容量倒水问题" target="_blank">代码实现任意容量倒水问题</a> <span class="text-muted">home198979</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%80%92%E6%B0%B4/1.htm">倒水</a> <div>形象化设计模式实战 HELLO!架构 redis命令源码解析倒水问题：有两个杯子，一个A升，一个B升，水有无限多，现要求利用这两杯子装C</div> </li> <li><a href="/article/3454.htm" title="Druid datasource" target="_blank">Druid datasource</a> <span class="text-muted">zhb8015</span> <a class="tag" taget="_blank" href="/search/druid/1.htm">druid</a> <div>推荐大家使用数据库连接池 DruidDataSource. http://code.alibabatech.com/wiki/display/Druid/DruidDataSource DruidDataSource经过阿里巴巴数百个应用一年多生产环境运行验证，稳定可靠。它最重要的特点是：监控、扩展和性能。下载和Maven配置看这里： http</div> </li> <li><a href="/article/3581.htm" title="两种启动监听器ApplicationListener和ServletContextListener" target="_blank">两种启动监听器ApplicationListener和ServletContextListener</a> <span class="text-muted">spjich</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a> <div>引言:有时候需要在项目初始化的时候进行一系列工作，比如初始化一个线程池，初始化配置文件，初始化缓存等等，这时候就需要用到启动监听器，下面分别介绍一下两种常用的项目启动监听器 ServletContextListener 特点: 依赖于sevlet容器，需要配置web.xml 使用方法: public class StartListener implements </div> </li> <li><a href="/article/3708.htm" title="JavaScript Rounding Methods of the Math object" target="_blank">JavaScript Rounding Methods of the Math object</a> <span class="text-muted">何不笑</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div> The next group of methods has to do with rounding decimal values into integers. Three methods — Math.ceil(), Math.floor(), and Math.round() — handle rounding in differen</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

图片样式应用

清除浮动的应用

下拉菜单的应用

按钮组的应用

按钮式下拉菜单的应用