20分钟打造而的Bootstrap站点

   
 随着电脑以及网络的推广,上网冲浪日渐成为了一般性电脑用户日常生活的均等有些,特别是在大中城市更是如此。目前于本国最广泛的上网方式是电信提供的ADSL接抱,所以“宽带”成为了中国网民最新颖的话题。
  但近年来一段时间,不少底地方的网民反映在ADSL上网时撞了特别现象。比如深圳之网民在上网时,网页自动跳出了电信通知。大致内容如下:“根据《互联网保护条例》和公安部有关文书确定,未以系机关申请互联网经营许可登记之知心人性用户,不得以共享技术下挂多华微机上网并通往人家提供互联网接入服务。经我局核查,贵用户使用的ADSL采用1+N艺下挂4高以上电脑共享上网……”
  “为保网络质量稳定性、维护中华电信用户的合法权益,请您接到通报后再行开展作业注册,并论相关规定套入相应的费用类。逾期未来干的,中国电信拿无保证其上网质量并保留依法追究相关法规义务的权利……”
  接到这种通知的网友大多是,几只人同时以采取一个ADSL帐号上网。在深圳电信主页并未见到有关说明;在由深圳10000对讲机问后,工作人员说明,不提倡家庭用户装局域网,如果产生必不可少的话,不克超越3大。看来中国电信深圳者初步严格控制个人用户共享上网,并为这个找到了相应的考查手段。

 

特别声明:本条首文章由白牙根据Leon
Revill的英文文章原名《Twitter
Bootstrap Tutorial – Up and running with Twitter Bootstrap in 20
Minutes》进行翻译,整个译文带有我们和好的亮和沉思,如果翻译得不好要未针对的远在还呼吁同行朋友指点。如需转载者译文,需注明英文出处:http://www.revillwebdesign.com/twitter-bootstrap-tutorial跟作者系信息

——作者:Leon Revill

——译者:白牙

  接到通报之用户感到奇怪的是,自己和他人一起共享上网怎么会受ISP发现了也?原本健康缴费上网的用户,在同团结亲朋好友组建局域网络共用路后,突然接到了网络服务商发来之打招呼,他们发了意想不到和不充满。一时间相关的讨论在诸多论坛热烈展开。
  而以中国电信为表示的网络服务商态度相当坚决。一长达宽带线路单允许同一台电脑上网;原来没有强调规定之地域,也起为新增用户提出了要求。光有纸面上之确定是不够的,如何准确监控网用户成为了最主要。据了解,网络接入服务商大多开以名也NetSniper的大网设施,其中文名称是“网络尖兵”。
 对于普通用户来说,这是一个于陌生的名字。“网络尖兵”究竟是何方神圣,他又是何许也网络服务商“看守”线路也?我们开了相应的调查。
     网络尖兵,何方神圣
 其实NetSniper网络尖兵并无暧昧。他是一样效由上海之一网络体系公司以反复年前开始生产的一致效仿维护管理网。
 网络尖兵整体分为三组成部分:网络尖兵控制器、网络部署管理器和日志管理器。
</P>
  其中硬件配备—网络尖兵控制器已经提高吧I和II两栽型号。I适用于检测和决定私拉专线;II适用于检测与控制共享上网与盗用MAC地址上网。

即首教程旨在给你以20分钟内学会以twitter
bootstrap创建一个站点。看罢这个科目后您该能运用bootstrap来树一个中心的响应式布局的页面,了解栅格系统,并且能以bootstrap导航、导航条和询问响应式设计的基本功。这些全部都是使用twitter
bootstrap所用有所的学问。

   
网络尖兵基于TCP/IP环境,它好自动检测出网络中未经同意架设的代理服务器或路由器,阻止盗用别人MAC地址之所作所为,并针对性这些代理服务器的IP包以及流向此类路由器的IP包进行活动拦截。
  最终得以有效避免用户逃费或地下运营的景象,网络服务商将拥有一个可管理之宽带网络。正是因这,所以到处的网络服务商开始陆续启用了网络尖兵。
  监控原理,尚未公开
 深得服务商青睐的大网尖兵到底是由此什么措施监视用户为?共享上网又是何许让发现的也?网络及开展了针对网尖兵的讨论。
  因为涉及到商业利益,所以设备供应商与网络服务商都没有明白网尖兵的劳作规律。普通网民能了解及之音信还来于地下的互联网。
  ADSL共享上网一般是经过路由NAT方式,经过路由转换后拜外网的内网计算机的IP地址都改成了192.168.0.1,而且MAC地址为转移成为了ADSL
Modem的MAC地址。直接当ADSL出口检查NAT转换后的数据包是老大为难圆监督之。

在线查看DEMO

  网络尖兵通过类似superscan之类的工具软件对ADSL猫进行扫描,发现开在161端口的PC数量。因为161端口是SNMP(简单网络管理协议)的劳动端口,当其数额多于网络服务商设定数判定为共享。
  还有人口以为网络尖兵在行使了未知的道从共享的处理器中探测到共享的信,当判断也共享上网也会报警。在发现黑用户时时,NetSniper可以有特定的控制包,使伪用户处于“离线”状态。
<
  网络突发,攻防大战
  虽然针对其工作规律是过多说纷纭,但网友针对纱尖兵大多手持抗拒态度,虽然厂商宣称,作为同样种植检测设备,网络尖兵以多少接收为主,不发送数据,所以本着拉动富占用量几乎为零星。但还是时有发生那么些人口于网上不久着批评网络尖兵的坏处。
  罪状一:
  最可怜的罪状自然是限量了网络自由,不能够于用户和他人共享上网。如果您久久与亲朋、邻居合组网共用ADSL线路,会被网络服务商发现并告诫。
  罪状二:
  其不鸣金收兵扫描用户打开的端口数,多于设定值的即判断是共享,有时连以几不良F5键它是看是共享,连单用户上网也遭到了震慑。
 罪状三:
 其无歇扫描影响网速,造成浏览网页时要刷新几涂鸦;但一些网页比较复杂,要调用几单服务器文件时她吗当您是共享,部分页面不克正常显示。
  既然已经成了网民的眼中钉,网络上本少不了人要研究如何打败网络尖兵,冲破封锁。

率先我们要说的凡twitter
bootstrap是颇优异的一个前端开源框架,它吗富有的组键都提供了详实的用例,让您能随意地经过复制黏贴而增大到您的宏图着。查阅官方文档可以点击这里。

 破解一:
  将拥有共享的客户机均要装防火墙,把平安之级别设为最高。把IP配置规则内有的同意他人看本机规则全取消。如果使用WinXP,也可以直接打开网卡设置中之防火墙。
  破解二:
  以ADSL
Moden中关闭SNMP协议;如果无法修改这种协议,只好换一个力所能及转设置的猫。

 

倘若你对英文来恐惧感,你得点击这里读中文版本。

——大漠

  破解三:
        
共享上网被之主机安装WIN2000服务器版,然后禁掉161端口或在防火墙上禁掉161底端口。    
  方法还有不少,在网上还有为数不少底网友以后续火爆议论这个题材。道大一尺,魔高一步,可以说一样街对网络尖兵的网上攻防战已经悄然进行。
  

基本的HTML模板

咱用坐一个主干的HTML模板,这样咱们能够把所待的bootstrap文件包含进来。下面就是咱们twitter
bootstrap项目之开端,复制这些代码到一个文件被并拿该取名为index.html。

<!DOCTYPE html>
  <head>
    <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
    <style type='text/css'>
      body {
        background-color: #CCC;
      }
    </style>
  </head>
  <body>

  </body>
</html> 

立刻段代码中我们曾经补给加了一些CSS使页面的背景上亮灰色,因为这样我们能够随意地在咱们的规划被扣见不同的排列,使其更是便于懂。

          矛盾重重,履霜坚冰
     
网络尖兵对服务商来说是情有独钟职守了,但当网民看来也看似成了心头上之“坚冰”。
    
有网民认为网络服务商则规定用户不得使用ADSL线路向第三正提供过渡服务。但随着家庭宽带的普及,所谓的“第三方”概念都转移得模糊不干净了。难道一下遭到尚未可知具备两光以上的上网电脑?同时通过路由共享ADSL便成为违规?

引入twitter bootstrap文件

以以twitter
bootstrap我们无非要把一个文书引入到我们的沙盘当中来,引入文件来坏多种方法,如果你想打听这些艺术要查阅有关文档。

因本课程的视角,我们将见面由此CDN来引入bootstrap-combined.min.css文件要休需下载任何的文书。

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">   

其会如有的twitter bootstrap CSS在咱们的沙盘被生效。

  还有用户称,ADSL带富都是同一,用了行程由于为还是原本的进度,为什么而禁止共享为?自己买之服务,难道还非克充分利用吗?
而网络服务商的态势也特别坚定。他们表示,如果无对准上网用户做必要之监控制,不仅会并发“共享上网”问题,而且还见面产出“私拉专线”、“盗用MAC地址”等情景。

Twitter Bootstrap的容器

bootstrap的container类是非常实惠的,它亦可以页面中创造一个居中的区域,然后我们能将其余位置的情节放到里面。container类等价于创建了一个备静态宽度并且magin值为auto的一个居中的div框。twitter
bootstrap的
container类的长在于它是响应式的,它会以当下屏幕的涨幅为根基测算出顶尖的升幅与实用。

当body标签中,使用container类创建一个div。它见面作页面主要的放任何代码的外层包裹。

如您调整之DIV的万丈并以其背景颜色设置为白,你所看到底作用会是这样:

图片 1

用户一旦应用这些手法上网,在本质上是避让了网络付费,侵犯了服务商利益,造成后者业务收入流失,无法即时回收投资。
实际题材并无略,个人帐号共享上网失控,最要紧的或许是出现非法网吧、私人网络出租屋的违规经形式。而及时多亏政府关于机关明令禁止的。可以说服务商强硬的情态获得了政府肯定的支持。

题和导航

现我们既产生一个地方得填补加额外的HTML代码,我们得补充加标题文本然后再创站点的显要导航条。

在如下的文书或者您挑选的字及container类的div标签中。

<h1>TWITTER BOOTSTRAP TUTORIAL</h1>    

现今连不曾小新的东西,这无非是一个题目,让咱换到再次有意思的面,twitter
bootstrap导航。

Bootstrap
有一个nav类让咱能创造各种各样的导航元素,你可当h1标签后进入如下的代码。

<div class='navbar navbar-inverse'>
  <div class='nav-collapse' style="height: auto;">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page One</a></li>
      <li><a href="#">Page Two</a></li>
    </ul>
  </div>
</div>  

navbar相关的切近有导航长达有的体制,添加navbar-inverse类将会晤采取一个十分怪的黑色风格,这是一个twitter
bootstrap的广阔搭配。我提议在此样式的根底及开展进行从而创造而的独步之导航。但每当是科目被我们还会以基础之bootstrap样式。

当类为navbar的DIV当中,我们抬高其它一个类为nav-collapse的DIV并也夫补偿加行内样式height:auto;这是告诉bootstrap当这个页面在低于970px宽度之浏览器窗口中时,它见面提供一个减小的切换视图。

要您保存了index.html文件然后以浏览器被开辟,当你调整浏览器窗口的宽时您不怕能看到此变化,如图所示。

大于979px

图片 2

小于979px

图片 3

另外,我们可以添加nav类到一个HTML无序列表元素中以便从bootstrap
CSS文件被利用还多的体,也得以添加一个active类到“HOME”列表项中。

 我们注意到,网络尖兵越来越多地以中原所在出现,不仅在深圳这样,在山东淄博、湖北仙桃、河北东方大学城、江西、新疆、青海西宁、广西梧州顶地电信部门吧采用了行走。
 由此可见南方的中国电信、北方之网通都以着手。目前虽说包括北京在内的有些区域尚并未遭遇震慑,但依照现有的发展趋势,未来恐有所地方的ADSL用户都将直面无情之网尖兵。家庭共享上网或将改为历史。
 私人ADSL只允许同一人独自享,你可知领吗?

预告内容以及侧边栏

咱已经形成了站点的主导航,现在咱们得加上主要内容区和一个侧边栏来支持更多之链接或者导航路径。请将脚的代码添加到导航条后。

<div id='content' class='row-fluid'>
  <div class='span9 main'>
    <h2>Main Content Section</h2>
  </div>
  <div class='span3 sidebar'>
    <h2>Sidebar</h2>
  </div>
</div>  

当即多亏我们需要弄懂的bootstrap的栅格系统,当然,bootstrap的法定文档中涵盖了双重多之底细,但咱以见面坐基础开始,让你又好地懂得它们。

栅格系统采用了12列的布局,这意味一个页面可以于分成12只一样的排列。下面就张由bootstrap官方文档中拿到之图片被出了一个要命好之显得。

图片 4

以咱们正黏贴在导航条下面的代码中你可以看名叫也span9和span3的近乎。它们会把页面分割成左边9列宽度与右边3排列宽度之简单有些,形成我们的情区域与侧边栏。使用栅格系统的内一个利就是是它见面依据视窗宽度动态计算出列的增长率,因此而免欲写任何的媒体询问也克使您的站点工作于其他的屏幕分辨率下。

你可以经反span的数码以及调整浏览器的高低来观察她的职能。你见面注意到当内容区小于724px之时,这些列会垂直地堆。

今昔我们在预告内容区域将下列文件或者其它其他的文本放在在h2标签后,这单是以把页面拉长一点。

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 

<p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  

现今站点会像如下显示:

图片 5

侧边栏导航

汝可以当这里相所有的Twitter
bootstrap为咱提供的领航元素。

咱们将采用垂直选项卡来创建一个附加的导航区。复制与黏贴下面的代码到sidebar的h2标签后。

<ul class="nav nav-tabs nav-stacked">
  <li><a href='#'>Another Link 1</a></li>
  <li><a href='#'>Another Link 2</a></li>
  <li><a href='#'>Another Link 3</a></li>
</ul>   

当即是一个简短的展示!上面的代码照字面理解仅仅是一个享有类为nav-tabs和nav-stacked的无序列表,但她也也咱创建了一个导航面板。

省最后之效果,一个根据twitter bootstrap的响应式设计的页面就了。

图片 6

结论

经过twitter
bootstrap所提供的性状,我们为有了此非常快的bootstrap基础教程,但花点时间练习并多查阅官方的文档,不久过后您不怕可以成为一个bootstrap的学者了。

当看本课程之后你当了解什么使用栅格系统,不同种类的导航以及响应式设计之基本原理。

苟您生外的题材还是反馈,请于底下的评论区留下您的音,感谢您的阅读。

翻译手语:全部翻译依照原文线路开展,并以翻译过程略加了民用对技术的喻。如果翻译出尴尬的远在,还烦请同行朋友指点。谢谢!

有关白牙

时就读于华南师范大学,现居广州。2013年开学CSS3,HTML5等前沿技术。请关注我:初浪微博。

如需转载烦请注明出处:

英文原稿:http://www.revillwebdesign.com/twitter-bootstrap-tutorial

汉语译文:http://www.w3cplus.com/css/twitter-bootstrap-tutorial.html