Jason秀啊
Jason秀啊

响应式布局-bootstrap

响应式

什么是响应式布局

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

为什么要有响应式布局？

  • 在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。
  • 通常的做法是针对移动端单独做一套特定的版本。
  • 如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）
  • 响应式布局 ：一个网站能够兼容多个终端（节约开发成本）

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

响应式开发现状：

  • 如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）
  • 在新建站点 上采用响应式开发的越来越多。
  • 在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。

响应式开发与移动web开发的比较

开发方式 移动web开发+pc开发 响应式开发
引用场景 一般已经有了PC端网站，只需要端独开发移动端网站即可 针对一些新建网站，并且要求适配移动端
开发 针对性强，开发效率高 兼容各种终端，效率低
适配 只能适配移动端或者PC端，pad上体验比较差 可以适配各种终端
效率 代码简介，加载快 代码相对复杂，加载慢 
//思考：响应式开发的原理是什么？

媒体查询

媒体查询（Media Query）是CSS3提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

设备分类

分类 宽度范围
大屏设备 >1200px
中屏设备 992px~1200px
小屏设备 768px~992px
超小屏设备 < 768px

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaLpC5fJ-1572574097764)(D:\ITClass\myself\就业班\day08\1.png)]

媒体查询的使用

需求：

响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。

媒体查询语法：

/*查询屏幕*/
@media screen and 条件 {
}

/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    background-color: red;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 970px;
    background-color: blue;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
    background-color: yellow;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    background-color: green;
  }
}

注意: 媒体查询仅仅是一个css使用的限制条件,并不会增加css的权重

弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。

bootstrap框架

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap中文网

特点：

  • 组件简洁大方、代码规范精简、界面自定义性强。
  • Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery( 第三方库, 后面讲解 )。
  • Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

优点：

  • 有自己的生态圈，不断的更新迭代
  • 提供了一套简洁、直观、强悍的组件
  • 标准化的HTML+CSS编码规范
  • 让开发更简单，提高了开发效率。
  • 扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。

版本：

  • 2.x.x 停止维护
    • 优点：兼容性好
    • 缺点：代码不够简洁、功能不够完善
  • 3.x.x 目前使用最多
    • 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目
    • 缺点：放弃了IE67，对IE8支持但是界面效果不友好
  • 4.x.x 阶段

基本模板


<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>bootstrap基本模板title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
    
  <h1>你好，世界！h1>
    
    
   
  <script src="lib/jquery/jquery-1.12.4.js">script>
  <script src="lib/bootstrap/js/bootstrap.min.js">script>
body>
html>

全局样式

container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
div>

这两种 容器类不能互相嵌套。

栅格系统

栅格系统，也叫网格系统

栅格系统： 是BS实现响应式的核心所在 其底层也是媒体查询 

栅格系统： 不管在什么大小的容器里面，都将这个容器分为12份，在不同大小屏幕里面，占的份数不同

最终目的: 在任何大小的屏幕上 都有较好的浏览体验

// 假设我现在有12个盒子

如果是大屏幕设备, 每行放 6 个 div,   
如果是中屏设备,   每行放 4 个 div,   
如果是小屏设备,   每行放 3 个 div,   
如果是超小屏设备, 每行放 2 个 div,  

大屏    6个div  两    12份  一个div占2份 放6个     大屏上:  16.666% 浮动    
中屏    4个div  三    12份  一个div占3份 放4个     中屏上:  25%   浮动
小屏    3个div  四    12份  一个div占4份 放3个     小屏上:  33.33% 浮动
超小屏  2个div  六    12份  一个div占6份 放2个     超小屏:  50%  浮动
  • .row用于抵消.container容器的15px的padding值
  • 可以在.row中嵌套column

栅格系统常用类（总共12列）

类名 例子 解释
.col-xs-xx .col-xs-6 在超小屏幕（及以上）生效
.col-sm-xx .col-sm-6 在小屏幕（及以上）生效
.col-md-xx .col-md-6 在中屏幕（及以上）生效
.col-lg-xx .col-lg-3 在大屏幕及生效，占1/4
.col-lg-xx .col-lg-4 在大屏幕及生效，占1/3
.col-lg-xx .col-lg-5 在大屏幕及生效，占1/2

【案例：响应式栅格系统】

【案例：列嵌套.html】

<div class="col-lg-4">
      
      <div class="row">
        <div class="col-lg-6">div>
        <div class="col-lg-6">div>
      div>
    div>

【案例：列偏移.html】


<div class="row">
  <div class="col-lg-3">div>
  
  <div class="col-lg-6 col-lg-offset-3">div>
div>

响应式工具

//1. 大屏显示
//2. 中屏不显示
//3. 小屏显示
//4. 超小屏不显示

推荐使用hidden相关的属性

你可能感兴趣的:(响应式布局-bootstrap)

  • 思科路由器交换机密码破解过程详解 zhane_hao
    路由启动过程加电自检(POST)加载bootstrap代码检查配置寄存器寻找CiscoIOS加载CiscoIOS寻找配置文件加载配置文件若没有配置文件，进入Setup模式，进行初始化配置运行路由器操作系统查看命令•showversion：检查配置寄存器的值,硬件配置,IOS版本•showflash：检查Flash中的IOS,或是flash大小,使用情况(占用多少,剩下多少)•showstartup
  • Kafka系列之：kafka命令详细总结 快乐骑行^_^ 日常分享专栏KafkaKafka系列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示例 程序员大侠 前端CSShtmlbootstrap前端
    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 前端javascriptbootstrap
    模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会
  • mirantis OpenStack9.0在virtualbox上的部署 Caroline_33 openstackmirantisvirtualbox
    实验环境安装包-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遇到的问题 云帆@ elasticsearchelasticsearch
    一、目录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
  • 面试php项目中遇到的难点,前端面试被问到项目中的难点有哪些？ weixin_39966130 面试php项目中遇到的难点
    在每个前端求职者的面试过程中，一定都有过被面试官问到项目中的难点，而答不上来的情况。为了让大家在前端面试前准备得更加充足，小编准备了一些易被忽视且难度较高的前端面试题，希望可以帮助大家更加顺利完成求职，找到自己满意的工作。1.流式布局如何实现，响应式布局如何实现？流式布局：也叫fluid,当上面一行的空间不够容纳新的TextView时候才开辟下一行的空间。场景：主要用于关键词搜索或者热门标签等场景
  • 前端框架有哪些？ 赎罪゛ 前端框架前端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管理
  • 推荐开源项目：WP-Player - 强大的WordPress音频与视频播放器 邹澜鹤Gardener
    推荐开源项目：WP-Player-强大的WordPress音频与视频播放器是一个专为WordPress设计的高效、灵活且功能丰富的多媒体播放器插件。它允许你在博客、新闻网站或其他基于WordPress的内容平台上无缝集成音频和视频内容，提供一流的用户体验。技术分析1.响应式设计WP-Player采用现代Web开发原则，支持响应式布局，无论在桌面、平板还是手机等不同设备上，都能自动调整以适应屏幕大小
  • 81.MySQL-PXC高可用集群 戒掉贪嗔痴(薛双奇) 数据库运维-MySQLmysql数据库
    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
  • linux的webkit桌面应用,使用node-webkit构建桌面应用程序 萌萌爱恋
    Web前端的现状目前的Web前端的现状较之5-6年前，简直不能同日而语：从所使用的技术、工具、框架到开发一个产品所需要付出的工作量，从前端开发从业人员的数量到Web应用的数量，从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报，一切都有了翻天覆地的变化。借助HTML5+CSS3的普及，加上一些开箱即用的CSS框架(如bootstrap，foundation等)支持，人们已经可以非常
  • bootstrap 列表 SkTj
    有序列表:olli无序列表：ulli不定义样式：ulclass="list-unstyled"横向显示：ulclass="list-inline"dtdddlclass="dl-horizontal"dtddimage.pngBootstrap实例-列表有序列表Item1Item2Item3Item4无序列表Item1Item2Item3Item4未定义样式列表Item1Item2Item3Ite
  • 前端框架有哪些？以及每种框架的详细介绍 cesske 前端框架
    目录前言1.React2.Vue.js3.Angular4.Bootstrap5.Foundation总结前言前端框架是Web开发中不可或缺的工具，它们为开发者提供了丰富的工具和抽象，使得构建复杂的Web应用变得更加容易。当前，前端框架种类繁多，其中一些最受欢迎的框架包括React、Vue.js、Angular、Bootstrap和Foundation等。以下是对这些框架的简要介绍：提示：以下是本
  • logstash 墨咖 logstash中间件服务器运维
    kafkainput{kafka{bootstrap_servers=>"127.0.0.1:9092"topics=>["SCHOOL_AQDL"]group_id=>"logstash-group"consumer_threads=>3codec=>"json"}}sysloginput{syslog{port=>12345codec=>cefsyslog_field=>"syslog"gro
  • springboot集成Kafka Maruko310 javaKafkakafkaspringbootjava
    yml配置如果下游的数据处理不及时，可以提高每批次拉取的数量，配置时不仅要设置max-poll-records属性（批量消费最大数量），也要将type设置为batch（默认single（单条），batch（批量）），不然会报类型无法转换的错误。kafka:#kafka的连接地址（注意，是kafka所在服务器的公网ip，不要写成zookeeper的了）bootstrap-servers:localh
  • Kafka~Kafka命令行参数使用教程 飞Link 大数据kafkazookeeper分布式
    一、kafka-topics.sh1.参数参数描述–bootstrap-server连接的KafkaBroker主机名称和端口号–topic操作的topic名称–create创建主题–delete删除主题–alter修改主题–list查看所有主题–describe查看主题详细描述–partition设置分区数–replication-factor设置分区副本–config更新系统默认的配置2.实例
  • kafka ---- producer与broker配置详解以及ack机制详解 husterlichf #kafkakafkajava分布式
    一、producer配置1、bootstrap.serverskafkabroker集群的ip列表，格式为：host1:port1,host2:port2,…2、client.id用于追踪消息的源头3、retries当发送失败时客户端会进行重试，重试的次数由retries指定，默认值是2147483647，即Integer.MAX_VALUE；在重试次数耗尽和delivery.timeout.ms
  • 前端框架大盘点 HITZXL 前端开发#VUE前端框架前端javascript
    最近项目中用到了很多前后端分离的框架。很多框架虽然类似，但项目中却总用混用的情况，看到陌生的框架，总是一头雾水，干脆来个大盘点。一扫心中困惑。目前对于前端的各种技术，还有很多理解不到的地方。例如前端框架，前端组件，UI库，这些总感觉有些傻傻分不清楚。毕竟都是用来协助项目快速开发和上手的，因此，看到了别人的总结，感觉清晰明了。放在这里压住阵脚：css框架：Bootstrap、Layui、Zui、Am
  • Bootstrap 按钮（实例 ） 2401_84093443 程序员bootstrap前端javascript
    默认大小的原始按钮默认大小的按钮小的原始按钮小的按钮特别小的原始按钮特别小的按钮块级的原始按钮块级的按钮按钮状态Bootstrap提供了激活、禁用等按钮状态的class，下面将进行详细讲解。激活状态按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。下表列出了让按钮元素和锚元素呈激活状态的class：下面的实例演示了这点：Bootstrap实例-按钮激活状态默认按钮激活按钮原始按钮激
  • Spring Cloud 系列五《Nacos+gateway（配置中心+网关）》 哈叮 微服务springcloudspringspringbootjava
    0、前言上篇已经集成Nacos，本篇把网关（SpringCloudGateway）加上1、代码截图代码是在上篇基础上修改的，有些重叠的就不贴代码了。2、Common增加了一个通用服务，主要用来引入通用包pom：注意openfeign，loadbalancer，bootstrap，都是不可获取的。com.alibaba.cloudspring-cloud-starter-alibaba-nacos-
  • Bootstrap - 表单 廖马儿
    Bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列，个性化定制等。代码：这是一个输入框:这是一个输入框:北京北京北京这是一个输入框:效果：图片.pngclass:对标签添加：class="form-inline"可以让它水平排列：图片.png对Input设置大小可以添加class：input-sminput-lg应该使用form-group设置
  • vue.js项目实战案例源码 前端码趣逗士 vue.js
    案例一：博客系统项目概述：一个简单的博客系统，包括文章列表展示、文章详情查看、分类筛选、用户登录注册等功能。技术栈：Vue.jsVueRouterVuexAxiosBootstrap主要功能实现：文章列表展示：使用Axios从后端API获取文章列表数据。在Vue组件中展示文章标题、摘要和发布日期等信息。博客文章列表{{article.title}}{{article.summary}}{{arti
  • 继之前的线程循环加到窗口中运行 3213213333332132 javathreadJFrameJPanel
    之前写了有关java线程的循环执行和结束，因为想制作成exe文件，想把执行的效果加到窗口上，所以就结合了JFrame和JPanel写了这个程序，这里直接贴出代码，在窗口上运行的效果下面有附图。 package thread; import java.awt.Graphics; import java.text.SimpleDateFormat; import java.util
  • linux 常用命令 BlueSkator linux命令
    1.grep 相信这个命令可以说是大家最常用的命令之一了。尤其是查询生产环境的日志，这个命令绝对是必不可少的。 但之前总是习惯于使用 （grep -n 关键字 文件名 ）查出关键字以及该关键字所在的行数，然后再用 （sed -n  '100,200p' 文件名），去查出该关键字之后的日志内容。 但其实还有更简便的办法，就是用（grep  -B n、-A n、-C n 关键
  • php heredoc原文档和nowdoc语法 dcj3sjt126com PHPheredocnowdoc
    <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body> <?
  • overflow的属性 周华华 JavaScript
    <!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/1999/xhtml&q
  • 《我所了解的Java》——总体目录 g21121 java
            准备用一年左右时间写一个系列的文章《我所了解的Java》，目录及内容会不断完善及调整。         在编写相关内容时难免出现笔误、代码无法执行、名词理解错误等，请大家及时指出，我会第一时间更正。    &n
  • [简单]docx4j常用方法小结 53873039oycg docx
            本代码基于docx4j-3.2.0，在office word 2007上测试通过。代码如下:         import java.io.File; import java.io.FileInputStream; import ja
  • Spring配置学习 云端月影 spring配置
    首先来看一个标准的Spring配置文件 applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&q
  • Java新手入门的30个基本概念三 aijuans java新手java 入门
    17.Java中的每一个类都是从Object类扩展而来的。　　18.object类中的equal和toString方法。　　equal用于测试一个对象是否同另一个对象相等。　　toString返回一个代表该对象的字符串,几乎每一个类都会重载该方法,以便返回当前状态的正确表示.(toString 方法是一个很重要的方法)　　 19.通用编程:任何类类型的所有值都可以同object类性的变量来代替。　
  • 《2008 IBM Rational 软件开发高峰论坛会议》小记 antonyup_2006 软件测试敏捷开发项目管理IBM活动
    我一直想写些总结,用于交流和备忘,然都没提笔,今以一篇参加活动的感受小记开个头,呵呵! 其实参加《2008 IBM Rational 软件开发高峰论坛会议》是9月4号,那天刚好调休.但接着项目颇为忙,所以今天在中秋佳节的假期里整理了下. 参加这次活动是一个朋友给的一个邀请书,才知道有这样的一个活动,虽然现在项目暂时没用到IBM的解决方案,但觉的参与这样一个活动可以拓宽下视野和相关知识.
  • PL/SQL的过程编程,异常,声明变量,PL/SQL块 百合不是茶 PL/SQL的过程编程异常PL/SQL块声明变量
    PL/SQL;    过程; 符号; 变量; PL/SQL块; 输出; 异常;     PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言PL/SQL 是对 SQL 的扩展,sql的执行时每次都要写操作
  • Mockito(三)--完整功能介绍 bijian1013 持续集成mockito单元测试
            mockito官网：http://code.google.com/p/mockito/，打开documentation可以看到官方最新的文档资料。 一.使用mockito验证行为 //首先要import Mockito import static org.mockito.Mockito.*; //mo
  • 精通Oracle10编程SQL(8)使用复合数据类型 bijian1013 oracle数据库plsql
    /* *使用复合数据类型 */ --PL/SQL记录 --定义PL/SQL记录 --自定义PL/SQL记录 DECLARE TYPE emp_record_type IS RECORD( name emp.ename%TYPE, salary emp.sal%TYPE, dno emp.deptno%TYPE ); emp_
  • 【Linux常用命令一】grep命令 bit1129 Linux常用命令
    grep命令格式   grep [option] pattern [file-list]     grep命令用于在指定的文件(一个或者多个,file-list)中查找包含模式串(pattern)的行,[option]用于控制grep命令的查找方式。   pattern可以是普通字符串，也可以是正则表达式，当查找的字符串包含正则表达式字符或者特
  • mybatis3入门学习笔记 白糖_ sqlibatisqqjdbc配置管理
    MyBatis 的前身就是iBatis，是一个数据持久层(ORM)框架。  MyBatis 是支持普通 SQL 查询，存储过程和高级映射的优秀持久层框架。MyBatis对JDBC进行了一次很浅的封装。   以前也学过iBatis，因为MyBatis是iBatis的升级版本，最初以为改动应该不大，实际结果是MyBatis对配置文件进行了一些大的改动，使整个框架更加方便人性化。
  • Linux 命令神器：lsof 入门 ronin47 lsof
           lsof是系统管理/安全的尤伯工具。我大多数时候用它来从系统获得与网络连接相关的信息，但那只是这个强大而又鲜为人知的应用的第一步。将这个工具称之为lsof真实名副其实，因为它是指“列出打开文件（lists openfiles）”。而有一点要切记，在Unix中一切（包括网络套接口）都是文件。 有趣的是，lsof也是有着最多
  • java实现两个大数相加，可能存在溢出。 bylijinnan java实现
    import java.math.BigInteger; import java.util.regex.Matcher; import java.util.regex.Pattern; public class BigIntegerAddition { /** * 题目：java实现两个大数相加，可能存在溢出。 * 如123456789 + 987654321
  • Kettle学习资料分享，附大神用Kettle的一套流程完成对整个数据库迁移方法 Kai_Ge Kettle
    Kettle学习资料分享   Kettle 3.2 使用说明书 目录 概述..........................................................................................................................................7 1.Kettle 资源库管
  • [货币与金融]钢之炼金术士 comsci 金融
           自古以来,都有一些人在从事炼金术的工作.........但是很少有成功的        那么随着人类在理论物理和工程物理上面取得的一些突破性进展......        炼金术这个古老
  • Toast原来也可以多样化 dai_lm androidtoast
    Style 1： 默认 Toast def = Toast.makeText(this, "default", Toast.LENGTH_SHORT); def.show(); Style 2： 顶部显示 Toast top = Toast.makeText(this, "top", Toast.LENGTH_SHORT); t
  • java数据计算的几种解决方法3 datamachine javahadoopibatisr-languer
    4、iBatis     简单敏捷因此强大的数据计算层。和Hibernate不同，它鼓励写SQL，所以学习成本最低。同时它用最小的代价实现了计算脚本和JAVA代码的解耦，只用20%的代价就实现了hibernate 80%的功能,没实现的20%是计算脚本和数据库的解耦。     复杂计算环境是它的弱项，比如：分布式计算、复杂计算、非数据
  • 向网页中插入透明Flash的方法和技巧 dcj3sjt126com htmlWebFlash
    将 Flash 作品插入网页的时候，我们有时候会需要将它设为透明，有时候我们需要在Flash的背面插入一些漂亮的图片，搭配出漂亮的效果……下面我们介绍一些将Flash插入网页中的一些透明的设置技巧。 　　一、Swf透明、无坐标控制　　首先教大家最简单的插入Flash的代码，透明，无坐标控制： 　　注意wmode="transparent"是控制Flash是否透明
  • ios UICollectionView的使用 dcj3sjt126com
    UICollectionView的使用有两种方法，一种是继承UICollectionViewController，这个Controller会自带一个UICollectionView；另外一种是作为一个视图放在普通的UIViewController里面。 个人更喜欢第二种。下面采用第二种方式简单介绍一下UICollectionView的使用。 1.UIViewController实现委托，代码如
  • Eos平台java公共逻辑 蕃薯耀 Eos平台java公共逻辑Eos平台java公共逻辑
     Eos平台java公共逻辑 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:20:4
  • SpringMVC4零配置--Web上下文配置【MvcConfig】 hanqunfeng springmvc4
    与SpringSecurity的配置类似，spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明。   applicationContext-MvcConfig.xml <!-- 启用注解，并定义组件查找规则 ，mvc层只负责扫描@Controller --> <
  • 解决ie和其他浏览器poi下载excel文件名乱码 jackyrong Excel
       使用poi,做传统的excel导出，然后想在浏览器中，让用户选择另存为，保存用户下载的xls文件，这个时候，可能的是在ie下出现乱码（ie,9,10,11),但在firefox,chrome下没乱码， 因此必须综合判断，编写一个工具类：      /** * * @Title: pro
  • 挥洒泪水的青春 lampcy 编程生活程序员
    2015年2月28日，我辞职了，离开了相处一年的触控，转过身--挥洒掉泪水，毅然来到了兄弟连，背负着许多的不解、质疑——”你一个零基础、脑子又不聪明的人，还敢跨行业，选择Unity3D？“，”真是不自量力••••••“，”真是初生牛犊不怕虎•••••“，••••••我只是淡淡一笑，拎着行李----坐上了通向挥洒泪水的青春之地——兄弟连！ 这就是我青春的分割线，不后悔，只会去用泪水浇灌——已经来到
  • 稳增长之中国股市两点意见-----严控做空，建立涨跌停版停牌重组机制 nannan408
       对于股市，我们国家的监管还是有点拼的，但始终拼不过飞流直下的恐慌，为什么呢？    笔者首先支持股市的监管。对于股市越管越荡的现象，笔者认为首先是做空力量超过了股市自身的升力，并且对于跌停停牌重组的快速反应还没建立好，上市公司对于股价下跌没有很好的利好支撑。    我们来看美国和香港是怎么应对股灾的。美国是靠禁止重要股票做空，在
  • 动态设置iframe高度(iframe高度自适应) Rainbow702 JavaScriptiframecontentDocument高度自适应局部刷新
    如果需要对画面中的部分区域作局部刷新，大家可能都会想到使用ajax。 但有些情况下，须使用在页面中嵌入一个iframe来作局部刷新。 对于使用iframe的情况，发现有一个问题，就是iframe中的页面的高度可能会很高，但是外面页面并不会被iframe内部页面给撑开，如下面的结构： <div id="content"> <div id=&quo
  • 用Rapael做图表 tntxia rap
    function drawReport(paper,attr,data){          var width = attr.width;     var height = attr.height;          var max = 0;   &nbs
  • HTML5 bootstrap2网页兼容（支持IE10以下） xiaoluode html5bootstrap
    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他