Bootstrap 3 发布了，通过简单的几步，我们就可以使用 Bootstrap 的样式表，图标，以及 javascript 来配置一个简单的站点。

准备

Bootstrap 不仅仅是一个代码集，还是一个在线社区。作为开始，你需要从熟悉 bootstrap 网站开始：http://getbootstrap.com。

目前版本是 3.0 ，你应该看到如上的页面。

在这里，你可以找到如下内容：

文档

如果这是你第一次访问这个站点，冲一杯热茶，细心地阅读这个网站的页面，查看每个组件，阅读详细的说明，沉浸在其中，你会发现非常的有趣。

下载

你可以获取最新版本的 bootstrap：样式表，脚本，插件，以及图标。已经完全处理好，可以直接使用，并且封装在一个压缩包内，我们将从这里开始。

如何完成

不管你现在水平如何，我都会带你完成全部的步骤。

1. 访问 bootstrap 的首页：http://getbootstrap.com

2. 点击 Download Bootstrap 按钮，你会下载一个名为 bootstrap-3.0.0.zip 的文件。

3. 找到下载的文件，然后解压。你会看到一个名为 bootstrap-3.0.0 的文件夹，在其中你会看到如下的文件结构。

其中 dist 文件夹中包含了我们主要使用的文件。

4. 在首页的导航菜单中，点击 Getting Started 。

5. 在左边的导航链接中，找到示例的链接：Examples

6. 找到第一个示例 Starter template，把它下载保存起来，你也可以在 bootstrap-3.0.0\examples\starter-template 文件夹中找到它，包含了两个文件。

你已经准备好了！

文件的内容应该如下所示：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <meta name="description" content="">

    <meta name="author" content="">

    <link rel="shortcut icon" href="../../assets/ico/favicon.png">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->

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

    <!-- Custom styles for this template -->

    <link href="starter-template.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>

      <script src="../../assets/js/html5shiv.js"></script>

      <script src="../../assets/js/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">

      <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 class="navbar-brand" href="#">Project name</a>

        </div>

        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

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

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

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

          </ul>

        </div><!--/.nav-collapse -->

      </div>

    </div>

    <div class="container">

      <div class="starter-template">

        <h1>Bootstrap starter template</h1>

        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>

      </div>

    </div><!-- /.container -->

    <!-- Bootstrap core JavaScript

    ================================================== -->

    <!-- Placed at the end of the document so the pages load faster -->

    <script src="../../assets/js/jquery.js"></script>

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

  </body>

</html>

而 starter-template.css 文件的内容如下所示：

body {

  padding-top: 50px;

}

.starter-template {

  padding: 40px 15px;

  text-align: center;

}

打开这个页面，你应该看到如下的内容。

祝贺你！你的第一个 bootstrap 站点已经开始工作了。

有问题了？不用担心，如果你的页面看起来与上面的不同，我们找一下问题所在：

  • 文件夹与文件名正确吗？
  • 样式表文件和脚本文件的路径正确吗？

Bootstrap 3 How-To #1 下载与配置的更多相关文章

  1. CentOS 下 SonarQube 6.7 的下载、配置、问题排查

    CentOS 下 SonarQube 6.7 的下载.配置.问题排查 系统: CentOS 7 x86_64 SonarQube 版本: 6.7.3 Java 版本: 1.8.0_171 MySQL ...

  2. Tomcat的下载和配置

    目录结构: // contents structure [-] 下载Tomcat 配置Tomcat 运行Tomcat 参考文章 下载Tomcat 读者可以到apache官网下载Tomcat.笔者下载的 ...

  3. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(四)：开源的Silverlight运行容器的编译、配置

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  4. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(三)：配置ActiveXForm运行环境

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  5. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(二)：配置WinClient分布式运行环境

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  6. Stm32 SWD 下载 调试配置

    找到一篇比较好的 关于stm32  SWD模式 下载 调试 配置文章 整理如下:       我们比较常用的是Jlink下载器 ,这种下载器有一个缺点就是使用的Jtag 20PIN接口,太多的PIN会 ...

  7. win10 DVWA下载安装配置（新手学渗透）

    电脑重装系统了,需要重新装一下渗透测试的学习环境DVWA,借此机会就跟大家讲一下DVWA的安装过程,因为不同的电脑配置.环境不同,在我的电脑上按照我这个安装教程是一次性就安装好了的.如果安装的时候遇到 ...

  8. Jmeter下载安装配置及使用（windows）

    1 前言 仅作为记录使用. 2 步骤 2.1 下载地址:http://jmeter.apache.org/download_jmeter.cgi 2.2 选择binary版本即可:apache-jme ...

  9. 快速搭建springboot框架以及整合ssm+shiro+安装Rabbitmq和Erlang、Mysql下载与配置

    1.快速搭建springboot框架(在idea中): file–>new project–>Spring Initializr–>next–>然后一直下一步. 然后复制一下代 ...

随机推荐

  1. TP框架基础

    什么是TP框架: 一堆代码的集合,里边有变量.函数.类.常量,设计模式MVC.AR数据库.单例等等.全称是Tinkphp框架; 为什么使用框架: 使用框架将全部精力集中在业务层次,节省50-60%的工 ...

  2. Async 和 Await的性能(.NET4.5新异步编程模型)

    异步编程长时间以来一直都是那些技能高超.喜欢挑战自我的开发人员涉足的领域 — 这些人愿意花费时间,充满热情并拥有心理承受能力,能够在非线性的控制流程中不断地琢磨回调,之后再回调. 随着 Microso ...

  3. 剑指offer系列25---构建乘积数组

    [题目]给定一个数组A[0,1,…,n-1],请构建一个数组B[0,1,…,n-1],其中B中的元素B[i]=A[0]A[1]…A[i-1]A[i+1]…A[n-1].不能使用除法. package ...

  4. 【转】Java集合框架综述

    文章目录 1. 集合框架(collections framework) 2. 设计理念 3. 两大基类Collection与Map 3.1. Collection 3.2. Map 4. 集合的实现( ...

  5. POM (Project Object Model)简介

    1  概念介绍 一个项目所有的配置都放置在 POM 文件中:定义项目的类型.名字,管理依赖关系,定制插件的行为等等.比如说,你可以配置 compiler 插件让它使用 java1.5 来编译. < ...

  6. Linux开机自动挂载存储

    今天有个系统的开发人员跟我说,他们测试系统出现问题重启了服务器后就发现找不到存储了. 唉,不用说了.肯定没有自动加载存储呗.一个堂堂的技术顾问,一天4-5K工资的人连这个操作都不会啊?忍了... 登录 ...

  7. [git]Git与Repo入门

    转自:http://www.cnblogs.com/angeldevil/archive/2013/11/26/3238470.html 注:非常推荐的一篇关于git的博文 目录: 版本控制 一.原始 ...

  8. Linux下查看和添加环境变量

    转自:http://blog.sina.com.cn/s/blog_688077cf01013qrk.html $PATH:决定了shell将到哪些目录中寻找命令或程序,PATH的值是一系列目录,当您 ...

  9. 黄聪：PHP5.6+7代码性能加速-开启Zend OPcache-优化CPU

    说明 PHP 5.5+版本以上的,可以使用PHP自带的opcache开启性能加速(默认是关闭的).对于PHP 5.5以下版本的,需要使用APC加速,这里不说明,可以自行上网搜索PHP APC加速的方法 ...

  10. ScalaTour-1.基础

    import java.io.{BufferedReader, File, FileInputStream, InputStreamReader} import java.util import ja ...