车站分别(NOIP二零一一5588葡京线路 普及组第四题)

 

特意评释:此篇小说由白牙根据Leon
Revill
的英文小说原名《Twitter
Bootstrap Tutorial – Up and running with Twitter Bootstrap in 20
Minutes
》举办翻译,整个译文带有大家和好的知道与思考,借使译得不得了或不对之处还请同行朋友指引。如需转发此译文,需评释英文出处:http://www.revillwebdesign.com/twitter-bootstrap-tutorial以及小编相关音信

——作者:Leon Revill

——译者:白牙

描述

一条单向的铁路线上,依次有号码为 1, 2, …, n 的 n
个高铁站。每一种高铁站都有一个级别,最低为 1
级。现有若干趟车的班次在那条线路上行驶,每次都满足如下须要:假使那趟车次停靠了动车站
x,则始发站、终点站之间有着级别大于等于高铁站 x 的都必须停靠。
(注意:起头站和终点站自然也真是事先已知要求停靠的站点)
譬如,下表是 5 趟车的班次的周转意况。其中,前 4 趟车次均满足须求,而第 5
趟车的车次由于停靠了 3 号轻轨站(2 级)却未停靠途经的 6 号火车站(亦为 2
级)而不满意要求。
5588葡京线路 1
幸存 m 趟车的车的班次的运作处境(全体满意要求),试推算那 n
个高铁站至少分为多少个例外的级别。

那篇教程旨在让你在20分钟内学会运用twitter
bootstrap创设一个站点。看完那些课程后你应该可以运用bootstrap来树立3个主导的响应式布局的页面,驾驭栅格系统,并且能够使用bootstrap导航、导航条和询问响应式设计的根底。这一个全体都以使用twitter
bootstrap所急需持有的学识。

格式

在线查看DEMO

输入格式

先是行包罗 2 个正整数 n, m,用2个空格隔开。
第 i + 1 行(1 ≤ i ≤ m)中,首先是三个正整数 s i (2 ≤ s i ≤ n),表示第 i
趟车的班次有 s i 个停靠站;接下去有 s i
个正整数,表示所有停靠站的编号,从小到大排列。每多个数里面用二个空格隔开。输入保险所有的车次都满意须要。

第一大家须求说的是twitter
bootstrap是可怜不错的多少个前端开源框架,它为拥有的组键都提供了详实的用例,让你可见随意地通过复制黏贴而增大到你的安排性中。查阅官方文档可以点击这里

出口格式

出口只有一行,包蕴三个正整数,即 n 个火车站最少划分的级别数。

 

借使你对英文有恐惧感,你可以点击这里阅读普通话版本。

——大漠

样例1

基本的HTML模板

大家需求以一个基本的HTML模板,那样我们可以把所急需的bootstrap文件包蕴进来。上边就是大家twitter
bootstrap项目的始发,复制这一个代码到1个文件中并将其命名为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使页面的背景呈亮藏蓝色,因为那样大家能够自由地在我们的规划中看见不一致的列,使它越是便于了然。

样例输入1

9 2
4 1 3 5 6
3 3 5 6

引入twitter bootstrap文件

为了利用twitter
bootstrap大家只有需要把3个文本引入到大家的模板当中来,引入文件有很三种办法,若是您想询问这么些措施请查阅相关文档。

据悉本课程的落脚点,我们将会通过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在大家的沙盘中生效。

样例输出1

2

Twitter Bootstrap的容器

bootstrap的container类是分外实惠的,它能在页面中创制1个居中的区域,然后大家可以把其他职位的情节放到里面。container类等价于创立了3个具备静态宽度并且magin值为auto的贰个居中的div框。twitter
bootstrap的
container类的优点在于它是响应式的,它会以近期显示屏的涨幅为底蕴测算出超级的升幅予以实用。

在body标签中,使用container类创建多个div。它会作为页面主要的放置任何代码的外层包裹。

假定你调整那些DIV的可观并将其背景颜色设置为粉色,你所见到的职能会是那样:

5588葡京线路 2

样例2

标题和导航

以后大家曾经有一个地方可以添加额外的HTML代码,大家可以添加标题文本然后再创立站点的基本点导航条。

进入如下的文本或许你挑选的文字到container类的div标签当中。

<h1>TWITTER BOOTSTRAP TUTORIAL</h1>    

今昔并没有稍微新的事物,那只有是1个标题,让我们转移到更好玩的地点,twitter
bootstrap导航。

Bootstrap
有1个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宽度的浏览器窗口当中时,它会提供2个回落的切换视图。

假若你保存了index.html文件然后在浏览器中打开,当您调整浏览器窗口的幅度时你就可以见到这么些转变,如图所示。

大于979px

5588葡京线路 3

小于979px

5588葡京线路 4

其余,我们可以添加nav类到三个HTML无连串表成分中以便从bootstrap
CSS文件中动用更加多的体裁,也可以增加三个active类到“HOME”列表项中。

样例输入2

9 3
4 1 3 5 6
3 3 5 6
3 1 5 9

主内容和侧面栏

大家早已成功了站点的主导航,未来大家要求丰硕紧要内容区和二个侧面栏来支撑更加多的链接或导航路径。请把上边的代码添加到导航条之后。

<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列的布局,那意味着3个页面可以被分开成10个相同的列。上边那张从bootstrap官方文档中拿到的图样给出了二个很好的来得。

5588葡京线路 5

在我们刚刚黏贴在导航条下边的代码中你可以看到名为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>  

今昔站点会像如下展现:

5588葡京线路 6

样例输出2

3

侧面栏导航

你可以在这里观看有着的推特(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的无体系表,但它却为大家创制了1个导航面板。

看望最终的效果,3个依照twitter bootstrap的响应式设计的页面完毕了。

5588葡京线路 7

限制

各种测试点1s。

结论

因而twitter
bootstrap所提供的表征,大家提交了那么些至极迅猛的bootstrap基础教程,但花点时间陶冶并多多查阅官方的文档,不久随后你就可以变成多个bootstrap的咱们了。

在翻阅本学科之后你应该通晓怎样运用栅格系统,不一样种类的领航和响应式设计的基本原理。

如若您有任何的标题如故反馈,请在上边的评论区留下你的新闻,感激您的读书。

翻译手语:成套翻译按照原文线路举行,并在翻译进度略加了民用对技术的知道。假使翻译有窘迫之处,还烦请同行朋友指导。多谢!

有关白牙

眼前就读于华南金融学院,现居斯德哥尔摩。2011年启幕上学CSS3,HTML5等前沿技术。请关切自己:腾讯网腾讯网

如需转发烦请注解出处:

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

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

提示

对于 20%的数据,1 ≤ n, m ≤ 10;
对于 50%的数据,1 ≤ n, m ≤ 100;
对于 100%的数据,1 ≤ n, m ≤ 1000