本文简单介绍下如何来使用 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. Net任意String格式转换为DateTime类型

    方式一:Convert.ToDateTime(string) Convert.ToDateTime(string) 注意:string格式有要求,必须是yyyy-MM-dd hh:mm:ss 方式二: ...

  2. CentOS 7.1 Bridge启用STP报错"Master connection not found or invalid"

    今天在公司测试Linux bridge搭建,为了使内部docker容器的网络能够不经过2层封装转发对外公布,顾试用一下bridge功能,结果碰到报错:"Bringing up interfa ...

  3. [转载]基于TFS实践敏捷-项目管理

    最近,一直想让团队加入敏捷开发,但TFS2010用下来,并不是令人满意,还好,TFS2012横空出世了.相比TFS2010,TFS2012改进太多了,主要体现在以下方面: Team Web Acces ...

  4. Spark入门实战系列--8.Spark MLlib（上）--机器学习及SparkMLlib简介

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .机器学习概念 1.1 机器学习的定义 在维基百科上对机器学习提出以下几种定义: l“机器学 ...

  5. Linux 磁盘分区、格式化、目录挂载

    实验环境: Citrix虚拟化, RHEL6.4系统环境 本文目的: 熟悉Linux的基本磁盘分区.格式化.目录挂载. 显示当前主机目录 磁盘分区 磁盘格式化 挂载目录 1. 显示当前主机目录 命令d ...

  6. Oracle存储过程获取YYYY-MM-DD的时间格式

    环境:Oracle 10g,11g 问题重现:PL/SQL中命令窗口下,发现存储过程得到的时间格式不符合预期要求. SQL> select sysdate from dual; SYSDATE ...

  7. 你见过吗？9款超炫的复选框（Checkbox）效果

    复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS ...

  8. jQuery邮箱自动补全代码

    JScript 代码   复制 (function($){ $.fn.emailMatch= function(settings){ var defaultSettings = { emailTip: ...

  9. matlab 读取excel

    clear;clc; tic;%启动计时器,计算程序运行时间 a=xlsread('C:\Documents and Settings\Administrator\桌面\data.xls');b=a( ...

  10. 了解WP的传感器

    之前看到老大的一个QQ签名,说想写一个WP的程序,可是后来,后来就没有后来了.我去年打算学一下WP程序开发的,一年了也无任何进展,我可不想后来,后来就没有后来.于是抽时间来接触一下.虽然都是用CShs ...