本文简单介绍下如何来使用 Bootstrap，通过引入 Bootstrap，来实现一个最基本的入门例子。

在前一篇博文【Bootstrap】1.初识Bootstrap 基础之上，我们完全可以更加方便快捷的创建一个的简单例子。这个例子只有基本的东西：引入了预编译版的 CSS 和 JavaScript 文件，页面只包含了一个 container 元素。

在Bootstrap的官方网站的下载页面 http://getbootstrap.com/getting-started/#download ，也有提供一些简单的例子。这里打算创建最简单的。

这里先在官网下载需要的基本文件：

下载后解压，可以看到它只包含三个文件夹：

准备工作做好了，我们就可以开始入门例子的创建了。

1.新建项目 L01_Bootstrap，把这三个文件夹及其文件复制到项目中。

2.然后新建index.html 文档，修改其文档代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Bootstrap</title>

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

    <style>

        body{padding-top: 50px;}

        .starter {padding: 40px 15px; text-align: center;}

    </style>

</head>

<body>

<nav class="navbar navbar-inverse nav-fixed-top" role="navigation">

    <div class="container">

        <div class="navbar-header">

            <a href="#" class="navbar-brand">Project Name</a>

        </div>

        <div id="navbar" class="collapse navbar-collapse">

            <ul class="nav navbar-nav">

                <li class="active"><a href="#">Home</a></li>

                <li><a href="#">About</a></li>

                <li><a href="#">Contact</a></li>

            </ul>

        </div>

    </div>

</nav>

<div class="container">

    <div class="starter">

        <h1>Bootstrap starter template</h1>

        <p class="lead">Hello,Bootstrap</p>

    </div>

</div>

</body>

</html>

3.在浏览器打开index.html文件，可以看到一样的显示效果：

4.但是当页面大小缩小到一定大小的时候，导航条会消失：

5.所以我们需要在导航条中添加一个navbar-toggle按钮，用于展开和收起响应式导航条，同时需要添加相关的js文件，修改文档代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Bootstrap</title>

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

    <style>

        .starter {padding: 40px 15px; text-align: center;}

    </style>

</head>

<body>

<nav class="navbar navbar-inverse nav-fixed-top" role="navigation">

    <div class="container">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a href="#" class="navbar-brand">Project Name</a>

        </div>

        <div id="navbar" class="collapse navbar-collapse">

            <ul class="nav navbar-nav">

                <li class="active"><a href="#">Home</a></li>

                <li><a href="#">About</a></li>

                <li><a href="#">Contact</a></li>

            </ul>

        </div>

    </div>

</nav>

<div class="container">

    <div class="starter">

        <h1>Bootstrap starter template</h1>

        <p class="lead">Hello,Bootstrap</p>

    </div>

</div>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

6.刷新显示文档，发现响应式的导航条已经完成：

【Bootstrap Demo】入门例子创建的更多相关文章

  1. 【Bootstrap】入门例子创建

    本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...

  2. MINA经典入门例子----Time Server

    原文地址 http://blog.sina.com.cn/s/blog_720bdf0501010b8r.html 貌似java的IO.NIO的入门例子都有相关的Time Server Demo.本例 ...

  3. Python之Flask框架项目Demo入门

    Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...

  4. Sandcastle入门：创建C#帮助文档

    Sandcastle入门:创建C#帮助文档 今天学到了一个东西:利用vs2005生成的dll/xml来生成帮助文档. 完成这个伟大任务的是Sandcastle,微软推出的类库文档编译工具. 在开始这篇 ...

  5. 一个简单的iBatis入门例子

    一个简单的iBatis入门例子,用ORACLE和Java测试 目录结构: 1.导入iBatis和oracle驱动. 2.创建类Person.java package com.ibeats;import ...

  6. JPA入门例子(采用JPA的hibernate实现版本) 转

    JPA入门例子(采用JPA的hibernate实现版本) jpahibernate数据库jdbcjava框架(1).JPA介绍: JPA全称为Java Persistence API ,Java持久化 ...

  7. Orleans入门例子

    Orleans入门例子 这是Orleans系列文章中的一篇.首篇文章在此  一.铺垫. 虽然是个入门例子,还是需要一些铺垫. Orleans的最小完全体,应该分为2个部分.一个是Orleans客户端, ...

  8. Orleans 初接触（一） 入门例子

    [返回导航] 在简单了解了Orleans 之后我们可以通过几个例子去加深印象 一.Orleans入门例子 这个例子是跟着<Orleans入门例子>(https://www.cnblogs. ...

  9. JPA入门例子(采用JPA的hibernate实现版本) --- 会伴随 配置文件：persistence.xml

    JPA入门例子(采用JPA的hibernate实现版本) 分类: j2se2011-03-30 16:09 45838人阅读 评论(9) 收藏 举报 jpahibernate数据库jdbcjava框架 ...

随机推荐

  1. authentication与网站安全验证

    1.Forms 身份验证提供程序 通过 Forms 身份验证,可以使用所创建的登录窗体验证用户的用户名和密码.未经过身份验证的请求被重定向到登录页,用户在该页上提供凭据和提交窗体.如果应用程序对请求进 ...

  2. CSS基础转载

    css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部?式 3.样式表配置方法 4 ...

  3. 表达式括号匹配（stack）

    题目描述 假设一个表达式由英文字母(小写).运算符(+.-.*./)和左右小(圆)括号构成,以“@”作为表达式的结束符.请编写一个程序检查表达式中的左右括号是否匹配,若匹配,则返回“YES”:否则返回 ...

  4. github如何查看提交历史呢

    git日志的查看,在使用 Git 提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,我们可以使用 git log 命令查看....... 一.查看日志信息: $ git log 可以用 -- ...

  5. jquery 文本/html/值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 2个很有趣、耐思考的C语言算法

    1. 输入10个整数,任意相邻的两个数不同,输出所有的递增,递减序列 比如: 输入:1 5 9 8 12 21 3 0 -1 9 输出: 1 5 9 9 8 8 12 21 21 3 0 -1 -1 ...

  7. Java03

      字符输入   Scanner scan = new Scanner(System.in); char ch = scan.next().charAt(0);   车到路口例   package C ...

  8. IT基础架构规划方案二(计算机系统与机房规划规划)

    计算机系统规划       服务器硬件选型规划方案       根据对某集团的实际调研,获取了企业业务应用系统的建设情况,随着企业信息化建设的推进,需要对各种信息化管理系统和应用系统的服务器选型进行选 ...

  9. Javascript中call，apply，bind方法的详解与总结

    在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...

  10. 自定义 URL Scheme 完全指南(转载)

    iPhone / iOS SDK 最酷的特性之一就是应用将其自身”绑定”到一个自定义 URL scheme 上,该 scheme 用于从浏览器或其他应用中启动本应用. 注册自定义 URL Scheme ...