a137268431
a137268431

BootStrap入门教程 (一)

2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。如下图所示：

                                                                           https://kippt.com/

BootStrap入门教程 (一)_第1张图片

                                                                              http://www.fleetio.com/

BootStrap入门教程 (一)_第2张图片

     GitHub上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Bootstrap的基础布局--Scaffolding.

      Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive  Design)这六五个方面深入讲解Boostrap的scaffolding.

  1.  全局样式(Global Style).Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用: 
    <!DOCTYPE html>
<html lang="en">
  ...
</html>
    同时，它通过Bootstrap.less文件来设置全局的排版和连接显示风格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等变量来控制基本排版。
  2.  格网系统(Grid System).默认的Bootstrap格网系统提供一个宽达940像素的,12列的格网。这意味着你页面默认宽度是940px,最小的单元要素宽度是940/12px.Bootstrap能够使得你的网页可以更好地适应多种终端设备(平板电脑，智能手机等)。默认格网系统直观概念如图1-1所示：                                                                                                                                                            图1-1 默认格网系统(Default Grid System)                                                                                                                                                                 以下简单的代码则是实现图1-1中，第三列的宽度为4和宽度为8的两个div. 
    <div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

    2.2  偏移列. 有时候，页面要素前面需要一些空白，bootstrap提供了偏移列来实现，如图1-2所示：

                                                                              图1-２ 偏移列(Offset columns)

    以下代码实现了是实现图1-2中，第一列的宽度为4和偏移度为4宽度为4的两个div.

    <div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>

    2.3 嵌套列. 嵌套列是容许用户实现更复杂的页面要素布局。在bootstrap中实现嵌套列非常简单，只需要在原有的div中加入.row 和相应的长度的span* div即可。       如图1-3所示：

                                                                                                                                                    图1-3     嵌套列(Nesting columns) 

    以下代码实现了是实现图1-3中，第一层的宽度为12和第二层两个宽度为6的两个div.

    复制代码 
    <div class="row">
  <div class="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>
    复制代码

    嵌套的div长度之和不能大于它的父div，否则会溢出叠加。各位可以试试将第一层的div长度改为其他值，看看效果。

  3. 流式格网系统(Fluid grid system).它使用%，而不是固定的px,来确定页面要素的宽度.只需要简单的将.row 改成.row-fluid ，就可以将fixed行改为fluid.如图1-4所示：                                                    BootStrap入门教程 (一)_第3张图片                                                                                                                     图1-4 流式格网系统(Fluid grid system)                                                                                                                                                                                  以下代码实现了是实现图1-4中，两个不同长度的流式页面要素. 
    <div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

    嵌套的流式格网和嵌套的固定格网，稍微有些不同。嵌套流式格网(Fluid nesting)的子要素不用匹配父要素的宽度，子要素用100%来表示占满父要素的页面宽度。

  4. 自定义格网(Grid customization).Bootstrap允许通过修改variables.less的参数值来自定义格网系统。主要包括如表1-1所示的变量：
    变量 默认值 说明
    @gridColumns 12 列数
    @gridColumnWidth 60px 每列的宽度
    @gridGutterWidth 20px 列间距

                                                                                                    表1-1 格网变量                                                                                                                                                                                                                                               我们通过修改以上值，并重新编译Bootstrap来实现自定义格网系统。如果添加新的列，需要同时修改grid.less.同样的,需要修改responsive.less来获得多设备兼容.

  5. 布局(Layout).本文最后我们讨论创建页面基础模板的布局。如前面所言，Bootstrap提供两种布局方式，包括固定(Fixed)和流式(Fliud)布局。如图1-5所示，左边为Fixed布局，右边为Fluid布局：                          BootStrap入门教程 (一)_第4张图片                                                                                                                    图1-5 布局(Layout)                                                                                                                                                                                           固定布局代码如下： 
    <body>
  <div class="container">
    ...
  </div>
</body>

    流式布局代码如下：

    复制代码 
    <div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>
    复制代码

    如果对Bootstrap提供的布局不够满意，可以参见Less Frame Work 提供的模板。

    最后，再次强调，官方文档极其优秀，强烈推荐各位直接参考和学习之。http://twitter.github.com/bootstrap/index.html

    参考文献与延伸阅读：

    1.Bootstrap的来由和发展。http://www.alistapart.com/articles/building-twitter-bootstrap/

    2.Less与Sass的介绍与对比.http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

    3.Html5模板 http://html5boilerplate.com/

    4.Html5与Bootstrap混合项目(H5BP)https://gist.github.com/1422879

    5.20个有用的Bootstrap资源 http://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/

    6.Bootstrap按钮生成器 http://charliepark.org/bootstrap_buttons/

    7.前后端结合讨论  http://stackoverflow.com/questions/9525170/backend-technology-for-front-end-technologies-like-twitter-bootstrap

    8. Bootstrap英文教程  http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

你可能感兴趣的:(bootstrap,less,jquery插件)

  • Vue2案例 尔-尔 学习笔记vue前端
    一、自定义创建项目1、基于VueCli自定义创建项目Babel/Router/Vuex/CSS/LinterVue2.xVueRouterhash模式CSS预处理LessESlint:StandardconfigLintonSaveIndedicatedconfigfiles(配置文件所在位置)Npm2、ESlint代码规范1.认识代码规范代码规范:一套写代码的约定规则。赋值符号的左右是否需要空格
  • Serverless架构下的持续交付实践 软件工程实践 软件工程最佳实践AI软件构建大数据系统架构serverless架构运维ai
    Serverless架构下的持续交付实践关键词：Serverless架构、持续交付、DevOps、无服务器计算、自动化部署摘要：本文深入探讨了Serverless架构下的持续交付实践。首先介绍了Serverless架构和持续交付的背景知识，接着解释了相关核心概念及其关系，详细阐述了核心算法原理与操作步骤，通过数学模型加深理解，结合实际项目案例展示了代码实现与解读，探讨了实际应用场景，推荐了相关工具
  • Ansible部署MySQL实操 码农运维知识 运维mysqlansiblemysql
    一、Ansible概述Ansible是一款开源的自动化运维工具，由MichaelDeHaan于2012年创建，2015年被红帽（RedHat）收购（收购金额超1亿美元）。它基于Python开发，通过SSH协议实现远程节点管理，无需在被控端安装任何客户端代理（Agentless）。这种设计使其成为轻量级、易部署的自动化解决方案，特别适合批量系统配置、应用程序部署和任务编排等场景。核心特点无代理架构：
  • odrive软件的版本 m0_55305757 stm32电机嵌入式硬件odrive
    odrive软件的版本0.4.0通信方面引入一个fibre变复杂了（节点还是手工生成的），cpp程序开始变多了。（sensorless我看到变成独立文件了）pythontool开始使用pip安装形式。0.5.0开始支持spi的encoder，as5047之类0.5.1据说之后的版本controlloop开始变化0.5.2开始应该是大修改了//RequiredtouseOC4forADCtrigge
  • 集成学习基础：Bagging 原理与应用 大千AI助手 人工智能Python#OTHER集成学习机器学习人工智能算法决策树Bagging
    本文由「大千AI助手」原创发布，专注用真话讲AI，回归技术本质。拒绝神话或妖魔化。搜索「大千AI助手」关注我，一起撕掉过度包装，学习真实的AI技术！Bagging介绍1.定义与全称：Bagging是BootstrapAggregating的缩写，中文常译为装袋法。它是一种并行式的集成学习方法。核心目标是通过构建多个基学习器的预测结果进行组合（通常是投票或平均），来获得比单一基学习器更稳定、更准确、
  • Bootstrap 5学习教程，从入门到精通，Bootstrap 5 侧边栏导航(Offcanvas) 语法知识点及案例（26） 知识分享小能手 Bootstrap5前端开发网页开发bootstrap学习前端typescriptjavascripthtmlcss
    Bootstrap5侧边栏导航(Offcanvas)语法知识点及案例一、Offcanvas语法知识点1.基本结构Offcanvas由以下几个主要部分组成：触发按钮（通常带有data-bs-toggle="offcanvas"属性）Offcanvas容器（带有.offcanvas类）关闭按钮（通常放在offcanvas内部）2.核心类.offcanvas:主容器.offcanvas-start/.o
  • Bootstrap 5学习教程，从入门到精通，Bootstrap 5 表单语法知识点及案例（28） 知识分享小能手 前端开发Bootstrap5网页开发bootstrap学习前端typescripthtmlcssjavascript
    Bootstrap5表单语法知识点及案例Bootstrap5提供了强大而灵活的表单控件和布局选项。一、基础表单结构Bootstrap5表单需要以下基本结构：基础表单示例Bootstrap5基础表单邮箱地址我们不会将您的邮箱分享给其他人。密码记住我提交二、表单控件1.输入框(Input)Bootstrap5提供了多种输入框样式：文本输入邮箱输入密码输入数字输入日期输入2.文本域(Textarea)文
  • Bootstrap 5学习教程，从入门到精通，Bootstrap 5 滚动监听（Scrollspy）语法知识点及案例代码（25） 知识分享小能手 网页开发Bootstrap5前端开发bootstrap学习前端javascripttypescripthtmlcss
    Bootstrap5滚动监听（Scrollspy）语法知识点及案例代码Bootstrap5的Scrollspy组件允许根据用户的滚动位置自动更新导航链接的激活状态。这对于创建具有固定导航栏的单页网站特别有用，能够提升用户体验和导航的便捷性。一、Scrollspy语法知识点1.基本结构要使用Scrollspy，需要以下几个关键部分：导航栏（Navbar）：包含指向页面不同部分的链接。目标容器（Tar
  • Bootstrap 5学习教程，从入门到精通，Bootstrap 5 Flex 布局语法知识点及案例（27） 知识分享小能手 网页开发Bootstrap5前端开发bootstrap学习前端javascriptecmascripthtmlcss
    Bootstrap5Flex布局语法知识点及案例Bootstrap5提供了强大的Flexbox工具集，让布局变得更加简单灵活。以下是Bootstrap5Flex布局的完整知识点和详细案例代码。一、Flex布局基础语法1.启用Flex布局我是一个flex容器我是一个行内flex容器2.方向控制(flex-direction)水平排列（默认）水平反向排列垂直排列垂直反向排列3.主轴对齐(justify
  • 同态加密库（HElib） deepdata_cn 同态加密同态加密
    HElib是一个开源的同态加密软件库，由耶鲁大学专家开发，最初由ShaiHalevi和VictorShoup开发，CraigGentry在IBM任职期间也参与相关研究，于2013年5月5日首次发布。主要支持带自举（Bootstrapping）的Brakerski-Gentry-Vaikuntanathan（BGV）方案和近似数Cheon-Kim-Kim-Song（CKKS）方案。一、项目概述开发背
  • 限流系列之五：TDMQ RabbitMQ Serverless 版限流机制深度解析与实践指南 腾讯云中间件 消息队列腾讯云rabbitmqserverless
    导语分布式集群限流是保障云服务高可用性的核心技术手段，其意义不仅在于防止系统过载，更是构建弹性架构、优化资源效率、实现业务可持续性的关键策略。未来，随着边缘计算和Serverless的普及，限流技术将进一步与底层基础设施深度融合，成为构建下一代高可用架构的核心基石。腾讯云TDMQRabbitMQServerless版作为一款极致弹性、高性能且高可靠的消息中间件，通过提供稳定低延迟的消息服务，助力企
  • Netty入门案例：简单Echo服务器（同步） 熙客 12_计算机网络服务器java
    目录1、添加Netty依赖2、服务器端3、客户端4、运行步骤1、添加Netty依赖io.nettynetty-all4.1.68.Final2、服务器端importio.netty.bootstrap.ServerBootstrap;importio.netty.channel.*;importio.netty.channel.nio.NioEventLoopGroup;importio.nett
  • SpringCloud-config配置中心 Enter_灵猴 每日一记
    config服务端启动类要加@EnableConfigServerbootstrap.propertiesspring.application.name=config-serverserver.port=f服务端启动端口号spring.cloud.config.server.git.uri=https://github.com/登陆账号/仓库名spring.cloud.config.server.
  • PAT A 1043 Is It a Binary Search Tree cwn_ 算法c++数据结构图论
    ABinarySearchTree(BST)isrecursivelydefinedasabinarytreewhichhasthefol‐lowingproperties:•Theleftsubtreeofanodecontainsonlynodeswithkeyslessthanthenode’skey.•Therightsubtreeofanodecontainsonlynodeswithk
  • JS学习日记（jQuery库） 红中马喽 javascript学习jquery笔记开发语言
    前言今天先更新jQuery库的介绍，它是一个用来帮助快速开发的工具介绍jQuery是一个快速，小型且功能丰富的JavaScript库，jQuery设计宗旨是“writeless，domore”，即倡导写更少的代码，做更多的事，它封装JavaScript常用的功能代码，提供一种简便的方式进行使用，大大提高了开发效率，jQuery目前支持的浏览器包括Chrome，edge，firefox，ie9+,S
  • Microsoft VBA Excel 操控 Access资料表和查询代码进行搬运操作 偷心伊普西隆 VBA学习和实践microsoftexcel前端
    问题场景Run_NoSource_AddressSource_FileDestination_AddressDestination_FileCopy_IndicatorRun_Start_Time1C:\Users\EP\path\to\FileSSS-1.MDBC:\Users\EP\path\to\FileSSC-1.MDBY2C:\Users\EP\path\to\FileSSS-2.MDB
  • 【安全漏洞】深入剖析CVE-2021-40444-Cabless利用链 IT老涵 安全网络漏洞安全安全漏洞网络安全
    背景CVE-2021-40444为微软MHTML远程命令执行漏洞，攻击者可通过传播MicrosoftOffice文档，诱导目标点击文档从而在目标机器上执行任意代码。该漏洞最初的利用思路是使用下载cab并释放、加载inf文件的形式执行恶意代码。独立安全研究员EduardoB.在github公开了一种新的“无CAB”的漏洞利用方法及其POC。公众号之前发布的研判文章中已对在野利用中出现的新的Cable
  • 三阶落地：腾讯云Serverless+Spring Cloud的微服务实战架构 大熊计算机 #腾讯云架构腾讯云serverless
    云原生演进的关键挑战（1）传统微服务架构痛点资源利用率低（非峰值期资源闲置率>60%）运维复杂度高（需管理数百个容器实例）突发流量处理能力弱（扩容延迟导致P99延迟飙升）（2）Serverless的破局价值腾讯云SCF（ServerlessCloudFunction）提供：毫秒级计费粒度（成本下降40%~70%）百毫秒级弹性伸缩（支持每秒万级并发扩容）零基础设施运维同步调用异步事件用户请求API网
  • Linux命令行操作基础 EnigmaCoder Linuxlinux运维服务器
    目录前言目录结构✍️语法格式操作技巧Tab补全光标操作基础命令登录和电源管理命令⚙️login⚙️last⚙️exit⚙️shutdown⚙️halt⚙️reboot文件命令⚙️浏览目录类命令pwdcdls⚙️浏览文件类命令catmorelessheadtail⚙️目录操作类命令mkdirrmdir⚙️文件操作类命令mvrmtouchfindgziptar⚙️cp前言大家好！我是EnigmaCod
  • rabbitmq安装 虚拟ip_步骤4：配置IPv6地址 weixin_39755625 rabbitmq安装虚拟ip
    自动配置IPv6地址ecs-util-ipv6能为已分配IPv6地址的ECS实例一键配置IPv6地址，或者为没有分配IPv6地址的ECS实例一键清理IPv6配置。ecs-util-ipv6工具下载地址如下所示。系列发行版下载地址RHELCentOS5/6/7/8RedHat5/6/7DebianUbuntu14/16Debian/8/9SLESSUSE11/12OpenSUSE42CoreOSCo
  • Netty核心组件树形关系解析 jarenyVO Nettyspringjava后端
    Netty核心组件树形关系解析以树形结构为您展示Netty核心组件的层级关系，帮助您从底层理解组件间的组织架构。一、Netty核心组件树形图NettyFramework├──启动引导层│├──Bootstrap(客户端)│└──ServerBootstrap(服务端)│├──线程模型层│├──EventLoopGroup││├──NioEventLoopGroup(默认实现)││├──EpollE
  • 互联网大厂Java求职面试：云原生应用开发中的高并发架构设计与实战 在未来等你 Java场景面试宝典AI技术编程JavaSpring
    互联网大厂Java求职面试：云原生应用开发中的高并发架构设计与实战引言在当今互联网行业，云原生技术已经成为构建现代应用的基石。从微服务到容器化部署，再到服务网格和Serverless架构，云原生技术正在重塑软件开发的方式。作为一名Java工程师，想要在大厂中脱颖而出，不仅需要扎实的编程基础，还需要对云原生生态有深入的理解和实践经验。本文将通过一个真实的技术面试场景，展现一位名叫郑薪苦的程序员在面对
  • UWB工作原理的简明介绍：Introduction to Impulse Radio UWB Seamless Access Systems（1）：脉冲；超宽带；测距；定位 Ankie（资深技术项目经理） 无线网络技术UWB原理和实操UWBairtag脉冲超宽带定位测距无线通信
    Ankie的评论：UWB全称ImpulseRadioUltra-Wideband(IR-UWB)systems，脉冲式超宽带系统。超带宽意思是500MHZ，远远超过蓝牙BT的1m，2mhz和WiFi的20m-32mhz。脉冲式：不是持续输出，而是间断的喷射。早期UWB努力集中在使用正交频分复用（OFDM）和直接序列扩频（DSSS）的高数据速率通信上。后来，重点才转向测距和地理定位。2019年后由于
  • 无服务器架构（Serverless）：构建高效的事件驱动应用 一碗黄焖鸡三碗米饭 云原生技术与实践云原生架构后端
    无服务器架构（Serverless）：构建高效的事件驱动应用在传统的IT架构中，开发者需要亲自管理服务器的部署、扩展、监控和维护。随着云计算的普及，这种管理工作逐渐被托管给云服务商，开发者只需专注于业务逻辑。这一转变催生了无服务器架构（Serverless），它不仅简化了基础设施管理，也为开发者提供了更高效、更灵活的方式来构建和部署应用。本文将深入探讨无服务器计算模型，分析其优势、应用场景，并详细
  • Serverless架构下的OSS应用：函数计算FC自动处理图片/视频转码（演示水印添加+缩略图生成流水线） 大熊计算机 #阿里云serverless架构音视频
    1引言在当今数字内容爆炸式增长的时代，媒体文件处理已成为各类应用的基础需求。传统处理方案面临三大核心挑战：资源利用率低下（高峰期资源不足，低峰期资源闲置）、运维复杂度高（需管理服务器集群）和成本不可控（基础设施固定成本高）。根据IDC最新研究，企业平均有35%的服务器资源处于闲置状态，而在媒体处理场景中这一比例可达50%以上。Serverless架构通过颠覆性的计算模型解决了这些问题。函数计算（F
  • docker部署rabbitmq 微笑听雨。 java进阶教程dockerlinuxrabbitmqjavacentos
    下载镜像此处加management可以访问web管理界面，无需再单独加插件dockerpullrabbitmq:management启动镜像dockerrun--restart=unless-stopped-d--hostnamemy-rabbit--namerabbitmq\-v/home/rabbitmq:/var/lib/rabbitmq\-eRABBITMQ_DEFAULT_USER=ad
  • docker部署nginx 微笑听雨。 java进阶教程nginxdockerlinuxcentos
    下载镜像dockerpullnginx启动镜像dockerrun--restart=unless-stopped-p80:80-p9999:9999-p11111:11111-p3500:3500--namenginx\-v/home/nginx/html:/usr/share/nginx/html\-v/home/renren-devtools:/home/renren-devtools\-v/
  • 万级K8s集群背后etcd稳定性及性能优化实践 「已注销」 云计算容器kubernetesetcddocker
    背景与挑战随着腾讯自研上云及公有云用户的迅速增长，一方面，腾讯云容器服务TKE服务数量和核数大幅增长,另一方面我们提供的容器服务类型（TKE托管及独立集群、EKS弹性集群、edge边缘计算集群、mesh服务网格、serverlessknative）也越来越丰富。各类容器服务类型背后的核心都是K8s，K8s核心的存储etcd又统一由我们基于K8s构建的etcd平台进行管理。基于它我们目前管理了千级e
  • Qi认证怎么认证？ Microtest_CS 无线充
    在深入探讨QI（WirelessPowerConsortium，无线电源联盟）认证流程之前，我们首先需要理解QI认证的重要性。随着无线充电技术的飞速发展，市场上涌现出众多支持无线充电的设备，但不同品牌、不同型号的充电器与接收设备之间的兼容性问题日益凸显。QI认证作为无线充电领域的一项国际标准，旨在确保不同品牌间的无线充电产品能够无缝协作，提升用户体验，同时保障充电过程的安全性和效率。###QI认证
  • Vue 样式穿透语法大全（涵盖 Vue2、Vue3、Less、Scss 等） 年纪轻轻就扛不住 VUEvue.jslessscssvue前端框架
    1.什么是样式穿透？样式穿透是在使用Vue组件时，为了修改子组件或第三方组件的样式而使用的一种特殊语法。当我们使用scoped样式时，由于样式被限制在当前组件内，要修改子组件的样式就需要使用样式穿透。2.为什么需要样式穿透？2.1Scoped样式的局限性.child{/*这里的样式只会影响到子组件的根元素*//*无法影响到子组件内部的元素*/color:red;}2.2常见使用场景修改第三方组件样
  • Java开发中，spring mvc 的线程怎么调用？ 小麦麦子 springmvc
    今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。 问题：     在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局
  • maven依赖范围 bitcarter maven
    1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包 2.compile 只有编译和打包时才会依赖 3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包 4.runtime 运行时依赖，编译不依赖 5.默认compile 依赖范围compile是支持传递的，test不支持传递 1.传递的意思是项目A，引用
  • Jaxb org.xml.sax.saxparseexception : premature end of file darrenzhu xmlprematureJAXB
    如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误： org.xml.sax.saxparseexception : premature end of file 很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In
  • CSS Specificity 周凡杨 html权重Specificitycss
      有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。     规则：   HTML标签的权重是1 Class 的权重是10 Id 的权重是100
  • java与servlet g21121 servlet
    servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。 下面是java官方网站上对servlet的介绍： java官网对于servlet的解释 写道 Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha
  • eclipse中安装maven插件 510888780 eclipsemaven
    1.首先去官网下载 Maven： http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 下载完成之后将其解压， 我将解压后的文件夹：apache-maven-3.2.3， 并将它放在 D:\tools目录下， 即 maven 最终的路径是：D:\tools\apache-mave
  • jpa@OneToOne关联关系 布衣凌宇 jpa
    Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。 Nruser实体类 //***************************************************************** @Entity @Table(name="nruser") @DynamicInsert @Dynam
  • 我的spring学习笔记11-Spring中关于声明式事务的配置 aijuans spring事务配置
    这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中
  • java 动态代理简单实现 antlove javahandlerproxydynamicservice
    dynamicproxy.service.HelloService package dynamicproxy.service; public interface HelloService { public void sayHello(); }   dynamicproxy.service.impl.HelloServiceImpl package dynamicp
  • JDBC连接数据库 百合不是茶 JDBC编程JAVA操作oracle数据库
             如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;   JDBC链接数据库的代码和固定写法;     1,加载oracle数据库的驱动;     &nb
  • 单例模式中的多线程分析 bijian1013 javathread多线程java多线程
    谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。 饿汉式： package com.bijian.study; public class Singleton { private Singleton() { } // 注意这是private 只供内部调用 private static
  • javascript读取和修改原型特别需要注意原型的读写不具有对等性 bijian1013 JavaScriptprototype
            对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有
  • 【持久化框架MyBatis3六】MyBatis3集成第三方DataSource bit1129 dataSource
    MyBatis内置了数据源的支持，如：   <environments default="development"> <environment id="development"> <transactionManager type="JDBC" /> <data
  • 我程序中用到的urldecode和base64decode,MD5 bitcarter cMD5base64decodeurldecode
    这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码： string Base64Decode(const char* Data,int DataByte,int& OutByte) { //解码表 const char DecodeTable[] = { 0, 0, 0, 0, 0, 0
  • 腾讯资深运维专家周小军：QQ与微信架构的惊天秘密 ronin47
    社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心
  • java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素 bylijinnan java
    public class MinOfShiftedArray { /** * Q69 旋转数组的最小元素 * 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。 */ publ
  • 看博客，应该是有方向的 Cb123456 反省看博客
    看博客，应该是有方向的:  我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.  我刚突然想到的:  1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。  2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.    为什么要写
  • [开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖 comsci 开源项目
         为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。       所以，为避免这种不确定性风险，我
  • 一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ） cwqcwqmax9 sql
    见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 Web翻页优化实例 提交时间: 2004-6-18 15:37:49      回复    发消息  环境： Linux ve
  • Hibernat and Ibatis dashuaifu Hibernateibatis
    Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi
  • 备份MYSQL脚本 dcj3sjt126com mysql
    #!/bin/sh # this shell to backup mysql #[email protected] (QQ:1413161683 DuChengJiu) _dbDir=/var/lib/mysql/ _today=`date +%w` _bakDir=/usr/backup/$_today [ ! -d $_bakDir ] && mkdir -p
  • iOS第三方开源库的吐槽和备忘 dcj3sjt126com ios
    转自 ibireme的博客   做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。   目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。   首先整理了一份 Github上排名靠
  • html wlwmanifest.xml eoems htmlxml
    所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。 步骤： 加入到function.php remove_action('wp_head', 'wp_generator'); //wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog remov
  • 浅谈Java定时器发展 hacksin java并发timer定时器
    java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。 Timer与ScheduleThreadPoolExecutor对比： 1.    Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列
  • 移动端页面侧边导航滑入效果 ini jqueryWebhtml5cssjavascirpt
    效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码： <!DOCTYPE html> <h
  • AspectJ+Javasist记录日志 kane_xie aspectjjavasist
    在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。   @Override public String get(String key) { // long start = System.currentTimeMillis(); // System.out.println("Be
  • redis学习笔记 MJC410621 redisNoSQL
    1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。 1，处理超大量的数据 2，运行在便宜的PC服务器集群上， 3，击碎了性能瓶颈。 1)对数据高并发读写。 2)对海量数据的高效率存储和访问。 3)对数据的高扩展性和高可用性。 redis支持的类型： Sring 类型 set name lijie get name lijie set na
  • 使用redis实现分布式锁 qifeifei
    在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：   public Long setnx(final byte[] key, final byte[] value) { checkIsInMulti(); client.setnx(key, value); ret
  • BI并非万能，中层业务管理报表要另辟蹊径 张老师的菜 大数据BI商业智能信息化
           BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。        BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有
  • 安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题 wudixiaotie function
    1.在~/.bashrc最后加入 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  2.重新启动terminal输入：   rvm use ruby-2.2.1 --default  把当前安装的ruby版本设为默
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他