Bootstrap简单HelloWorld入门教程

时间 2021-08-13

标签 css html web django bootstrap 浏览器 dom ide 布局栏目 Bootstarp 繁體版

原文原文链接

By Django中国社区 at 2013-07-13 12:55html

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

基本的HTML模板

咱们须要以一个基本的HTML模板，这样咱们可以把所须要的bootstrap文件包含进来。下面就是咱们twitter bootstrap项目的开头，复制这些代码到一个文件中并将其命名为index.html。django

<!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使页面的背景呈亮灰色，由于这样咱们可以轻易地在咱们的设计中看见不一样的列，使它更加容易理解。bootstrap

引入twitter bootstrap文件

为了使用twitter bootstrap咱们仅仅须要把一个文件引入到咱们的模板当中来，引入文件有不少种方法，若是你想了解这些方法请查阅相关文档。浏览器

基于本教程的出发点，咱们将会经过CDN来引入bootstrap-combined.min.css文件而不须要下载任何的文件。dom

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

它可以使全部的twitter bootstrap CSS在咱们的模板中生效。ide

Twitter Bootstrap的容器

bootstrap的container类是很是有用的，它能在页面中建立一个居中的区域，而后咱们可以把其余位置的内容放到里面。 container类等价于建立了一个具备静态宽度而且magin值为auto的一个居中的div框。twitter bootstrap的 container类的优势在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以实用。布局

在body标签中，使用container类建立一个div。它会做为页面主要的放置其余代码的外层包裹。ui

<div class="container"></div>

若是你调整这个DIV的高度并将其背景颜色设置为白色，你所看到的效果会是这样：

标题和导航

如今咱们已经有一个地方能够添加额外的HTML代码，咱们能够添加标题文本而后再建立站点的主要导航条。

加入以下的文本或者你选择的文字到container类的div标签当中。

<h1>TWITTER BOOTSTRAP TUTORIAL</h1>

如今并无多少新的东西，这仅仅是一个标题，让咱们转移到更有趣的方面，twitter bootstrap导航。

Bootstrap 有一个nav类让咱们可以建立各类各样的导航元素，你能够在h1标签以后加入以下的代码。

<div class='navbar navbar-inverse'>
    <div class='navbar-inner 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的专家了。

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

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

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

1. SpringBoot入门 - 简单的HelloWorld
2. bootstrap简单教程
3. bootstrap入门教程
4. sumo简简简单单入门教程
5. [分布式][Dubbo]最简单的dubbo教程-helloWorld快速入门
6. Git简单入门教程
7. lodop简单入门教程
8. anime.js 简单入门教程
9. GRUB简单入门教程
10. vim 简单入门教程
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Github 简明教程