首页 > 网页教程 > CSS > 教你用20分钟建立自己的Bootstrap站点

教你用20分钟建立自己的Bootstrap站点

时间:2015-04-17    来源:w3cplus

Bootstrap3.0学习 Bootstrap教程 如何建立自己的网站

这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootstrap所需要具备的知识。

首先需要说的是twitter bootstrap是非常优秀的一个前端开源框架,它为所有的组键都提供了详细的用例,让你能够轻易地通过复制黏贴而附加到你的设计中。查阅官方文档:twitter.github.com/bootstrap/index.html

基本的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的高度并将其背景颜色设置为白色,你所看到的效果会是这样:

Bootstrap3.0学习 Bootstrap教程 如何建立自己的网站

标题和导航

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

Bootstrap3.0学习 Bootstrap教程 如何建立自己的网站

小于979px:

Bootstrap3.0学习 Bootstrap教程 如何建立自己的网站

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

相关推荐
Bootstrap:知名的开源前端框架中文翻译版上线
Web前端开发框架Twitter BootStrap推荐
前端开发框架Bootstrap3.0新手入门学习系列教程
前端开发框架Bootstrap3.0学习教程之入门篇
前端开发框架Bootstrap3.0学习教程之栅格系统原理
前端开发框架Bootstrap3.0学习教程之栅格系统案例
GOLD Bootstrap:支付黄金比例排版的CSS框架
三款CSS框架介绍:YAML、Blueprintcss、Elements
27款优秀的CSS框架推荐
CSS框架到底有那些优点与缺点?
20个免费CSS框架推荐 网页设计web开发必备
8个超棒的创建响应式网页设计框架推荐
20款设计师和web开发人员最爱的开源CSS框架推荐
TopCoat:一套免费的CSS开源UI元素类库推荐
CSS工具之SASS样式开发指南
10款提升工作效率的响应式页面设计工具推荐
14款响应式布局的前端开发框架推荐
CSS:清除多余的标签让代码更加有意义
DIV+CSS布局两列右列宽度自适应布局的不同实现方法
CSS排版中常遇到的五个问题及解决办法
CSS网页布局有关中文排版的九个技巧
详解如何用div+css模拟表格对角线
Firefox与IE浏览器在CSS样式表中的差异
加一段代码让IE6支持hover伪类效果
用CSS来控制字符长度和显示长度
CSS代码不同书写风格的优缺点
如何使一个DIV层居中于浏览器中?
正确理解CSS规则的优先级算法
创建高效CSS代码的五个好习惯

分类导航

教程推荐

热门特效

热门教程