来源:http://www.w3cplus.com/css/twitter-bootstrap-tutorial.html

特别声明:此篇文章由白牙根据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的高度并将其背景颜色设置为白色,你所看到的效果会是这样:

标题和导航

现在我们已经有一个地方可以添加额外的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

小于979px

另外,我们可以添加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官方文档中拿到的图片给出了一个很好的展示。

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

现在站点会像如下显示:

侧边栏导航

你可以在这里看到所有的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的响应式设计的页面完成了。

结论

通过twitter bootstrap所提供的特性,我们给出了这个非常快速的bootstrap基础教程,但花点时间练习并多多查阅官方的文档,不久之后你就可以成为一个bootstrap的专家了。

在阅读本教程之后你应该懂得如何使用栅格系统,不同类型的导航和响应式设计的基本原理。

如果你有任何的问题或者反馈,请在下面的评论区留下你的信息,感谢你的阅读。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

关于白牙

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

如需转载烦请注明出处:

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

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

20分钟打造你的Bootstrap站点的更多相关文章

  1. Android:刚6瓶啤酒4两56度白酒下肚,竟然20分钟做了一手机版站点 !

    刚6瓶啤酒4两56度白酒下肚,竟然20分钟不到时间做了一手机版站点 !人有多大潜力你知道吗? 大家有兴趣的能够用手机或微信打开 http://xh.yunxunmi.com/  看看俺这酒后之做! 很 ...

  2. 20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用 ...

  3. Hawk: 20分钟无编程抓取大众点评17万数据

    1. 主角出场:Hawk介绍 Hawk是沙漠之鹰开发的一款数据抓取和清洗工具,目前已经在Github开源.详细介绍可参考:http://www.cnblogs.com/buptzym/p/545419 ...

  4. 在线教程的游戏化-20分钟做了个demo

    首先,不准说做得撇,因为其一,我只用了20分钟不到:其二,第一次尝试,以前想过,但是一直没有搞过,二话不说,先来截图,下载地址在最下面. 因为第一次尝试,所以很多事件自己还没有闹明白,不过基本上还是看 ...

  5. 【转载】20分钟MySQL基础入门

    原文:20分钟MySQL基础入门 这里持续更新修正 开始使用 MySQL 为关系型数据库(Relational Database Management System),一个关系型数据库由一个或数个表格 ...

  6. 20个经典bootsrtap后台html站点模板推荐

    今天为大家推荐20款不同风格的Bootstrap后台管理模板,每一款都经典可用,能预览和下载,保证让你挑得眼花缭乱. 1,Simpli flag蓝色 Simpli Flat蓝色管理模板是一款採用Fla ...

  7. 无语的index hint:手工分配哈希区,5小时不出结果,优化后20分钟

    同事说,有个语句5个小时不出结果,叫我帮忙看看,于是叫同事发过来.不看不知道,一看吓一跳,3个表关联,强制使用了2个index hint,当中一个表9g,一个表67g,另一个小表40Mb.开发者,总以 ...

  8. 20款最好的免费 Bootstrap 后台管理和前端模板

    Admin Bootstrap Templates Free Download 1. SB Admin 2 Preview | Details & Download 2. Admin Lite ...

  9. 关于.net服务启动注册到zookeeper,但是注册节点20分钟自动消失解决办法

        ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,作用简单描述就是相当于一个中介,服务提供者将服务注册到zk,服务调用者直接从zk获取,zk的作用就是协调     最近碰到公 ...

随机推荐

  1. vmware 安装ubuntu

    点击自定义硬件 即将完毕 下面就是安装啦

  2. 【Docker】性能测试监控平台搭建:InfluxDB+Grafana+Jmeter+cAdvisor

    前言 在做性能测试时,如果有一个性能测试结果实时展示的页面,可以极大的提高我们对系统性能表现的掌握程度,进而提高我们的测试效率.但是我们每次打开Jmeter都会有几个硕大的字提示别用GUI模式进行负载 ...

  3. Android scrollview和GridView混合使用

    在开发中用到了需要ScrollView嵌套GridView的情况,由于这两款控件都自带滚动条,当他们碰到一起的时候便会出问题,即GridView会显示不全.解决办法,自定义一个GridView控件 p ...

  4. 雷林鹏分享:C# 正则表达式

    C# 正则表达式 正则表达式 是一种匹配输入文本的模式..Net 框架提供了允许这种匹配的正则表达式引擎.模式由一个或多个字符.运算符和结构组成. 定义正则表达式 下面列出了用于定义正则表达式的各种类 ...

  5. Confluence 6 使用 LDAP 授权连接一个内部目录 - 拷贝用户到登录

    在登录时拷贝用户(Copy User on Login) 这个选项在用户尝试登录的时候将会被触发.如果这个选择框被选择的话,当用户使用 LDAP 授权的用户名和密码登录系统的时候,用户将会在内部目录自 ...

  6. robot framework学习笔记1之_环境安装(win7)

    一.简介 Robotframework是基于Python的自动化测试框架.使用关键字驱动的测试方法,自带丰富的库函数可直接引用,可使用Java/Python进行功能库扩展,测试用例使用TSV/HTML ...

  7. ccfZ字形扫描

    问题描述 在图像编码的算法中,需要将一个给定的方形矩阵进行Z字形扫描(Zigzag Scan).给定一个n×n的矩阵,Z字形扫描的过程如下图所示: 对于下面的4×4的矩阵, 1 5 3 9 3 7 5 ...

  8. dp练习(9)——最大乘积

    1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Desc ...

  9. 阿里云ECS服务器自定义端口无法访问问题记录

    记住阿里云ECS服务器有个安全组!!! 购买了阿里云服务器的时候,购买界面那里是可以勾选默认的几个端口是否开启的,服务器默认勾了22端口,使用户能登录服务器. 当我们在服务器里面配置nginx,开启自 ...

  10. PHP中输出本地时间

    <?php header("Content-Type:text/html;charset=utf-8"); // 输出日 echo date("l") . ...