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. synergy帮组提升办公效率

    这个synergy确实很不错哦,当你在办公室拥有两台或者多台电脑的时候,放在面前多台显示器,多个鼠标,多个键盘,但是你的桌面上,是不是多出了些你不需要看到的键盘或者鼠标?至少我是这样子的,我希望多个显 ...

  2. maven本地仓库

    引入某一个站点的jar包 <repositories> <repository> <id>maven.seasar.org</id> <name& ...

  3. 【解决方案】： hyper-v 导入虚拟机报这个错误 32784

    从win server 2012创建的虚拟机 导出后, 想导入到本机win8系统上,结果报错 32784, google了一堆,都说不支持... 实际上 1.在win8系统上 新建一个不带硬盘的虚拟机 ...

  4. angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证

    使用$http.$location.$watch及双向数据绑定等实现简单的用户登陆验证,记录备忘: 1.$http模拟从后台获取json格式的数据: 2.$watch实时监控数据变化: 3.$loca ...

  5. Navicat(连接) -1之Navicat Cloud

    Navicat Cloud Navicat Cloud 提供一个云服务,同步不同机器和平台的 Navicat 连接.查询.模型和虚拟组.当添加一个连接到 Navicat Cloud,它的连接设置和查询 ...

  6. 获取OpenCV中RotatedRect的绝对角度

    opencv中RotatedRect的angle这个成员变量总是诡异的不同寻常(http://stackoverflow.com/questions/15956124/minarearect-angl ...

  7. angular.js form

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. [Tex学习]给汉字注音

    \documentclass{article} \usepackage[CJK]{ruby} \usepackage{pinyin} \begin{document} \begin{CJK*}{GBK ...

  9. SKD

    1, 软件开发工具包 软件开发工具包(Software Development Kit,即SDK)一般是一些被软件工程师用于为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件的开发工具的集合. ...

  10. JAVA toString方法

    在JAVA中,所有的对象都有toString方法: 创建类时没有定义toString方法,输出对象时,会输出对象的哈希值: 它只是sun公司开发java的时候为了方便所有类的字符串操作而特意加入的一个 ...