参考资料：

　　bootstrap：http://www.bootcss.com/

汤姆大叔的博客： 《深入理解Bootstrap》http://item.jd.com/11462962.html

截图：

屏幕大于970px：

屏幕小于970px大于750px：

　

　`

小于780px：

页面代码：

 <!DOCTYPE html>

 <html lang="zh-CN">

   <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title></title>

     <link href="css/bootstrap.min.css" rel="stylesheet">

     <link href="css/index.css" rel="stylesheet">

     <!--[if lt IE 9]>

       <script src="js/html5shiv.min.js"></script>

      <script src="js/respond.min.js"></script>

     <![endif]-->

     <!--[if lte IE 6] -->

     <!--[if lte IE 7]>

       <link rel="stylesheet" type="text/css" href="css/bootstrap-ie6.css">

       <link rel="stylesheet" type="text/css" href="css/ie.css">

     <![endif]-->

   </head>

   <body>

     <nav>

         <div class="container">

             <div class="navbar navbar-default">

                 <div class="navbar-header">

                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                     <span class="sr-only">Toggle navigation</span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                   </button>

                   <a class="navbar-brand" href="#">SOCCER</a>

                 </div>

                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                   <ul class="nav navbar-nav navbar-right">

                     <li class="active"><a href="#">HOME</a></li>

                     <li><a href="#">ABOUT US</a></li>

                     <li><a href="#">GALLERY</a></li>

                     <li><a href="#">TRAINING</a></li>

                     <li><a href="#">NEWS & EVENTS</a></li>

                     <li><a href="#">CONTACT</a></li>

                   </ul>

                 </div>

             </div>

         </div>

     </nav>

     <div class="container-fluid search-for  ">

         <div class="container clearfix">

             <div class="input-group form-search">

                 <input type="text" class="form-input">

                 <input type="button" class="form-btn">

             </div>

             <div class=" share-main">

                 <a href="#" class="shareIcon-1"></a>

                 <a href="#" class="shareIcon-2"></a>

                 <a href="#" class="shareIcon-3"></a>

                 <a href="#" class="shareIcon-4"></a>

                 <a href="#" class="shareIcon-5"></a>

             </div>

         </div>

     </div>

     <div class="container-fluid">

         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000">

           <div class="carousel-inner" role="listbox">

             <div class="item active">

               <img src="data:images/bnr1.jpg" alt="...">

               <div class="carousel-captions">

                     <div class="carousel-title">

                         Sed ultricies elementum.

                     </div>

                     <div class="carousel-info">Lorem Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a odio quam. Aenean ipsum arcu,

                   luctus vel ultricies ut, commodo sed turpis. Phasellus tristique lorem sit amet tellus dignissim hendrerit.

                   In hac habitasse platea dictumst. Sed vehicula volutpat varius elit. consectetur adipiscing elit.</div>

               </div>

             </div>

             <div class="item">

               <img src="data:images/bnr2.jpg" alt="...">

               <div class="carousel-captions">

                 <div class="carousel-title">Curabitur turpis posuere rutrum.</div>

                 <div class="carousel-info">

                     Lorem Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a odio quam. Aenean ipsum arcu,

                   luctus vel ultricies ut, commodo sed turpis. Phasellus tristique lorem sit amet tellus dignissim hendrerit.

                   In hac habitasse platea dictumst. Sed vehicula volutpat varius elit. consectetur adipiscing elit.

                 </div>

               </div>

             </div>

             <div class="item">

               <img src="data:images/bnr3.jpg" alt="...">

               <div class="carousel-captions">

                 <div class="carousel-title">Sed ultricies elementum.</div>

                 <div class="carousel-info">Lorem Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a odio quam. Aenean ipsum arcu,

                   luctus vel ultricies ut, commodo sed turpis. Phasellus tristique lorem sit amet tellus dignissim hendrerit.

                   In hac habitasse platea dictumst. Sed vehicula volutpat varius elit. consectetur adipiscing elit.</div>

               </div>

             </div>

           </div>

         </div>

     </div>

     <div class="container mt-20">

         <div class="row ">

             <div class="cl-r  col-xs-12 col-md-6 col-sm-6 mb-10">

                 <div class="news-block bg-pink">

                     <div>

                         <i class="icon-4"></i>

                     </div>

                     <div>

                         <h3>CHAMPIONS LEAGUE</h3>

                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>

                     </div>

                 </div>

             </div>

             <div class=" col-md-6 col-sm-6 col-xs-12 mb-10">

                 <div class="news-block bg-bule">

                     <div>

                         <i class="icon-3"></i>

                     </div>

                     <div>

                         <h3>NEWS & EVENTS</h3>

                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>

                     </div>

                 </div>

             </div>

         </div>

         <div class="row mb-10">

             <div class="cl-r col-md-6 col-sm-6 col-xs-12 mb-10">

                 <div class="news-block bg-red">

                     <div>

                         <i class="icon-1"></i>

                     </div>

                     <div>

                         <h3>TRAINING</h3>

                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>

                     </div>

                 </div>

             </div>

             <div class=" col-md-6 col-sm-6 col-xs-12">

                 <div class="news-block bg-cyan">

                     <div>

                         <i class="icon-2"></i>

                     </div>

                     <div>

                         <h3>FINAL TOURNAMENT</h3>

                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>

                     </div>

                 </div>

             </div>

         </div>

         <div class="row mb-10">

             <div class="col-md-4 col-sm-4 col-xs-12 brief-info">

                 <img src="data:images/c1.jpg" alt="">

                 <div>

                     <h3 class="colr-red">

                         Champion's League

                     </h3>

                     <p>

                         Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker.

                     </p>

                     <a href="#">Read More..</a>

                 </div>

             </div>

             <div class="col-md-4 col-sm-4 col-xs-12 brief-info">

                 <img src="data:images/c2.jpg" alt="">

                 <div>

                     <h3 class="colr-red">

                         Women's Cup

                     </h3>

                     <p>

                         Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker.

                     </p>

                     <a href="#">Read More..</a>

                 </div>

             </div>

             <div class="col-md-4 col-sm-4 col-xs-12 brief-info">

                 <img src="data:images/c3.jpg" alt="">

                 <h3 class="colr-red">

                     Final Tournment

                 </h3>

                 <p>

                     Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker.

                 </p>

                 <a href="#">Read More..</a>

             </div>

         </div>

         <div class="row mb-20">

             <div class=" col-sm-6 col-xs-12 col-md-4 bottom-list">

                 <h3 class="colr-red">

                     POPULAR TAGS

                 </h3>

                 <ul class="list-unstyled">

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                 </ul>

             </div>

             <div class=" col-xs-12 col-sm-6 col-md-4 bottom-list">

                 <h3 class="colr-red">

                     ABOUT

                 </h3>

                 <b>

                     Morbi sed arcu mollis, elementum erat venenatis, tincidunt tellus.

                 </b>

                 <img src="data:images/cnt.ab.jpg"  alt="">

                 <p>

                     Aenean ut condimentum magna, mattis pretium massa. Sed sollicitudin ullamcorper auctor. Duis vestibulum velit id augue pulvinar egestas. Morbi sed orci auctor, feugiat felis at, fermentum magna. In ac egestas lectus.

                 </p>

             </div>

             <div class="col-sm-12 col-xs-12 col-md-4 bottom-list-back">

                 <div>

                     <h3 class="colr-red">OUR COACHES</h3>

                     <div class="media">

                           <div class="media-left">

                             <a href="#">

                               <img class="media-object" data-src="holder.js/64x64"  src="data:images/ch1.jpg">

                             </a>

                           </div>

                           <div class="media-body">

                             <h4 class="media-heading">Phasellus at Tellus</h4>

                             <h5>Aenean vestibulum</h5>

                             <p>

                                 Donec ornare massa at velit fringilla, condimentum magna ornare tincidunt nulla dignissim.

                             </p>

                           </div>

                     </div>

                     <hr/>

                     <div class="media">

                           <div class="media-left">

                             <a href="#">

                               <img class="media-object" data-src="holder.js/64x64"  src="data:images/ch2.jpg">

                             </a>

                           </div>

                           <div class="media-body">

                             <h4 class="media-heading">Phasellus at Tellus

                             </h4>

                             <h5>Aenean vestibulum</h5>

                             <p>

                                 Donec ornare massa at velit fringilla, condimentum magna ornare tincidunt nulla dignissim.

                             </p>

                           </div>

                     </div>

                 </div>

             </div>

         </div>

     </div>

     <div class="footer">

         <div class="container">

             <div class="row">

                 <div class="col-sm-12 col-xs-12 col-md-5 copywrite">

                     <p>© 2015 All Rights Reseverd Design by <a href="http://w3layouts.com/">W3layouts</a> </p>

                 </div>

                 <div class="col-sm-12 col-xs-12 col-md-7 footer-main">

                      <ul class="footer-ul">

                          <li><a href="index.html">HOME</a></li>

                          <li><a href="index.html">ABOUT US</a></li>

                          <li><a href="index.html">GALLERY</a></li>

                          <li><a href="index.html">TRAINING</a></li>

                          <li><a href="index.html">NEWS &amp; EVENTS</a></li>

                          <li><a href="index.html">CONTACT</a></li>

                      </ul>

                 </div>

             </div>

         </div>

     </div>

     <script src="js/jquery.min.js"></script>

     <script src="js/bootstrap.min.js"></script>

     <!--[if lte IE 6]>

           <script type="text/javascript" src="js/bootstrap-ie.js"></script>

     <![endif]-->

   </body>

 </html>

index.css代码：

 body,html{font-family: 'Cabin', sans-serif;}

 ul,li{ padding:;margin:;}

 img{ max-width:100%; width:100%;}

 .clearfix:after{content: "";display: block;height:;clear: both;visibility: hidden;overflow: hidden;}

 .clearfix { *zoom:;}

 input{ margin:;padding:; background: none;border:none;}

 .mt-20{ margin-top:20px;}

 .mb-20{ margin-bottom:20px;}

 .mb-10{ margin-bottom:10px;}

 .cl-r{ padding-right:;;}

 .colr-red{color: #ed645c;}

 .container-fluid{ padding:;}

 .navbar-default{ background-color:#fff;border:none; margin-bottom:;font-family: 'Audiowide', cursive;}

 .navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{ background-color: #fff; color: #ed645c;transition: all .5s;-moz-transition: all .5s;-webkit-transition: all .5;    -o-transition: all .5s; }

 .navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{ color:#ed645c; font-weight:;font-family: 'Audiowide', cursive;}

 .navbar-brand{ font-size: 36px;}

 .carousel-inner>.item>a>img, .carousel-inner>.item>img {line-height:;width: 100%;background-color: #fff;}

 .search-for{  background-color: #ed645c; padding:18px 0; font-size:;}

 .form-search{ float:left; width:35%; font-size:;}

 .form-input{ width:70%;height:32px;font-size:14px;line-height:32px;padding:0 15px; background-color: #fff; vertical-align: top; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}

 .form-btn{ width:39px; height:32px; background: #fff url(../images/search1.png) no-repeat center center;vertical-align: top;border-top-right-radius: 5px; border-bottom-right-radius: 5px;}

 .share-main{ float:right;margin-top:5px;}

 .share-main a{ display: inline-block; width:22px; height:22px;margin-left:10px; background: url(../images/social.png) no-repeat 0 0;}

 a.shareIcon-1{ background-position:-8px -4px; }

 a.shareIcon-1:hover{ background-position:-8px -41px; }

 a.shareIcon-2{ background-position:-44px -5px; }

 a.shareIcon-2:hover{ background-position:-44px -38px; }

 a.shareIcon-3{ background-position:-85px -5px; }

 a.shareIcon-3:hover{ background-position:-85px -38px; }

 a.shareIcon-4{ background-position:-125px -5px; }

 a.shareIcon-4:hover{ background-position:-125px -38px; }

 a.shareIcon-5{ background-position:-168px -8px; }

 a.shareIcon-5:hover{ background-position:-168px -41px; }

 .carousel-captions{ position: absolute; width: 56%;padding:2em;left:;top:35%; background:rgba(0,0,0,0.5); text-align: center; color: #fff;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }

 .carousel-title{ font-size: 2em; overflow: hidden;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }

 .carousel-info{ font-size: 1.2em; line-height: 1.75em;margin:1em 2em; }

 .news-block{ padding:20px; color:#fff;}

 h3{font-family: 'Audiowide', cursive;}

 .bg-pink{ background-color: #ee987f;}

 .bg-bule{ background-color: #3277aa;}

 .bg-red{ background-color: #ed645c;}

 .bg-cyan{ background-color: #95bab4;}

 i.icon-1,i.icon-2,i.icon-3,i.icon-4{display: inline-block;width:54px;height:54px;margin-top:20px;}

 i.icon-1{  background: url(../images/cl.png) no-repeat 0px 0px;}

 i.icon-2{  background: url(../images/cl2.png) no-repeat 0px 0px;}

 i.icon-3{  background: url(../images/cl3.png) no-repeat 0px 0px;}

 i.icon-4{  background: url(../images/cl4.png) no-repeat 0px 0px;}

 .brief-info {}

 .brief-info h3{ font-size: 1.4em;line-height:20px;margin-top:15px;margin-bottom:10px; }

 .brief-info p{ color: #999; line-height: 1.5em; font-size: 14px;}

 .brief-info a{  display:inline-block;color: #000;margin-bottom:10px;}

 .brief-info a:hover{ text-decoration: none;}

 .bottom-list{}

 .bottom-list h3{ font-size: 1.85em;}

 .bottom-list ul{}

 .bottom-list li{ padding-left:17px;line-height: 40px; background: url(../images/marker.png) no-repeat 0 center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

 .bottom-list li a{ color: #999;}

 .bottom-list li a:hover{ color: #ed645c; text-decoration: none;}

 .bottom-list img{margin:0.625em 0;}

 .bottom-list p{color: #999;line-height: 1.5em;}

 .bottom-list-back{ padding:24px; background-color:#000;}

 .bottom-list-back h4{ color: #fff;}

 .bottom-list-back h5{ color: #de2e0b;}

 .bottom-list-back p{ color: #ccc;}

 .media-left{ width:20%;}

 .footer{ border-top:1px solid #000; padding:37px 0; font-size: 14px; }

 .footer p{ margin}

 .footer p a{color:#ed645c;}

 .footer-ul{ text-align: right;}

 .footer-ul li{ display: inline-block; padding:0 10px; text-align: center;}

 .footer-ul a{ color: #000;transition: all .5s;-moz-transition: all .5s;-webkit-transition: all .5;    -o-transition: all .5s;}

 .footer-ul a:hover{ color: #ed645c; text-decoration: none;}

 @media ( max-width: 970px ){

     .carousel-title{ font-size: 0.8em;}

     .carousel-info{ font-size: 0.5em; }

     .copywrite{ text-align: center;font-size: 0.8em;}

     .footer-ul{ text-align: center; font-size: 0.6em;}

     .carousel-captions{ width:90%;}

     .carousel-captions{ top:20%;}

 }

 @media ( max-width: 768px ){

     .carousel-captions{ padding:0.3em;}

     .carousel-title{ font-size: 1.5em;}

     .carousel-info{ font-size: 0.3em; }

     .cl-r{ padding-right:15px;}

 }

 @media ( max-width: 480px ){

     .carousel-info{ height: 6em; overflow: hidden;}

 }

 @media ( max-width: 320px ){

     .form-search{width: 100%;text-align: center;}

     .form-search{ float:none;}

     .share-main{ float:none; text-align: center;}

     .news-block h3{ font-size: 20px; margin:10px 0;}

     .footer-ul li{margin-bottom:5px;}

     .carousel-captions{ top:10%;}

     .carousel-info{ margin:10px; height:40px; overflow: hidden; font-size: 12px;}

     i.icon-1,i.icon-2,i.icon-3,i.icon-4{display: inline-block;width:24px;height:24px;margin-top:10px;  }

     i.icon-1{  background: url(../images/cl.png) no-repeat 0px 0px;background-size:100%;}

     i.icon-2{  background: url(../images/cl2.png) no-repeat 0px 0px;background-size:100%;}

     i.icon-3{  background: url(../images/cl3.png) no-repeat 0px 0px;background-size:100%;}

     i.icon-4{  background: url(../images/cl4.png) no-repeat 0px 0px;background-size:100%;}

 }

后记：

bootstrap的架构(出自《深入理解Bootstrap》);

其实是用less预编译 现在也有sass版本,bootstrap的less源码也不难只不过过于琐碎和众多的变量;

响应式主要依靠 @media ( max-width: 970px ){} 去从写 宽大大小,但本身@media不兼容 虽然bootstrap出了兼容插件bsie插件但本人做demo的时候测试也没有起作用。。。。

响应式bootstrap - demo的更多相关文章

  1. 50个令人惊奇的jQuery插件（对话框和表单篇）及免费的响应式bootstrap管理员后台界面主题 - Charisma

    http://www.woiweb.net/50-amazing-jquery-plugins.html 多文件文件下载 免费的响应式bootstrap管理员后台界面主题 – Charisma htt ...

  2. Java程序员的日常 —— 响应式导航Demo

    这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果 代码 <!DOCTYPE html> <html> &l ...

  3. 响应式布局 —— Demo

    响应式布局实例演示What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这 ...

  4. 实现响应式——Bootstrap的删格系统详解

    Bootstrap 今天和大家一起学习如今很流行的前端框架之一,Bootstrap框架. 前言 今天带大家看看Bootstrap框架,其实我呢主要还是用里面的删格系统,单单这个删格系统就比较强大了.其 ...

  5. 简单响应式Bootstrap框架中文官网页面模板

    链接:http://pan.baidu.com/s/1o7MQ6RC 密码:kee5

  6. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  7. 带你玩转JavaWeb开发之五-如何完成响应式开发页面

    响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...

  8. 响应式设计的5个CSS实用技巧

    正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...

  9. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

随机推荐

  1. 转 HttpClient 设置连接超时时间

    要: HttpClient 4.5版本升级后,设置超时时间的API又有新的变化,请大家关注. HttpClient升级到4.5版本后,API有很多变化,HttpClient 4之后,API一直没有太稳 ...

  2. python对 if __name__=='__main__'的理解

    对于学过其他编程语言的人来说都知道程序都是从main函数开始执行的,而对于python来说他并没有主函数,他不像其他语言需要需要转化为二进制文件 然后才能执行,他时通过翻译器从第一行开始逐行执行,所以 ...

  3. oracle：TNS:监听程序无法分发客户机连接

    挂上vpn的时候,PL/SQL连接到oracle的时候,显示ORA-12518:监听程序无法分发客户机连接.如下图: 一.[问题描述] 最近,在系统高峰期的时候,会提示如上的错误,致使无法连接到服务器 ...

  4. Windows 与Office 镜像的区别

    .SW开头是批量授权的版本. .CN开头是简体中文版镜像文件 零售版本. 其实建议使用 SW开头的镜像 可以直接使用KMS进行激活了. 转帖一个百度知道的内容: 看安装包的名称 cn开头的是零售版的, ...

  5. 解决多线程安全问题-无非两个方法synchronized和lock 具体原理(百度-美团)

    还有其他的锁,如果想要了解,参考:JAVA锁机制-可重入锁,可中断锁,公平锁,读写锁,自旋锁, 用synchronized实现ReentrantLock 美团面试题参考:使用synchronized ...

  6. EasyTouch5ForSiki学院

    总结: 这里面的一些功能,就可以拿来做移动或者PC的很多功能了,这是一个很有用的插件. 禁用0618错误 EasyTouch4_x的写法: using HedgehogTeam.EasyTouch; ...

  7. 和CISSP并肩的信息安全认证国际注册信息安全经理CISM

    众所周知,信息安全认证界有一个扛把子的证书叫CISSP(国际信息安全专家认证),一般拥有CISSP证书的小哥哥还会选择考取另一个认证,这就是今天给大家介绍的CISM(国际注册信息安全经理).CISM是 ...

  8. mysql 重启,修改编码utf8mb4，并修改数据库链接，生效

    1.启动:/etc/init.d/mysql start 2.停止:/etc/init.d/mysql stop 3.重启:/etc/init.d/mysql restart SHOW VARIABL ...

  9. 安装python caffe过程中遇到的一些问题以及对应的解决方案

    关于系统环境: Ubuntu 16.04 LTS cuda 8.0 cudnn 6.5 Anaconda3 编译pycaffe之前需要配置文件Makefile.config ## Refer to h ...

  10. kafka 基础知识梳理及集群环境部署记录

    一.kafka基础介绍 Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特 ...