Bootstrap 3 How-To #1 下載與配置

時間 2019-11-10

標籤 bootstrap 下載配置欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap 3 發佈了，經過簡單的幾步，咱們就可使用 Bootstrap 的樣式表，圖標，以及 javascript 來配置一個簡單的站點。javascript

準備

Bootstrap 不單單是一個代碼集，仍是一個在線社區。做爲開始，你須要從熟悉 bootstrap 網站開始：http://getbootstrap.com。css

目前版本是 3.0 ，你應該看到如上的頁面。html

在這裏，你能夠找到以下內容：html5

文檔

若是這是你第一次訪問這個站點，衝一杯熱茶，細心地閱讀這個網站的頁面，查看每一個組件，閱讀詳細的說明，沉浸在其中，你會發現很是的有趣。java

下載

你能夠獲取最新版本的 bootstrap：樣式表，腳本，插件，以及圖標。已經徹底處理好，能夠直接使用，而且封裝在一個壓縮包內，咱們將從這裏開始。jquery

如何完成

無論你如今水平如何，我都會帶你完成所有的步驟。git

1. 訪問 bootstrap 的首頁：http://getbootstrap.comgithub

2. 點擊 Download Bootstrap 按鈕，你會下載一個名爲 bootstrap-3.0.0.zip 的文件。bootstrap

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 站點已經開始工做了。

有問題了？不用擔憂，若是你的頁面看起來與上面的不一樣，咱們找一下問題所在：

文件夾與文件名正確嗎？
樣式表文件和腳本文件的路徑正確嗎？

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。