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”列表项中。

预示内容以及侧边栏

咱早就就了站点的主导航,现在我们需要添加主要内容区和一个侧边栏来支撑再次多之链接或者导航路径。请将下面的代码添加到导航漫长后。

<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

侧边栏导航

而可于这里观有的Twitter
bootstrap为我们提供的导航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的家了。

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

假定您闹其它的问题或者反馈,请以脚的评论区留下您的信息,感谢你的开卷。

翻译手语:一切翻译依照原文线路开展,并以翻译过程略加了个人对技术之知道。如果翻译出不规则的处在,还烦请同行朋友指点。谢谢!

至于白牙

目前就读于华南师范大学,现居广州。2013年初步上CSS3,HTML5等前沿技术。请关注本身:新浪微博。

如需转载烦请注明出处:

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

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

相关文章