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. RDO部署openstack（3）

    目前OpenStackNeutron框架支持的网络服务有:LoadBalancing as a Service,VPNas a Service,Firewallas a Service. 1. 安装和 ...

  2. 重绘Winform窗体

    本文转载自:http://www.cnblogs.com/encoding/p/5603080.html 按照惯例,先来几张样例图(注:为了展示窗口阴影效果,截图范围向外扩展了些,各位凭想象吧). 还 ...

  3. IntelliJ IDEA修改Output输出缓存区大小【应对：too much output to process】

    IntelliJ IDEA默认的Output输出缓存区大小只有1024KB,超过大小限制的就会被清除,而且还会显示[too much output to process],可通过如下配置界面进行修改O ...

  4. android学习笔记40——国际化和资源自适应

    国际化——Internationalization,简称I18N. 本地化——Localization,检查L10N. java国际化资源的思路: java提供国际化资源的思路,是将程序中的标签.提示 ...

  5. UDP 单播、广播和多播

    阅读目录(Content) 一.UDP广播 二.UDP多播 1.多播(组播)的概念 2.广域网的多播 三.UDP广播与单播 广播与单播的比较 使用UDP协议进行信息的传输之前不需要建议连接.换句话说就 ...

  6. perl语言书籍教程推荐

    互动出版网计算机频道.为您推荐关于perl语言的书籍教程.包括perl push.perl chomp以及perl python等perl语言内容. perl语言书籍一.<Perl语言编程 第四 ...

  7. SQL 获取本年第几周

    根据输入的日期得出,算出是本年第几周 select datepart(week,getdate())

  8. memcached应用场景(转)

     memcached最吸引人的地方主要在于它的分布式.分布式对于互联网应用来讲,按照用途基本上可划分为三种方式:分布式计算.分布式存储和两者兼而有之.memcached是分布式存储的一种.我们常见的分 ...

  9. linux 定时器编程实例(完善中).....

    最近在写linux 下的定时器编程实验,测试发现 usleep函数在 x86 架构下的定时还是比较准确的,在arm9下 就不太准了. 今天用linux 下的setitimer()函数进行了定时 器的测 ...

  10. HtmlParser + HttpClient 实现爬虫

    简易爬虫的实现 HttpClient 提供了便利的 HTTP 协议访问,使得我们可以很容易的得到某个网页的源码并保存在本地:HtmlParser 提供了如此简便灵巧的类库,可以从网页中便捷的提取出指向 ...