本文简单介绍下如何来使用 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】入门例子创建的更多相关文章

  1. 【Bootstrap Demo】入门例子创建

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

  2. BootStrap入门_创建第一个例子

    一.选择合适的IDE 一般前端开发选用的都是WebStorm.Brackets等,因为本人对VS比较熟悉,索性就拿VS进行练习了,而且VS练习有些好处,就是通过nuget方式获取BootStrap可以 ...

  3. Bootstrap入门（七）组件1：字体图标

    Bootstrap入门(七)组件1:字体图标   包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用. 部分可用图标截图: 所有图标都需要一个基类 ...

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

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

  5. Bootstrap入门（二）栅格

    Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...

  6. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  7. bootstrap 入门

    bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...

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

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

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

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

随机推荐

  1. 浅谈A/B测试里常见的辛普森悖论，企业决策者必看

    A/B测试背后有着高深的统计学知识,今天我们就来讲讲常见的辛普森悖论. 辛普森悖论 (Simpson's Paradox) 是英国统计学家 E.H.辛普森 (E.H.Simpson) 于1951年提出 ...

  2. Deep learning：四十九(RNN-RBM简单理解)

    前言: 本文主要是bengio的deep learning tutorial教程主页中最后一个sample:rnn-rbm in polyphonic music. 即用RNN-RBM来model复调 ...

  3. JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...

  4. .NET Core第三方开源Web框架YOYOFx

    YOYOFx框架 YOYOFx是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台. 本着学习的态度,造了这个轮子,也是为了更好的了解各个框架的原理和有点,还希望可 ...

  5. for循环的一种简化

    数组: var arr = [1, 2, 3, 5, 6]; 传统的教科书式的循环写法: for(var i=0; i<arr.length; i++){ console.log(arr[i]) ...

  6. js或css文件合并的三种方式推荐

    源文档 <http://www.jb51.net/article/32834.htm> 在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一 ...

  7. 如何获取配置文件Web.config的AppSetting节点数据

    ConfigurationManager必须要先在工程里添加system.configuration.dll程序集的引用. 1 System.Configuration.ConfigurationMa ...

  8. svn无法创建分支的解决方法

    创建分支时出现错误 Access to '/svn/project01/!svn/rvr/18022/trunk' forbidden 解决方法: 找到project01仓库的根目录,假如在d:\sv ...

  9. jquery可见性选择器（匹配匹配所有显示的元素）

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

  10. js中获取URL中指定的查询字符串

    js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. function getSearchString(key) { // 获取URL中?之后的字符 var str ...