概述
GitHub上这样介绍 bootstrap：
简单灵活可用于架构流行的用户界面和交互接口的 html、css、javascript 工具集。
基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
自定义 JQuery 插件，完整的类库，基于 Less 等。
https://getbootstrap.com/
<link rel ="stylesheet" href ="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" > 标题
Bootstrap 对标题样式进行了显著的优化重置。
副标题，使用
行高都是1，而且 font-weight 设置了 normal，变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
<h1 > Bootstrap标题一<small > 我是副标题small >h1 >段落（正文文本）
源码默认样式：
body {
font-family : "Helvetica Neue" , Helvetica, Arial, sans-serif font-size : 14 px line-height : 1.42857143 color : #333 background-color : #fff }
p {
margin : 0 0 10 px } 强调内容
一个段落p突出显示，可以通过添加类名 lead 实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
<p > 我是一个普通的段落，我不需要强调显p >
<p class ="lead" > 这部分内容需要特别的强调，我和别人长得不一样p >源码样式：
.lead {
margin-bottom : 20 px font-size : 16 px font-weight : 200 line-height : 1.4 }
@media (min-width: 768 px) {
.lead {
font-size : 21 px }
}除此之外，Bootstrap还通过元素标签:
粗体
粗体就是给文本加粗，在普通的元素中我们一般通过 font-weight 设置为 bold 关键词给文本加粗。在 Bootstrap 中，可以使用
斜体
除了可以给元素设置样式 font-style 值为 italic 实现之外，在 Bootstrap 中还可以通过使用标签
强调相关的类
在Bootstrap中除了使用标签 .lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）.text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d).text-info：通知信息，使用浅蓝色（#31708f）.text-warning：警告，使用黄色（#8a6d3b）.text-danger：危险，使用褐色（#a94442）
<div class ="text-danger" > .text-danger效果div >文本对齐风格
Bootstrap 通过定义四个类名来控制文本的对齐风格：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
列表
在 HTML 文档中，列表结构主要有三种：有序列表、无序列表和定义列表。
<ul >
<li > …li >
ul >
<ol >
<li > …li >
ol >
<dl >
<dt > …dt >
<dd > …dd >
dl >Bootstrap 根据平时的使用情形提供了六种形式的列表：
普通列表
有序列表
去点列表
内联列表
描述列表
水平描述列表
无序列表、有序列表
无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用 ul，有序列表使用 ol 标签），在样式方面，Bootstrap 只是在此基础上做了一些细微的优化，只是在 margin 上做了一些调整。在 Bootstrap 中列表也是可以嵌套的。
去点列表
通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
.list-unstyled {
padding-left : 0 list-style : none } 除了项目编号之外，还将列表默认的左边内距也清０了。
内联列表
Bootstrap 像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
源码样式：
.list-inline {
padding-left : 0 margin-left : -5 px list-style : none }
.list-inline > li {
display : inline-block padding-right : 5 px padding-left : 5 px } 示例：
<ul class ="list-inline" >
<li > W3cplusli >
<li > Blogli >
<li > CSS3li >
<li > jQueryli >
<li > PHPli >
ul >定义列表
对于定义列表而言，Bootstrap 并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。
<dl >
<dt > 北京dt >
<dd > 北京是中国的首都，是政治文化集中地dd >
<dt > 上海dt >
<dd > 上海号称东方的巴黎dd >
dl >水平定义列表
水平定义列表就像内联列表一样，Bootstrap 可以给 .dl-horizontal”给定义列表实现水平显示效果。
代码风格
用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格：
使用 单个单词或单个句子的代码。
使用 多行代码（也就是成块的代码）。
使用 键盘输入的内容。
<div > Bootstrap的代码风格有三种：
<code > <code>code >
<pre > <pre>pre >
<kbd > <kbd>kbd >
div >注意：不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于
有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap 也考虑到这一点，你只需要在 pre 标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为 340px，一旦超出这个高度，就会在 Y 轴出现滚动条。
源码：
.pre-scrollable {
max-height : 340 px overflow-y : scroll } 如果您了解 LESS 或 Sass 这样的 CSS 预定定义处理器，你完全可以通过 code.less 或者 _code.scss 文件修改样式，然后重新编译，你就可以得到属于自己的代码样式风格。
表格
表格是 Bootstrap 的一个基础组件之一，Bootstrap 为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。
.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格
表格行的类
Bootstrap 还为表格的行元素 提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
注意：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap 针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给 tr 元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。
注意要实现悬浮状态，需要在标签上加入 table-hover 类。
基础表格（table）
对表格的结构，跟我们平时使用表格是一样的：
<table >
<thead >
<tr >
<th > 表格标题th >
…
tr >
thead >
<tbody >
<tr >
<td > 表格单元格td >
…
tr >
…
tbody >
table >在 Bootstrap 中，对于基础表格是通过类名“.table”来控制。如果在 元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在 元素上添加“.table”类名，就可以得到 Bootstrap 的基础表格：
<table class ="table" >
…
table >
“.table”主要有三个作用：
给表格设置了margin-bottom:20px 以及设置单元内距；
在 thead 底部设置了一个 2px 的浅灰实线；
每个单元格顶部设置了一个 1px 的浅灰实线。
斑马线表格（table-striped）
让表格带有背景条纹效果，在 Bootstrap 中实现这种表格效果并不困难，只需要在 的基础上增加类名“.table-striped”即可：
<table class ="table table-striped" >
…
table >其效果与基础表格相比，仅是在 tbody 隔行有一个浅灰色的背景色。其实现原理也非常的简单，利用 CSS3 的结构性选择器“:nth-child”来实现，所以对于 IE8 以及其以下浏览器，没有背景条纹效果。
带边框的表格（table-bordered）
Bootstrap 出于实际运用，也考虑这种表格效果，即所有单元格具有一条1px 的边框。 基础上添加一个“.table-bordered”类名即可：
<table class ="table table-bordered" >
…
table >
鼠标悬浮高亮的表格（table-hover）
当鼠标悬停在表格的行上面有一个高亮的背景色，这样的表格让人看起来就是舒服，时刻告诉用户正在阅读表格哪一行的数据。Bootstrap 的确没有让你失望，他也考虑到这种效果，其提供了一个“.table-hover”类名来实现这种表格效果。
<table class ="table table-hover" >
…
table >紧凑型表格（table-condensed）
何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的 内距 padding 的值。那么在 Bootstrap 中，通过类名“table-condensed”重置了单元格内距值。
<table class ="table table-condensed" >
…
table >
注意，不管制作哪种表格都离不开类名“table”。所以大家在使用 Bootstrap 表格时，千万注意，你的 元素中一定不能缺少类名“table”。
响应式表格（）
Bootstrap 提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将 置于这个容器当中`，这样表格也就具有响应式效果。
<div class ="table-responsive" >
<table class ="table table-bordered" >
…
table >
div >Bootstrap 中响应式表格效果表现为：当你的浏览器可视区域小于 768px 时，表格底部会出现水平滚动条。当你的浏览器可视区域大于 768px 时，表格底部水平滚动条就会消失。
你可能感兴趣的:(前端开发入门)
JavaScript 树形菜单总结
Auscy
microsoft
树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，
前端项目架构设计要领
1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目
【前端】jQuery数组合并去重方法总结
在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...
Vue3+Vite+TS+Axios整合详细教程
老马聊技术
Vue Vite TS vue.js
1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个
前端 NPM 包的依赖可视化分析工具推荐
前端视界
前端艺匠馆 前端 npm arcgis ai
前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开
数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验
ui设计前端开发老司机
ui
hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言：从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度，当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”
Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求
可曾去过倒悬山
java 前端 架构
Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场
《Java前端开发全栈指南：从Servlet到现代框架实战》
前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处
Vue3组件库实战: 打造高复用UI系统
武昌库里写JAVA
面试题汇总与解析 课程设计 spring boot vue.js layui 毕业设计
Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证
Flutter基础（前端教程⑥-按钮切换）
aaiier
Flutter flutter 前端 状态模式
1.假设你已有的两个表单组件（示例）//手机号注册表单（示例）classPhoneRegisterFormextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[TextField(decoration:InputDecoration(labelText:'手机号')),Text
为Layui Table组件添加前端搜索功能
caifox菜狐狸
JavaScript 学习之旅：从新手到专家 前端 layui javascript table 前端搜索 表格搜索 前端框架
在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添
Vue.js 过渡 & 动画
lsx202406
开发语言
Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
GPT实操——利用GPT创建一个应用
狗木马
深度学习 gpt-3 gpt
功能描述信息查询：用户可以询问各种问题，如天气、新闻、股票等，机器人会返回相关信息。任务执行：用户可以要求机器人执行一些简单的任务，如设置提醒、发送邮件等。情感支持：机器人可以与用户进行情感交流，提供安慰和支持。个性化设置：用户可以自定义机器人的回复风格和偏好。技术栈前端：React.js后端：Node.js+Express数据库：MongoDB自然语言处理：OpenAIGPT-3API其他工具：
前端面试题总结——JS篇
又又呢
前端 javascript 开发语言
一、说说JavaScript中的数据类型？存储上有什么差别？1、数据类型基本类型number：数值类型十进制：letintNum=55八进制（零开头）：letnum1=070十六进制（0x开头）：lethexNum1=0xANaN：特殊数值，意为“不是数值”string：字符串类型boolean：布尔值，true或falseundefined：表示未定义null：空值symbol：是原始值，且符号
前端面试题——5.AjAX的缺点？
浅端
前端面试题 前端面试题
①传统的web交互是：用户一个网页动作，就会发送一个http请求到服务器，服务器处理完该请求再返回一个完整的HTML页面，客户端再重新加载，这样极大地浪费了带宽。②AJAX的出现解决了这个问题，它只会向服务器请求用户所需要的数据，并在客户端采用JavaScript处理返回的数据，操作DOM更新页面。③AJXA优点：无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点：干掉了Back和Hist
2023高薪前端面试题（二、前端核心——Ajax）
原生AjaxAjax简介Ajax全程为AsynchronousJavaScript+XML，就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势是：无刷新获取数据，实现局部刷新Ajax是一种用于创建快速动态网页的技术AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示
前端面试题——手写实现 ajax
阿水爱踢中锋
ajax js 前端
凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据，这样就能在保证良好用户体验的同时，将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯，几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法，如jQuery、zepto、angular等等，这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷，就是我们知道如何去使用封
uniapp 如何封装实现任意页面都能使用的全局弹窗
代码简单说
2025开发必备(限时特惠) uni-app vue.js javascript uniapp全局弹窗 uniapp弹窗组件
【实战干货】uniapp如何封装实现任意页面都能使用的全局弹窗标签：uniapp弹窗组件全局弹窗Vue动态渲染跨页面弹窗✨前端老司机亲授，uniapp无法在所有页面中直接用自定义弹窗？别急，一招动态挂载vue实例，优雅解决！背景故事：一个被“弹窗”搞崩溃的早晨作为一名前端开发工程师，有一天我在给uniapp项目加IM消息功能，需求是：不论当前用户在哪个页面，只要有消息来，就要立即弹出提示窗口。听起
【前端】接口日志追踪
毕业茄
前端
1.问题描述场景：前端提交数据后，接口回调再次添加参数，但页面跳转/刷新导致之前的console.log数据丢失。影响：无法追踪完整的请求流程，调试困难。2.环境信息项目说明浏览器GoogleChrome120+开发者工具ChromeDevTools技术栈前端：Vue/React/其他接口类型RESTfulAPI/GraphQL3.解决方案3.1保留控制台日志（推荐）步骤：打开Chrome开发者工
【前端】异步任务风控验证与轮询机制技术方案（通用笔记版）
一、背景场景在某类生成任务中，例如用户点击“执行任务”按钮后触发一个较耗时的后端操作（如生成报告、渲染图像、转码视频等），由于其调用了模型、渲染服务或需要较长处理时间，为了防止接口被频繁恶意调用，系统需要加入风控验证机制。此外，因任务处理为异步，前端无法立即获得最终结果，因此需通过轮询方式定期查询任务状态，等待任务完成后展示结果。二、整体流程说明1.用户点击“执行任务”按钮：前端调用风控接口/ap
uniapp对接unipush 1.0 ios/android
车轮滚滚__
uni-app ios android
配置注意需要打包自定义基座之后在手机上运行自定义基座才可以！官方有文档可以根据文档来我这里用的是1.0为什么没有2.0因为2.0要用uinicloud注意每次打包之后cid都会变cid用户的标识iduniapp通过这个id可以把消息推送给指定人前端代码前端要做的很简单直接放到app.vue中onLaunch钩子中即可麻烦的在后端和个推的对接onPushMessage(that){//#ifdefA
在html中加入网址,网页超链接怎么做，添加超链接网址的的详细步骤
一只爪子
在html中加入网址
此系列教程主要讲解HTML从基础到精通。自己能够设计一个完整的前端网页项目。程序员写代码在HTML中添加图片其实很简单，就是添加一个img的标签。图片标签的语法一般有src、alt、width、height四种属性就够用了。效果：图片的显示效果图片路径的写法src表示的是图片的路径，这里面的值应该怎么写呢？(1)html文件和图片在相同一个文件夹下。HTML文件和图片文件在相同的目录下，可以直接书
uniapp项目如何优雅处理Token失效自动重试 token无感刷新
代码简单说
2025开发必备(限时特惠) uni-app uniapp token重试 uniapp token获取 token无感刷新 uniapp自动刷新token 前端登录状态管理 token自动刷新
uniapp项目如何优雅处理Token失效自动重试token无感刷新标签：uniapp｜前端登录状态管理｜Token自动刷新｜前端重试队列作为一名前端开发，我在重构公司旧项目时，踩到了一个大家经常遇到的坑：Token失效后请求失败，用户体验极差。而更糟糕的是，在一个页面里多个请求同时发出，全部失败并跳转登录，场面就像是“弹窗地狱”。我决定把这个问题解决到底，封装出一个可复用、稳定、自动重试的请求模
前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比
前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指
【译】2018 前端性能优化清单 —— 第一部分
qq_36320160
前端 前端
原文地址：Front-EndPerformanceChecklist2018-Part1原文作者：VitalyFriedman译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-1.md译者：tvChan校对者：mysterytonyry
如何做到无感刷新token?
如何做到无感刷新token?前言后端刷新Token方案--自动刷新token前端刷新Token方案--token续约疑问及思考前言解决方案：自动刷新tokentoken续约思路如果Token即将过期，你在验证用户权限的同时，为用户生成一个新的Token并返回给客户端，客户端需要更新本地存储的Token，还可以做定时任务来刷新Token，可以不生成新的Token，在快过期的时候，直接给Token增加
uniapp登录成功后跳回原有页面+无感刷新token
黑匣子~
uniapp uni-app token
uniapp登录成功后跳回原有页面引言在C端的页面场景中，我们经常会有几种情况到登录页：区分需要登录和不用登录的页面，点击需要登录才能查看的页面已经登录但是超时，用户凭证失效等原因以上情况可以细分为两种，一种是从未登录过的，需要第一次去登录，还一种是已经登录了，但是cookie失效了，需要重新获取用户凭证，这样的话后端会将两个状态码区分，那我们前端需要根据不同的状态码进行相应的处理。第一次登录时当
2024年运维最新分布式存储ceph osd 常用操作_ceph查看osd对应硬盘(1)，2024年最新Linux运维编程基础教程
2401_83944328
程序员 运维 分布式 ceph
最全的Linux教程，Linux从入门到精通======================linux从入门到精通(第2版)Linux系统移植Linux驱动开发入门与实战LINUX系统移植第2版Linux开源网络全栈详解从DPDK到OpenFlow第一份《Linux从入门到精通》466页====================内容简介====本书是获得了很多读者好评的Linux经典畅销书**《Linu
前端开发常见问题
技术文章大纲性能优化问题页面加载速度慢的常见原因及解决方案渲染阻塞资源的处理方法图片与媒体文件优化策略懒加载与代码分割的实现方式浏览器兼容性问题不同浏览器对CSS特性的支持差异JavaScriptAPI的兼容性处理方案Polyfill的使用场景与实现方法自动化测试工具在兼容性测试中的应用响应式设计挑战移动端与桌面端布局适配问题媒体查询的最佳实践方案视口单位与相对单位的正确使用高DPI屏幕的图像处理
反射+注解实现数据库Map转换成实体Map工具类
皮卡丘比比比
实现场景因为原始的需求是从数据库中查询出来的一个实体字段比如一个Useruser=newUser（）的实体类，有userName，userId两个字段。然后我返回一个list给前端，Listlist现在需求变化，我需要添加一个额外的字段，比如userCompany，就没有办法使用刚才那个返回对象的方法现在直接从数据库中多表查询一个Map如下("user_name","curry"),("user_
HQL之投影查询
归来朝歌
HQL Hibernate 查询语句 投影查询
在HQL查询中，常常面临这样一个场景，对于多表查询，是要将一个表的对象查出来还是要只需要每个表中的几个字段，最后放在一起显示？
针对上面的场景，如果需要将一个对象查出来：
HQL语句写“from 对象”即可
Session session = HibernateUtil.openSession();
Spring整合redis
bylijinnan
redis
pom.xml
<dependencies>
<!-- Spring Data - Redis Library -->
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-redi
org.hibernate.NonUniqueResultException: query did not return a unique result: 2
0624chenhong
Hibernate
参考：http://blog.csdn.net/qingfeilee/article/details/7052736
org.hibernate.NonUniqueResultException: query did not return a unique result: 2
在项目中出现了org.hiber
android动画效果
不懂事的小屁孩
android动画
前几天弄alertdialog和popupwindow的时候，用到了android的动画效果，今天专门研究了一下关于android的动画效果，列出来，方便以后使用。
Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。
第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。
js delete 删除机理以及它的内存泄露问题的解决方案
换个号韩国红果果
JavaScript
delete删除属性时只是解除了属性与对象的绑定，故当属性值为一个对象时，删除时会造成内存泄露 （其实还未删除）
举例：
var person={name:{firstname:'bob'}}
var p=person.name
delete person.name
p.firstname -->'bob'
// 依然可以访问p.firstname，存在内存泄露
Oracle将零干预分析加入网络即服务计划
蓝儿唯美
oracle
由Oracle通信技术部门主导的演示项目并没有在本月较早前法国南斯举行的行业集团TM论坛大会中获得嘉奖。但是，Oracle通信官员解雇致力于打造一个支持零干预分配和编制功能的网络即服务（NaaS）平台，帮助企业以更灵活和更适合云的方式实现通信服务提供商（CSP）的连接产品。这个Oracle主导的项目属于TM Forum Live!活动上展示的Catalyst计划的19个项目之一。Catalyst计
spring学习——springmvc（二）
a-john
springMVC
Spring MVC提供了非常方便的文件上传功能。
1，配置Spring支持文件上传：
DispatcherServlet本身并不知道如何处理multipart的表单数据，需要一个multipart解析器把POST请求的multipart数据中抽取出来，这样DispatcherServlet就能将其传递给我们的控制器了。为了在Spring中注册multipart解析器，需要声明一个实现了Mul
POJ-2828-Buy Tickets
aijuans
ACM_POJ
POJ-2828-Buy Tickets
http://poj.org/problem?id=2828
线段树，逆序插入
#include<iostream>#include<cstdio>#include<cstring>#include<cstdlib>using namespace std;#define N 200010struct
Java Ant build.xml详解
asia007
build.xml
1,什么是antant是构建工具2,什么是构建概念到处可查到，形象来说，你要把代码从某个地方拿来，编译，再拷贝到某个地方去等等操作，当然不仅与此，但是主要用来干这个3,ant的好处跨平台 --因为ant是使用java实现的，所以它跨平台使用简单--与ant的兄弟make比起来语法清晰--同样是和make相比功能强大--ant能做的事情很多，可能你用了很久，你仍然不知道它能有
android按钮监听器的四种技术
百合不是茶
android xml配置 监听器 实现接口
android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方;
1,activity中使用内部类实现接口 ,创建内部类实例 使用add方法 与java类似
创建监听器的实例
myLis lis = new myLis();
使用add方法给按钮添加监听器
软件架构师不等同于资深程序员
bijian1013
程序员 架构师 架构设计
本文的作者Armel Nene是ETAPIX Global公司的首席架构师，他居住在伦敦，他参与过的开源项目包括 Apache Lucene,，Apache Nutch， Liferay 和 Pentaho等。
如今很多的公司
TeamForge Wiki Syntax & CollabNet User Information Center
sunjing
TeamForge How do Attachement Anchor Wiki Syntax
the CollabNet user information center http://help.collab.net/
How do I create a new Wiki page?
A CollabNet TeamForge project can have any number of Wiki pages. All Wiki pages are linked, and
【Redis四】Redis数据类型
bit1129
redis
概述
Redis是一个高性能的数据结构服务器，称之为数据结构服务器的原因是，它提供了丰富的数据类型以满足不同的应用场景，本文对Redis的数据类型以及对这些类型可能的操作进行总结。
Redis常用的数据类型包括string、set、list、hash以及sorted set.Redis本身是K/V系统，这里的数据类型指的是value的类型，而不是key的类型，key的类型只有一种即string
SSH2整合-附源码
白糖_
eclipse spring tomcat Hibernate Google
今天用eclipse终于整合出了struts2+hibernate+spring框架。
我创建的是tomcat项目，需要有tomcat插件。导入项目以后，鼠标右键选择属性，然后再找到“tomcat”项，勾选一下“Is a tomcat project”即可。具体方法见源码里的jsp图片，sql也在源码里。
补充1：项目中部分jar包不是最新版的，可能导
[转]开源项目代码的学习方法
braveCS
学习方法
转自：
http://blog.sina.com.cn/s/blog_693458530100lk5m.html
http://www.cnblogs.com/west-link/archive/2011/06/07/2074466.html
1）阅读features。以此来搞清楚该项目有哪些特性2）思考。想想如果自己来做有这些features的项目该如何构架3）下载并安装d
编程之美-子数组的最大和（二维）
bylijinnan
编程之美
package beautyOfCoding;
import java.util.Arrays;
import java.util.Random;
public class MaxSubArraySum2 {
/**
* 编程之美 子数组之和的最大值（二维）
*/
private static final int ROW = 5;
private stat
读书笔记-3
chengxuyuancsdn
jquery笔记 resultMap配置 ibatis一对多配置
1、resultMap配置
2、ibatis一对多配置
3、jquery笔记
1、resultMap配置
当<select resultMap="topic_data">
<resultMap id="topic_data">必须一一对应。
(1)<resultMap class="tblTopic&q
[物理与天文]物理学新进展
comsci
如果我们必须获得某种地球上没有的矿石,才能够进行某些能量输出装置的设计和建造,而要获得这种矿石,又必须首先进行深空探测,而要进行深空探测,又必须获得这种能量输出装置,这个矛盾的循环,会导致地球联盟在与宇宙文明建立关系的时候,陷入困境
怎么办呢?
Oracle 11g新特性:Automatic Diagnostic Repository
daizj
oracle ADR
Oracle Database 11g的FDI（Fault Diagnosability Infrastructure）是自动化诊断方面的又一增强。
FDI的一个关键组件是自动诊断库（Automatic Diagnostic Repository-ADR）。
在oracle 11g中，alert文件的信息是以xml的文件格式存在的，另外提供了普通文本格式的alert文件。
这两份log文
简单排序:选择排序
dieslrae
选择排序
public void selectSort(int[] array){
int select;
for(int i=0;i<array.length;i++){
select = i;
for(int k=i+1;k<array.leng
C语言学习六指针的经典程序，互换两个数字
dcj3sjt126com
c
示例程序，swap_1和swap_2都是错误的，推理从1开始推到2，2没完成，推到3就完成了
# include <stdio.h>
void swap_1(int, int);
void swap_2(int *, int *);
void swap_3(int *, int *);
int main(void)
{
int a = 3;
int b =
php 5.4中php-fpm 的重启、终止操作命令
dcj3sjt126com
PHP
php 5.4中php-fpm 的重启、终止操作命令:
查看php运行目录命令：which php/usr/bin/php
查看php-fpm进程数：ps aux | grep -c php-fpm
查看运行内存/usr/bin/php -i|grep mem
重启php-fpm/etc/init.d/php-fpm restart
在phpinfo()输出内容可以看到php
线程同步工具类
shuizhaosi888
同步工具类
同步工具类包括信号量（Semaphore）、栅栏（barrier）、闭锁（CountDownLatch）
闭锁（CountDownLatch）
public class RunMain {
public long timeTasks(int nThreads, final Runnable task) throws InterruptedException {
fin
bleeding edge是什么意思
haojinghua
DI
不止一次，看到很多讲技术的文章里面出现过这个词语。今天终于弄懂了——通过朋友给的浏览软件，上了wiki。
我再一次感到，没有辞典能像WiKi一样，给出这样体贴人心、一清二楚的解释了。为了表达我对WiKi的喜爱，只好在此一一中英对照，给大家上次课。
In computer science, bleeding edge is a term that
c中实现utf8和gbk的互转
jimmee
c iconv utf8&gbk编码
#include <iconv.h>
#include <stdlib.h>
#include <stdio.h>
#include <unistd.h>
#include <fcntl.h>
#include <string.h>
#include <sys/stat.h>
int code_c
大型分布式网站架构设计与实践
lilin530
应用服务器 搜索引擎
1.大型网站软件系统的特点？
a.高并发，大流量。
b.高可用。
c.海量数据。
d.用户分布广泛，网络情况复杂。
e.安全环境恶劣。
f.需求快速变更，发布频繁。
g.渐进式发展。
2.大型网站架构演化发展历程？
a.初始阶段的网站架构。
应用程序，数据库，文件等所有的资源都在一台服务器上。
b.应用服务器和数据服务器分离。
c.使用缓存改善网站性能。
d.使用应用
在代码中获取Android theme中的attr属性值
OliveExcel
android theme
Android的Theme是由各种attr组合而成, 每个attr对应了这个属性的一个引用, 这个引用又可以是各种东西.
在某些情况下, 我们需要获取非自定义的主题下某个属性的内容 (比如拿到系统默认的配色colorAccent), 操作方式举例一则:
int defaultColor = 0xFF000000;
int[] attrsArray = { andorid.r.
基于Zookeeper的分布式共享锁
roadrunners
zookeeper 分布式 共享锁
首先，说说我们的场景，订单服务是做成集群的，当两个以上结点同时收到一个相同订单的创建指令，这时并发就产生了，系统就会重复创建订单。等等......场景。这时，分布式共享锁就闪亮登场了。
共享锁在同一个进程中是很容易实现的，但在跨进程或者在不同Server之间就不好实现了。Zookeeper就很容易实现。具体的实现原理官网和其它网站也有翻译，这里就不在赘述了。
官
两个容易被忽略的MySQL知识
tomcat_oracle
mysql
1、varchar(5)可以存储多少个汉字，多少个字母数字？ 相信有好多人应该跟我一样，对这个已经很熟悉了，根据经验我们能很快的做出决定，比如说用varchar(200)去存储url等等，但是，即使你用了很多次也很熟悉了，也有可能对上面的问题做出错误的回答。 这个问题我查了好多资料，有的人说是可以存储5个字符，2.5个汉字（每个汉字占用两个字节的话），有的人说这个要区分版本，5.0
zoj 3827 Information Entropy(水题)
阿尔萨斯
format
题目链接：zoj 3827 Information Entropy
题目大意：三种底，计算和。
解题思路：调用库函数就可以直接算了，不过要注意Pi = 0的时候，不过它题目里居然也讲了。。。limp→0+plogb(p)=0，因为p是logp的高阶。
#include <cstdio>
#include <cstring>
#include <cmath&
