20分钟创设你的Bootstrap站点

 

专程申明:此篇作品由白牙根据Leon
Revill
的英文小说原名《Twitter
Bootstrap Tutorial – Up and running with Twitter Bootstrap in 20
Minutes
》进行翻译,整个译文带有我们团结的明亮与思考,倘若译得不佳或不对之处还请同行朋友指引。如需转发此译文,需注脚英文出处:http://www.revillwebdesign.com/twitter-bootstrap-tutorial以及作者相关音信

——作者:Leon Revill

——译者:白牙

那篇教程意在让你在20分钟内学会运用twitter
bootstrap创设一个站点。看完那么些科目后您应有力所能及采用bootstrap来建立一个要旨的响应式布局的页面,领悟栅格系统,并且可以运用bootstrap导航、导航条和精通响应式设计的底子。那些全部都是使用twitter
bootstrap所急需有所的学问。

在线查看DEMO

第一大家需求说的是twitter
bootstrap是非常精美的一个前端开源框架,它为保有的组键都提供了详细的用例,让你可见自由地经过复制黏贴而增大到你的布署性中。查阅官方文档可以点击这里

 

一经您对英文有恐惧感,你可以点击这里读书普通话版本。

——大漠

基本的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使页面的背景呈亮蓝色,因为这么咱们可以自由地在大家的宏图中看见分裂的列,使它越是便于了然。

引入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在大家的模版中生效。

Twitter Bootstrap的容器

bootstrap的container类是不行实惠的,它能在页面中成立一个居中的区域,然后我们可以把其余职位的内容放到里面。container类等价于创造了一个所有静态宽度并且magin值为auto的一个居中的div框。twitter
bootstrap的
container类的亮点在于它是响应式的,它会以近年来屏幕的大幅度为底蕴测算出一级的增幅予以实用。

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

借使您调整那些DIV的可观并将其背景颜色设置为白色,你所看到的效用会是这么:

Bootstrap 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

Bootstrap 2

小于979px

Bootstrap 3

除此以外,大家得以添加nav类到一个HTML无体系表元素中以便从bootstrap
CSS文件中动用更加多的体制,也足以添加一个active类到“HOME”列表项中。

Bootstrap,主内容和侧面栏

我们曾经做到了站点的主导航,现在大家要求丰盛主要内容区和一个侧面栏来支撑越来越多的链接或导航路径。请把下边的代码添加到导航条之后。

<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官方文档中得到的图形给出了一个很好的显得。

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>  

前几日站点会像如下展现:

Bootstrap 5

侧面栏导航

您可以在这里探望有着的推特(TWTR.US)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的响应式设计的页面落成了。

Bootstrap 6

结论

通过twitter
bootstrap所提供的特点,大家付出了这些那多少个高效的bootstrap基础教程,但花点时间磨炼并多多查阅官方的文档,不久过后你就可以成为一个bootstrap的学者了。

在读书本学科之后你应当了解怎么利用栅格系统,分裂品类的领航和响应式设计的基本原理。

若是您有其余的题材或者反馈,请在上边的评论区留下你的信息,感谢您的翻阅。

翻译手语:全副翻译根据原文线路举办,并在翻译进程略加了个体对技术的领会。即便翻译有畸形之处,还烦请同行朋友引导。谢谢!

关于白牙

当前就读于华南工业学院,现居巴塞罗那。二零一三年初阶学习CSS3,HTML5等前沿技术。请关切自身:今日头条虎扑

如需转载烦请注解出处:

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

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

相关文章