Bootstrap 3 How-To #1 下载与配置

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 站点已经开始工作了。

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

  • 文件夹与文件名正确吗?
  • 样式表文件和脚本文件的路径正确吗?
时间: 2025-01-11 17:29:53

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

[转]JFreeChart简介及下载、配置

JFreeChart简介 JFreeChart是完全基于Java语言的开源项目,因此可以使用在Java开发环境中,包括Java应用程序,或者是Java Web应用都没有任何问题.结合iText项目,可将生成的统计图表输出到PDF文件中:结合最新的POI项目,也可以将生成的统计图表输出到Excel文档中. JFreeChart可用于生成各式各样的统计图表,只要开发人员提供符合JFreeChart所需格式的数据,JFreeChart即可自动生成相应的统计图表.JFreeChart可生成饼图(pie

jstl的下载与配置及其常用标签的使用

一.jstl标签的下载与配置 摘要:下载地址http://www.apache.org/dist/jakarta/taglibs/standard/,主要standard.jar  与 jstl.jar 两个jar文件,若为所有web应用使用可拷贝到tomcat的 lib目录下,若为当前应用使用拷贝到WEB-INF/lib中即可 JSTL(JSP Standard Tag Library,JSP标准标签库)由Apache的jakarta小组开发,是开源的标准标签库,目前正在不断完善中.使用JST

TortoiseSVN下载,安装,配置,常用操作 svn教程

   TortoiseSVN下载,安装,配置,常用操作 svn教程 首先在百度搜索并下载 TortoiseSVN 推荐从官网下载,软件分为32位和64位版本,下载时请根据自己的系统位数进行下载:  安装过程: 1.下载软件后,双击程序进行安装,点击"Next": 2.在许可证协议页面,选择"I Accept the terms in the License Agreement",点击"Next": 3.在自定义选项页面,可以选择安装目录,也可以直

Python介绍、下载安装配置、第一个程序Hello World

Python介绍 Python特点:优雅.明确.简单 Python源码不能加密 Python适合的领域:Web网站和各种网路服务.系统工具和脚本.作为"胶水"语言把其他语言开发的模块包装起来方便使用 Python不适合的领域:贴近硬件的代码(首选C).移动开发iOS/Android有各自的开发语言(ObjectC,Swift/Java).游戏开发:C/C++ Python可以跨平台,在linux.windows.mac os x中运行 Python目前有2.7和3.3两个版本,但是Py

Tomcat的下载和配置

目录结构: contents structure [-] 下载Tomcat 配置Tomcat 运行Tomcat 参考文章 下载Tomcat 读者可以到apache官网下载Tomcat.笔者下载的是tomcat 8.5.9[32-bit windows],注意tomcat 8.5版本需要的JDK最低版本为1.7,可详见JDK的安装配置. 配置Tomcat 在系统的环境变量中新建如下三个的值: TOMCAT_HOME=D:\Program Files\app\apache-tomcat-8.5.9

有关apache+php+mysql的相关下载及配置

01. Apache的下载及配置 apache的下载地址:http://httpd.apache.org 点击:download下载   之后跳转 点击:Files for microsoft windows(指的是windows版本)  之后跳转到 点击:Apachehaus,此处获取下载地址页面,之后跳转 这样就可以了.

【Ratchet】Ratchet2.0.2的下载、配置与Helloworld

Ratchet这东西经常被人诟病,说其组件不够多,很多东西需要自己写,但是这也正是它的优势,因为它是完全基于基本的HTML与javascript,你可以在移动端利用最基本的HTML写出自己的想要的东西,说其长久不更新,也是其优势,主要是稳定.如果你需要搭建一个轻便的移动端网站,那么可以考虑使用Ratchet2.0.2,这东西在界面上,可以取代复杂的jQueryMobile,<[jQueryMobile]Helloworld与页面切换>(点击打开链接).同时最关键的一点,又没有人要求你仅用一种框

Jmeter下载安装配置及使用(windows)

1 前言 仅作为记录使用. 2 步骤 2.1.下载地址:http://jmeter.apache.org/download_jmeter.cgi 2.2. 选择binary版本即可:apache-jmeter-4.0.zip md5 sha512 pgp 2.3.下载的是jmeter4.0版本,对应jdk1.8(Java8),如果没有自行网上下载 2.4. 电脑桌面-->"计算机"图标->鼠标右键选择"属性"->点击高级系统设置->高级-&g

Maven的下载以及配置

Maven的下载以及配置 Maven的两大核心作用: (1)依赖管理:对Jar包的依赖,解决Jar包之间的冲突 (2)项目构建:项目从编译到测试到运行发布 一.Mavenu的下载(现在的eclipse都自带Maven,可以直接使用) 去官网:http://maven.apache.org/download.cgi 下载完毕之后解压 修改配置 打开setting.xml文件 还可以添加远程仓库的位置 <mirror> <id>alimaven</id> <name&