Bootstrap简单HelloWorld入门教程

时间：2022-09-07 09:16:28

这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面，了解栅格系统，并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用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 class="container">

</div>

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

Bootstrap简单HelloWorld入门教程

标题和导航

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

Bootstrap简单HelloWorld入门教程

小于979px

Bootstrap简单HelloWorld入门教程

另外，我们可以添加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简单HelloWorld入门教程

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

侧边栏导航

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

Bootstrap简单HelloWorld入门教程

结论

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

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

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

另附上完整代码：

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>

        <style type='text/css'>

            body {

                background-color: #CCC;

            }

        </style>

        <link rel="stylesheet" href="../static/css/bootstrap.css" />

    </head>

    <body>

        <div class="container">

            <h1>TWITTER BOOTSTRAP TUTORIAL</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>

            <div id='content' class='row-fluid'>

                <div class='span9 main'>

                    <h2>Main Content Section</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>

                </div>

                <div class='span3 sidebar'>

                    <h2>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>

                </div>

            </div>

        </div>

    </body>

</html>

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

Bootstrap简单HelloWorld入门教程的更多相关文章

  1. MongoDB最简单的入门教程之二 使用nodejs访问MongoDB

    在前一篇教程 MongoDB最简单的入门教程之一 环境搭建 里,我们已经完成了MongoDB的环境搭建. 在localhost:27017的服务器上,在数据库admin下面创建了一个名为person的 ...

  2. MongoDB最简单的入门教程之三 使用Java代码往MongoDB里插入数据

    前两篇教程我们介绍了如何搭建MongoDB的本地环境: MongoDB最简单的入门教程之一 环境搭建 以及如何用nodejs读取MongoDB里的记录: MongoDB最简单的入门教程之二 使用nod ...

  3. MongoDB最简单的入门教程之四：使用Spring Boot操作MongoDB

    Spring Boot 是一个轻量级框架,可以完成基于 Spring 的应用程序的大部分配置工作.Spring Boot的目的是提供一组工具,以便快速构建容易配置的Spring应用程序,省去大量传统S ...

  4. MongoDB最简单的入门教程之五-通过Restful API访问MongoDB

    通过前面四篇的学习,我们已经在本地安装了一个MongoDB数据库,并且通过一个简单的Spring boot应用的单元测试,插入了几条记录到MongoDB中,并通过MongoDB Compass查看到了 ...

  5. Bootstrap框架菜鸟入门教程

    Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简 ...

  6. React 最简单的入门教程

      一看就懂的ReactJs入门教程(精华版)   现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual D ...

  7. 相比之前其他几个入门的， 推荐： 简单vue2 入门教程

    注意:Vue.js 不支持 IE8 及其以下 IE 版本.       具体可以看下  http://www.runoob.com/vue2/vue-tutorial.html 以下是学习过程 Vue ...

  8. webpack最简单的入门教程里bundle&period;js之运行单步调试的原理解析

    读这篇文章的朋友,请确保对webpack有最基础的认识. 您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目.https://www.to ...

  9. Java动态代理之InvocationHandler最简单的入门教程

    网上关于Java的动态代理,Proxy和InvocationHandler这些概念有讲解得非常高深的文章.其实这些概念没有那么复杂.现在咱们通过一个最简单的例子认识什么是InvocationHandl ...

随机推荐

  1. 利用filter过虑用户请求URI显示对应页面内容

    目的:只是想验证一下filter对URI的过滤 流程讲解:浏览器请求URI,所有请求都走过虑器,在过滤器中处理符合某种请求的URI然后显示对应的页面内容 有2个JSP页面: index.jsp: &l ...

  2. MATLAB画ROC曲线，及计算AUC值

    根据决策值和真实标签画ROC曲线,同时计算AUC的值 步骤: 根据决策值和真实标签画ROC曲线,同时计算AUC的值: 计算算法的决策函数值deci 根据决策函数值deci对真实标签y进行降序排序,得到 ...

  3. java中抽象类与接口的区别

    1.abstract class 在 Java 语言中表示的是一种继承关系,一个类只能使用一次继承关系.但是,一个类却可以实现多个interface. 2.在abstract class 中可以有自己 ...

  4. 《java入门第一季》之泛型引入

    泛型的引入: 首先看一段代码体会自动报错. // 看下面这个代码 自动报错 String[] strArray = new String[3]; strArray[0] = "hello&q ...

  5. spring-boot的spring-cache中的扩展redis缓存的ttl和key名

    原文地址:spring-boot的spring-cache中的扩展redis缓存的ttl和key名 前提 spring-cache大家都用过,其中使用redis-cache大家也用过,至于如何使用怎么 ...

  6. &lbrack;Ubuntu&rsqb; 解决 pip 安装 lxml 出现 x86&lowbar;64-linux-gnu-gcc 异常

    安装 pip : $ wget https://bootstrap.pypa.io/get-pip.py ... $ sudo python get-pip.py install 使用 pip 安装/ ...

  7. Linux Windows平台添加pip源

    直接应用 pip3 install django -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com​ ...

  8. Java编程之Date的相关操作

    一:讲字符串的时间格式数据转换成时间对象 //将字符串的时间数据,转换成时间 String dateString="2007-12-12"; DateFormat date=new ...

  9. 接口文档神器Swagger（下篇）

    本文来自网易云社区 作者:李哲 二.Swagger-springmvc原理解析 上面介绍了如何将springmvc和springboot与swagger结合,通过简单配置生成接口文档,以及介绍了swa ...

  10. codeforces781A Andryusha and Colored Balloons

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

相关文章