代码
本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格: 1、使用
来显示单行内联代码 2、使用
来显示多行块代码 3、使用
来显示用户输入代码
在使用代码时,用户可以根据具体的需求来使用不同的类型: 1、
:一般是针对于单个单词或单个句子的代码 2、
:一般是针对于多行代码(也就是成块的代码) 3、
:一般是表示用户要通过键盘输入的内容
虽然不同的类型风格不一样,但其使用方法是类似的。 code风格:
<div > Bootstrap的代码风格有三种:
<code > <code>code >
<code > <pre>code >
<code > <kbd>code >
div >
pre风格:
<ul>
<li>... </li>
<li>... </li>
<li>... </li>
</ul>
kbd风格:
<div > 请输入<kbd > ctrl+ckbd > 来复制代码,然后使用<kbd > ctrl+vkbd > 来粘贴代码div >
不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代。而且对于
代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。建议在编写HTML标签时,就控制好。
正如前面所示,
元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。 /*源码请查看bootstrap.css第731行~第734行* /
.pre-scrollable {
max-height : 340 px ;
overflow-y : scroll ;
}
用法如下所示:
<pre class ="pre-scrollable" >
<ol >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
<li > ....li >
ol >
pre >
表格
表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用。
Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:
☑ .table:基础表格
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格
用法如下所示:
<body >
<h1 > 基础表格h1 >
<table class ="table" >
<thead >
<tr >
<th > 表格标题th >
<th > 表格标题th >
<th > 表格标题th >
tr >
thead >
<tbody >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
tbody >
table >
<h1 > 斑马线表格h1 >
<table class ="table table-striped" >
<thead >
<tr >
<th > 表格标题th >
<th > 表格标题th >
<th > 表格标题th >
tr >
thead >
<tbody >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
tbody >
table >
<h1 > 带边框的表格h1 >
<table class ="table table-bordered" >
<thead >
<tr >
<th > 表格标题th >
<th > 表格标题th >
<th > 表格标题th >
tr >
thead >
<tbody >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
tbody >
table >
<h1 > 鼠标悬浮高亮的表格h1 >
<table class ="table table-striped table-bordered table-hover" >
<thead >
<tr >
<th > 表格标题th >
<th > 表格标题th >
<th > 表格标题th >
tr >
thead >
<tbody >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
tbody >
table >
<h1 > 紧凑型表格h1 >
<table class ="table table-condensed" >
<thead >
<tr >
<th > 表格标题th >
<th > 表格标题th >
<th > 表格标题th >
tr >
thead >
<tbody >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
tbody >
table >
<h1 > 响应式表格h1 >
<div class ="table-responsive" >
<table class ="table table-bordered" >
<thead >
<tr >
<th > 表格标题th >
<th > 表格标题th >
<th > 表格标题th >
tr >
thead >
<tbody >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
<tr >
<td > 表格单元格td >
<td > 表格单元格td >
<td > 表格单元格td >
tr >
tbody >
table >
div >
body >
表格行的类
Bootstrap还为表格的行元素提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下表所示: 其使用非常的简单,只需要在元素中添加上表对应的类名,就能达到你自己需要的效果:
<tr class ="active" >
<td > …td >
tr >
特别提示:除了“.active”之外,其他的四个类名和“.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。
注意要实现悬浮状态,需要在标签上加入table-hover类。
其用法如下所示:
<table class ="table table-bordered table-hover" >
<thead >
<tr >
<th > 类名th >
<th > 描述th >
tr >
thead >
<tbody >
<tr class ="active" >
<td > .activetd >
<td > 表示当前活动的信息td >
tr >
<tr class ="success" >
<td > .successtd >
<td > 表示成功或者正确的行为td >
tr >
<tr class ="info" >
<td > .infotd >
<td > 表示中立的信息或行为td >
tr >
<tr class ="warning" >
<td > .warningtd >
<td > 表示警告,需要特别注意td >
tr >
<tr class ="danger" >
<td > .dangertd >
<td > 表示危险或者可能是错误的行为td >
tr >
tbody >
table >
基础表格
在Bootstrap中,对于基础表格是通过类名“.table”来控制。如果在元素中不添加任何类名,表格是无任何样式效果的。想得到基础表格,我们只需要在元素上添加“.table”类名,就可以得到Bootstrap的基础表格:
<table class="table" >
…
table >
Bootstrap的基础表格,大致长得像下图所示的样子:
“.table”主要有三个作用:
☑ 给表格设置了margin-bottom:20px以及设置单元内距
☑ 在thead底部设置了一个2px的浅灰实线
☑ 每个单元格顶部设置了一个1px的浅灰实线
斑马线表格
有时候为了让表格更具阅读性,需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难,只需要在的基础上增加类名“.table-striped”即可:
<table class="table table-striped" >
…
table >
其效果与基础表格相比,仅是在tbody隔行有一个浅灰色的背景色。其实现原理也非常的简单,利用CSS3的结构性选择器“:nth-child”来实现,所以对于IE8以及其以下浏览器,没有背景条纹效果。 源码请查看bootstrap.css文件第1465行~第1468行:
.table-striped > tbody > tr :nth-child(odd) > td ,
.table-striped > tbody > tr :nth-child(odd) > th {
background-color : #f9f9f9 ;
}
带边框的表格
基础表格仅让表格部分地方有边框,但有时候需要整个表格具有边框效果。Bootstrap出于实际运用,也考虑这种表格效果,即所有单元格具有一条1px的边框。 Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似,只需要在基础表格基础上添加一个“.table-bordered”类名即可:
<table class="table table-bordered" >
…
table >
样式如下图所示:
其源码可以查看bootstrap.css文件第1450行~第1464行:
.table-bordered {
border : 1 px solid #ddd ;
}
.table-bordered > thead > tr > th ,
.table-bordered > tbody > tr > th ,
.table-bordered > tfoot > tr > th ,
.table-bordered > thead > tr > td ,
.table-bordered > tbody > tr > td ,
.table-bordered > tfoot > tr > td {
border : 1 px solid #ddd ;
}
.table-bordered > thead > tr > th ,
.table-bordered > thead > tr > td {
border-bottom-width : 2 px ;
}
鼠标悬浮高亮的表格
当鼠标悬停在表格的行上面有一个高亮的背景色,这样的表格让人看起来就是舒服,时刻告诉用户正在阅读表格哪一行的数据。Bootstrap提供了一个“.table-hover”类名来实现这种表格效果。 鼠标悬停高亮的表格使用也简单,仅需要元素上添加类名“table-hover”即可:
<table class="table table-hover" >
…
table >
鼠标悬浮高亮的效果主要是通过“hover”事件来实现,设置了“tr:hover”时的th、td的背景色为新颜色。 其源码请查看bootstrap.css文件中第1469行~第1472行:
.table-hover > tbody > tr :hover > td ,
.table-hover > tbody > tr :hover > th {
background-color : #f5f5f5 ;
}
紧凑型表格
何谓紧凑型表格,简单理解,就是单元格没内距或者内距较其他表格的内距更小。换句话说,要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中,通过类名“table-condensed”重置了单元格内距值。 紧凑型表格的运用,也只是需要在基础上添加类名“table-condensed”:
<table class="table table-condensed" >
…
table >
另外,不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时,千万注意,你的元素中一定不能缺少类名“table”。
响应式表格
随着各种手持设备的出现,要想让你的Web页面适合千罗万像的设备浏览,响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格。 Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将置于这个容器当中,这样表格也就具有响应式效果。 Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:
<div class ="table-responsive" >
<table class ="table table-bordered" >
…
table >
div >
你可能感兴趣的:(Bootstrap)
Bootstrap Blazor 中 Table 组件 的 OnColumnCreating 事件:统一设置 列 的 IsVisibleWhenAdd、IsVisibleWhenEdit 参数
cqths
# Blazor Web App web app .net c#
当实体中属性较多时,在实体定义中对每一个属性设置相同参数比较麻烦,要统一修改也麻烦,此时可以考虑在OnColumnCreating事件中使用代码统一设置。//////在Table组件的OnColumnCreating事件中使用:设置AddColumnNames中列的IsVisibleWhenEdit=true,其余列IsVisibleWhenEdit=false。//////OnColumnCre
Bootstrap Blazor 组件库 Table 组件 OnQueryAsync 查询 EF Core 键集分页、偏移分页 使用备忘
cqths
EF Core # Blazor Web App bootstrap .net web app
privatelonglastId=0,firstId=0;privatelonglastPageIndex=0;privateintlastPageItems=0;privateasyncTask>OnQueryAsync(QueryPageOptionsoptions){IEnumerableitems;//不是翻页:刷新、改变每页条数、过虑,此时,清除跟踪(清除缓存)if(!options.
[Windows][Python] GUI设计
BennyCP
[跨平台语言] Python
MakeaGUIonWindowsXSetuppythonInstallpipcurlhttps://bootstrap.pypa.io/get-pip.py-oget-pip.pypythonget-pip.pyInstallPyinstallerpipinstallPyInstallerWriteaGUIcodeimportwxapp=wx.App()win=wx.Frame(None,tit
.NET 9.0 的 Blazor Web App 项目、Bootstrap Blazor 组件库、自定义日志 TLog 使用备忘
cqths
EF Core # Blazor Web App .net web app c# 数据库
一、设计目标:通用、容易修改、使用简单,所有代码保存在一个文件中,方便移植到其他项目使用。注:示例使用BootstrapBlazor组件库和EFCore、Sqlite,需要先使用Nuget包管理器添加对应的包。namespaceBlazorWebAppNet9Shared.Services;usingMicrosoft.EntityFrameworkCore;usingMicrosoft.Exte
Flink之kafka消费数据
怎么才能努力学习啊
flink kafka 大数据
场景:本地构建Flink程序问题描述消费Kafka的数据时,使用Flink新的KakfaSource。会报如下错误KafkaSourcekafkaSource=KafkaSource.builder().setBootstrapServers(kafkaProperties.getProperty("kafka.bootstrap.servers")).setTopics("test2").set
Bootstrap4网格系统详解
半点寒12W
css css3
一、基本概念Bootstrap4的网格系统是其核心部分,它基于一个12列的布局,能够帮助你轻松创建响应式的网页布局。这种网格系统可以让你将页面内容划分为不同的行和列,使得内容在不同设备上都能呈现出最佳的显示效果。二、容器(Container)容器的作用:容器是用来包裹页面内容的元素,它提供了一个水平居中的布局空间,并为内部的行和列设置了合适的内边距。容器的类型:**.container:**这是一
Shell控监Kafka积压
docsz
linux kafka
1、获取Kafka消息堆积情况vicheck-kafka-lag.sh#!/bin/bashTOPIC="total_random"GROUP_ID="etl-dw"BOOTSTRAP_SERVER="node-01:9092,node-02:9092,node-03:9092"#检查第一个参数是否为数字if![[$1=~^[0-9]+$]];thenecho"错误:传入参数必须是数字">&2ex
Bootstrap UI 编辑器:简化前端开发的利器
lsx202406
开发语言
BootstrapUI编辑器:简化前端开发的利器引言在当今的网页设计和开发领域,Bootstrap已经成为了一个非常流行的前端框架。它以其响应式设计、简洁的代码和丰富的组件库而受到广大开发者的喜爱。然而,对于一些非技术背景的设计师或者初学者来说,直接使用Bootstrap可能会有一定的难度。这时,BootstrapUI编辑器就成为了他们的救星。本文将详细介绍BootstrapUI编辑器的概念、特点
在Linux中修改vm.max_map_count参数的步骤
行路见知
linux 运维
使用docker安装es时报错,Elasticsearch需要更多的虚拟内存区域ERROR:[1]bootstrapchecksfailed.Youmustaddressthepointsdescribedinthefollowing[1]linesbeforestartingElasticsearch.bootstrapcheckfailure[1]of[1]:maxvirtualmemorya
深入浅出:Tailwind CSS 详解
chenNorth。
css css 前端
TailwindCSS是一款功能强大的、低级的CSS框架,它与传统的CSS框架(如Bootstrap或Foundation)不同,它不提供具体的UI组件,而是通过实用工具类来帮助开发者更灵活、更高效地构建自定义的网页设计。TailwindCSS强调“原子化”CSS,这意味着它通过大量的小工具类(UtilityClasses)来定义网页元素的样式,而不是通过写大量的自定义CSS代码。这种方式让开发者
如何理解 Tailwind CSS 的“功能类(Utility-first)”思想?
TailwindCSS是一个基于“功能类(Utility-first)”思想的CSS框架。它与传统的CSS框架(如Bootstrap或Foundation)有很大的不同,不是通过预定义的组件来构建UI,而是通过一系列低级的、原子化的类来构建定制化的设计。这种方法使得开发者可以更加灵活、高效地定制网页布局和样式。在本文中,我们将深入探讨TailwindCSS的核心思想——功能类,并分析它如何帮助开发
Yii框架中的日历控件如何实现日期选择器
ac-er8888
php 后端 mysql
在Yii框架中,虽然Yii本身不直接提供一个内置的日历控件用于日期选择器,但你可以利用Yii的扩展包或者结合前端库(如jQueryUIDatepicker、BootstrapDatepicker等)来实现这一功能。以下是一些常见的方法来实现日期选择器:1.使用jQueryUIDatepickerjQueryUI是一个流行的jQuery插件集,其中包含了日期选择器组件。你可以通过以下步骤在Yii中集
使用spring boot写一个学生管理系统
db_hkq_2039
spring boot 后端 java
目录前言二、博客地址三、实现步骤3.1创建SpringBoot项目3.2连接数据库3.3代码层级3.3.1model层3.3.2Repository层3.3.3service层3.3.4控制层controller3.3.5视图层3.3.6BootStrap4.1登录4.2增4.3删4.4查4.5改4.6分页总结前言学生管理系统是一种常见的应用程序,它可以用于管理学生、学院、班级等信息,是许多企业和
《CPython Internals》阅读笔记:p61-p75
python
《CPythonInternals》学习第4天,p61-p75总结,总计15页。一、技术总结1.编译器类型(1)self-hostedcompilerSelf-hostedcompilersarecompilerswritteninthelanguagetheycompile,suchastheGocompiler.Thisisdonebyaprocessknownasbootstrapping.
思科路由器交换机密码破解过程详解
zhane_hao
路由启动过程加电自检(POST)加载bootstrap代码检查配置寄存器寻找CiscoIOS加载CiscoIOS寻找配置文件加载配置文件若没有配置文件,进入Setup模式,进行初始化配置运行路由器操作系统查看命令•showversion:检查配置寄存器的值,硬件配置,IOS版本•showflash:检查Flash中的IOS,或是flash大小,使用情况(占用多少,剩下多少)•showstartup
Kafka系列之:kafka命令详细总结
快乐骑行^_^
日常分享专栏 Kafka Kafka系列 kafka命令详细总结
Kafka系列之:kafka命令详细总结一、添加和删除topic二、修改topic三、平衡领导者四、检查消费者位置五、管理消费者群体一、添加和删除topicbin/kafka-topics.sh--bootstrap-serverbroker_host:port--create--topicmy_topic_name\--partitions20--replication-factor3--con
html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法
RemusrickCat
本文实例为大家全面的解析了Bootstrap中Carousel的使用方法,供大家参考,具体内容如下源码文件:Carousel.scssCarousel.js实现原理:隐藏所有要显示的元素,然后指定当前要显示的为block,宽、高自适应源码分析:1、Html结构:主要分为以四个部分1.1、容器:最外层div,需要一个data-ride=”carousel”来指定为轮播放插件,并且提供一个Id,方便圆
移动WEB开发(第四天)__响应式布局
加蓓努力我先飞
5.移动web开发资料 前端
移动WEB开发(第四天)__响应式布局移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理1.2响应式布局容器2.0bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3版本简介2.4bootstrap基本使用2.5bootstrap布局容器2.6bootstrap栅格系统3.0阿里百秀案例制作3.1技术选型移动端WEB开发之响应式布局1.0响应式开
css 个人喜欢的样式 速查笔记
waterHBO
css 笔记 前端
起因,目的:记录自己喜欢的,觉得比较好看的css.下次用的时候,直接复制,很方便。1.个人html模板,导入常用的link设置英语字体:Noto导入默认的css使用网络icon图标导入Bootstrapcss框架html-->2.常用css模板todo,以后再增加。*{font-family:"NotoSerif",system-ui;font-optical-sizing:auto;}Noto字
(代码可运行)Bootstrap框架的HTML示例
程序员大侠
前端 CSS html bootstrap 前端
Bootstrap:一套流行的前端开发框架,基于HTML、CSS和JavaScript,适用于快速构建响应式Web应用。以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例:BootstrapExampleHello,Bootstrap!CardtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthe
bootstrap直接对form表进行校验
IT和金融
form表单可以前端进行校验,当然也可以直接采用bootstrap对form表单进行校验如form表单中有等相关字段进行校验,可直接用bootstrap的校验,方式如下:$("#auth_add_form").bootstrapValidator({//auth_add_form为form的id值feedbackIcons:{valid:'glyphiconglyphicon-ok',invali
node模块
weiweiweb888
前端 javascript bootstrap
模块系统模块化介绍传统开发的问题随着项目的扩大,然后代码就越来越庞大,如果没有很好的规划,后期维护非常复杂(甚至就维护不了)。比如:前端html中有很多特效会依赖js文件。比如:index.html:bootstrap以上就是一个依赖关系,bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大,我们的html页面也就随之增加,并且每一个html页面都会
mirantis OpenStack9.0在virtualbox上的部署
Caroline_33
openstack mirantis virtualbox
实验环境安装包-VirtualBox-4.3.12-93733-Win.exe-Oracle_VM_VirtualBox_Extension_Pack-5.1.2-108956.vbox-extpack-Mirantis_Openstack9.0.iso-bootstrap.zip-mirrors.zip-xtfp-xshell实验机器-cpu:i3-3220以上-Ram:至少8G说明-保证内存至
es遇到的问题
云帆@
elasticsearch elasticsearch
一、目录ERROR:[1]bootstrapchecksfailed.Youmustaddressthepointsdescribedinthefollowing[1]linesbeforestartingElasticsearch.ERROR:Elasticsearchexitedunexpectedly,withexitcode78二、实现ERROR:[1]bootstrapchecksfai
JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage
垦利不
javascript 开发语言 ecmascript
目录1.classList属性添加类删除类切换类检查类是否存在替换类移动端touch事件2.消除点击延迟Fastclick插件的引入引入FastClick初始化3.Swiper插件的引入和使用通过CDN引入通过npm安装(vue中建议)使用SwiperHTML结构初始化Swiper4.zyMedia插件简介4.1下载与引入4.2使用4.3js初始化4.4参数说明5.bootstrap的安装和使用5
前端框架有哪些?
赎罪゛
前端框架 前端 javascript
熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后,学习Web框架可以加快Web开发速度,节约时间。PHP程序员可选的框架包括CakePHP、CodeIgniter、Zend等,Python程序员喜欢使用Django和webpy,Ruby程序员常用RoR。随着Web越来越规范和标准的统一,Web组件化技术不断革新,移动端开发不断升华,以下是一些常见开源前端框架:Bootstrap
CoreUI免费Laravel管理模板安装与使用指南
皮静滢Annette
CoreUI免费Laravel管理模板安装与使用指南coreui-free-laravel-admin-templateCoreUIFreeLaravelBootstrapAdminTemplate项目地址:https://gitcode.com/gh_mirrors/co/coreui-free-laravel-admin-template1.项目目录结构及介绍CoreUI免费Laravel管理
81.MySQL-PXC高可用集群
戒掉贪嗔痴(薛双奇)
数据库运维-MySQL mysql 数据库
1.第一个节点启动。Linux7:my.cnf文件需要拷贝到:/etc/my.cnf(非常重要)[root@mysql51~]#mysqlpxcbootstrap-pxcBootstrappingPXC(PerconaXtraDBCluster)InitializingMySQ[OK]se:StartingMySQL(PerconaXtraDBCluster)..[OK]当前集群只有一个节点。my
如何查看当前的gruop_id 的kafka 消费情况 这个可以查看到是否存在消费阻塞问题
树下水月
kafka 分布式
如何查看当前的gruop_id的kafka消费情况这个可以查看到是否存在消费阻塞问题命令如下:/kafka/bin/kafka-consumer-groups.sh--bootstrap-server127.0.0.1:9092--groupGWW --describe其中127.0.0.1为zookeeper服务器ipGWW为对应要查看的group_id如下图所示:运行这个命令后,Kafka会返
**脑图制作的Bootstrap Bundle项目指南**
潘惟妍
脑图制作的BootstrapBundle项目指南bootstrap-bundleBraincraftedBootstrapBundleintegratesBootstrapintoSymfony2byprovidingtemplates,Twigextensions,servicesandcommands.项目地址:https://gitcode.com/gh_mirrors/bo/bootstr
戴尔笔记本win8系统改装win7系统
sophia天雪
win7 戴尔 改装系统 win8
戴尔win8 系统改装win7 系统详述
第一步:使用U盘制作虚拟光驱:
1)下载安装UltraISO:注册码可以在网上搜索。
2)启动UltraISO,点击“文件”—》“打开”按钮,打开已经准备好的ISO镜像文
BeanUtils.copyProperties使用笔记
bylijinnan
java
BeanUtils.copyProperties VS PropertyUtils.copyProperties
两者最大的区别是:
BeanUtils.copyProperties会进行类型转换,而PropertyUtils.copyProperties不会。
既然进行了类型转换,那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp
MyEclipse中文乱码问题
0624chenhong
MyEclipse
一、设置新建常见文件的默认编码格式,也就是文件保存的格式。
在不对MyEclipse进行设置的时候,默认保存文件的编码,一般跟简体中文操作系统(如windows2000,windowsXP)的编码一致,即GBK。
在简体中文系统下,ANSI 编码代表 GBK编码;在日文操作系统下,ANSI 编码代表 JIS 编码。
Window-->Preferences-->General -
发送邮件
不懂事的小屁孩
send email
import org.apache.commons.mail.EmailAttachment;
import org.apache.commons.mail.EmailException;
import org.apache.commons.mail.HtmlEmail;
import org.apache.commons.mail.MultiPartEmail;
动画合集
换个号韩国红果果
html css
动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程
1 transition 制作鼠标滑过图片时的放大效果
css
.wrap{
width: 340px;height: 340px;
position: absolute;
top: 30%;
left: 20%;
overflow: hidden;
bor
网络最常见的攻击方式竟然是SQL注入
蓝儿唯美
sql注入
NTT研究表明,尽管SQL注入(SQLi)型攻击记录详尽且为人熟知,但目前网络应用程序仍然是SQLi攻击的重灾区。
信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明,目前黑客攻击网络应用程序方式中最流行的,要数SQLi攻击。报告对去年发生的60亿攻击 行为进行分析,指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中,SQLi攻击占
java笔记2
a-john
java
类的封装:
1,java中,对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节(尤其是私有数据)
2,目的:使对象以外的部分不能随意存取对象的内部数据(如属性),从而使软件错误能够局部化,减少差错和排错的难度。
3,简单来说,“隐藏属性、方法或实现细节的过程”称为——封装。
4,封装的特性:
4.1设置
[Andengine]Error:can't creat bitmap form path “gfx/xxx.xxx”
aijuans
学习Android遇到的错误
最开始遇到这个错误是很早以前了,以前也没注意,只当是一个不理解的bug,因为所有的texture,textureregion都没有问题,但是就是提示错误。
昨天和美工要图片,本来是要背景透明的png格式,可是她却给了我一个jpg的。说明了之后她说没法改,因为没有png这个保存选项。
我就看了一下,和她要了psd的文件,还好我有一点
自己写的一个繁体到简体的转换程序
asialee
java 转换 繁体 filter 简体
今天调研一个任务,基于java的filter实现繁体到简体的转换,于是写了一个demo,给各位博友奉上,欢迎批评指正。
实现的思路是重载request的调取参数的几个方法,然后做下转换。
android意图和意图监听器技术
百合不是茶
android 显示意图 隐式意图 意图监听器
Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递
显式意图:调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图,显式意图明确指定了Intent应该传递给哪个组件。
隐式意图;不指明调用的名称,根据设
spring3中新增的@value注解
bijian1013
java spring @Value
在spring 3.0中,可以通过使用@value,对一些如xxx.properties文件中的文件,进行键值对的注入,例子如下:
1.首先在applicationContext.xml中加入:
<beans xmlns="http://www.springframework.
Jboss启用CXF日志
sunjing
log jboss CXF
1. 在standalone.xml配置文件中添加system-properties:
<system-properties> <property name="org.apache.cxf.logging.enabled" value=&
【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码
bit1129
centos
编译必需的软件
Firebugs3.0.0
Maven3.2.3
Ant
JDK1.7.0_67
protobuf-2.5.0
Hadoop 2.5.2源码包
Firebugs3.0.0
http://sourceforge.jp/projects/sfnet_findbug
struts2验证框架的使用和扩展
白糖_
框架 xml bean struts 正则表达式
struts2能够对前台提交的表单数据进行输入有效性校验,通常有两种方式:
1、在Action类中通过validatexx方法验证,这种方式很简单,在此不再赘述;
2、通过编写xx-validation.xml文件执行表单验证,当用户提交表单请求后,struts会优先执行xml文件,如果校验不通过是不会让请求访问指定action的。
本文介绍一下struts2通过xml文件进行校验的方法并说
记录-感悟
braveCS
感悟
再翻翻以前写的感悟,有时会发现自己很幼稚,也会让自己找回初心。
2015-1-11 1. 能在工作之余学习感兴趣的东西已经很幸福了;
2. 要改变自己,不能这样一直在原来区域,要突破安全区舒适区,才能提高自己,往好的方面发展;
3. 多反省多思考;要会用工具,而不是变成工具的奴隶;
4. 一天内集中一个定长时间段看最新资讯和偏流式博
编程之美-数组中最长递增子序列
bylijinnan
编程之美
import java.util.Arrays;
import java.util.Random;
public class LongestAccendingSubSequence {
/**
* 编程之美 数组中最长递增子序列
* 书上的解法容易理解
* 另一方法书上没有提到的是,可以将数组排序(由小到大)得到新的数组,
* 然后求排序后的数组与原数
读书笔记5
chengxuyuancsdn
重复提交 struts2的token验证
1、重复提交
2、struts2的token验证
3、用response返回xml时的注意
1、重复提交
(1)应用场景
(1-1)点击提交按钮两次。
(1-2)使用浏览器后退按钮重复之前的操作,导致重复提交表单。
(1-3)刷新页面
(1-4)使用浏览器历史记录重复提交表单。
(1-5)浏览器重复的 HTTP 请求。
(2)解决方法
(2-1)禁掉提交按钮
(2-2)
[时空与探索]全球联合进行第二次费城实验的可能性
comsci
二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验
至今给我们大家留下很多迷团.....
关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了
在这里,我的意思是,现在
easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符
daizj
oracle ORA-12154
用easy connect连接出现“tns无法解析指定的连接标示符”的错误,如下:
C:\Users\Administrator>sqlplus username/
[email protected] :1521/orcl
SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012
Copyright (c) 198
简单排序:归并排序
dieslrae
归并排序
public void mergeSort(int[] array){
int temp = array.length/2;
if(temp == 0){
return;
}
int[] a = new int[temp];
int
C语言中字符串的\0和空格
dcj3sjt126com
c
\0 为字符串结束符,比如说:
abcd (空格)cdefg;
存入数组时,空格作为一个字符占有一个字节的空间,我们
解决Composer国内速度慢的办法
dcj3sjt126com
Composer
用法:
有两种方式启用本镜像服务:
1 将以下配置信息添加到 Composer 的配置文件 config.json 中(系统全局配置)。见“例1”
2 将以下配置信息添加到你的项目的 composer.json 文件中(针对单个项目配置)。见“例2”
为了避免安装包的时候都要执行两次查询,切记要添加禁用 packagist 的设置,如下 1 2 3 4 5
高效可伸缩的结果缓存
shuizhaosi888
高效可伸缩的结果缓存
/**
* 要执行的算法,返回结果v
*/
public interface Computable<A, V> {
public V comput(final A arg);
}
/**
* 用于缓存数据
*/
public class Memoizer<A, V> implements Computable<A,
三点定位的算法
haoningabc
c 算法
三点定位,
已知a,b,c三个顶点的x,y坐标
和三个点都z坐标的距离,la,lb,lc
求z点的坐标
原理就是围绕a,b,c 三个点画圆,三个圆焦点的部分就是所求
但是,由于三个点的距离可能不准,不一定会有结果,
所以是三个圆环的焦点,环的宽度开始为0,没有取到则加1
运行
gcc -lm test.c
test.c代码如下
#include "stdi
epoll使用详解
jimmee
c linux 服务端编程 epoll
epoll - I/O event notification facility在linux的网络编程中,很长的时间都在使用select来做事件触发。在linux新的内核中,有了一种替换它的机制,就是epoll。相比于select,epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中,它是采用轮询来处理的,轮询的fd数目越多,自然耗时越多。并且,在linu
Hibernate对Enum的映射的基本使用方法
linzx0212
enum Hibernate
枚举
/**
* 性别枚举
*/
public enum Gender {
MALE(0), FEMALE(1), OTHER(2);
private Gender(int i) {
this.i = i;
}
private int i;
public int getI
第10章 高级事件(下)
onestopweb
事件
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
孙子兵法
roadrunners
孙子 兵法
始计第一
孙子曰:
兵者,国之大事,死生之地,存亡之道,不可不察也。
故经之以五事,校之以计,而索其情:一曰道,二曰天,三曰地,四曰将,五
曰法。道者,令民于上同意,可与之死,可与之生,而不危也;天者,阴阳、寒暑
、时制也;地者,远近、险易、广狭、死生也;将者,智、信、仁、勇、严也;法
者,曲制、官道、主用也。凡此五者,将莫不闻,知之者胜,不知之者不胜。故校
之以计,而索其情,曰
MySQL双向复制
tomcat_oracle
mysql
本文包括:
主机配置
从机配置
建立主-从复制
建立双向复制
背景
按照以下简单的步骤:
参考一下:
在机器A配置主机(192.168.1.30)
在机器B配置从机(192.168.1.29)
我们可以使用下面的步骤来实现这一点
步骤1:机器A设置主机
在主机中打开配置文件 ,
zoj 3822 Domination(dp)
阿尔萨斯
Mina
题目链接:zoj 3822 Domination
题目大意:给定一个N∗M的棋盘,每次任选一个位置放置一枚棋子,直到每行每列上都至少有一枚棋子,问放置棋子个数的期望。
解题思路:大白书上概率那一张有一道类似的题目,但是因为时间比较久了,还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子,并且消耗k步的概率(k≤i∗j),因为放置在i+1~n上等价与放在i+1行上,同理