什么是Bootstrap以及如何使用它？

如果您对Web开发有任何兴趣，您可能已经听说过Bootstrap。据官方网站称，Bootstrap是最受欢迎的HTML，CSS和JS框架，用于在Web上开发响应式移动优先项目。听起来很棒！现在我该如何使用它？

1563261520628675.jpg-600

可以很容易地把你转到他们的“入门”页面，然后一天就结束了。他们的安装指南实际上是一系列有用的信息——到cdn的链接，关于如何与bower、npm和composer安装的解释，关于与autoprefixer集成的信息等等，一堆模板、许可证和翻译--但它肯定不是一个循序渐进的指南开始(这很可能autodidactism的精神)。

几年前，当我发现Bootstrap时，响应式设计仍然在流行，而且不一定是预期的规范。我只从零开始做过网站，对框架的整个概念有点困惑。我想这对于初学者来说会更加困惑，他们现在需要学习响应式设计概念、引导和JavaScript库，以及HTML、CSS和JS。

本指南的目的是作为初学者对Bootstrap的第一个了解，所以不会涉及较少和Sass集成，这是更中级/高级的概念。虽然它是为当前稳定的版本bootstrap 3而编写的，但是对于未来的版本，这些概念将保持不变。

目标

　●　了解前端框架是什么以及它如何有用

　●　了解如何正确包含Bootstrap的CSS和JavaScript并开始自定义

先决条件

　●　基本知识和对HTML和CSS的理解

什么是Bootstrap？

Bootstrap可以归结为三个主要文件：

　●　bootstrap.css - 一个CSS框架

　●　bootstrap.js - 一个JavaScript / jQuery框架

　●　glyphicons - 字体（图标字体集）

另外，Bootstrap需要jQuery才能运行。jQuery是一个非常受欢迎且广泛使用的JavaScript库，它既简化了JavaScript又增加了浏览器与JavaScript的兼容性。

在研究Bootstrap文档时可能遇到的其他所有事情--Grunt，Gulp，Sass，LESS，bower，npm等 - 对于开始使用Bootstrap来说并不是必需的。这些是任务运行器，预处理器，安装辅助工具和包管理器，因此如果您还不知道如何使用其中任何一个，请不要气馁。

为什么框架很重要？我需要使用一个吗？

框架非常受欢迎并且有许多好处，因此学习如何使用框架非常重要。

框架可以帮助您的一些方法：

　●　防止项目之间重复

　●　利用响应式设计，让您的网站适应各种屏幕尺寸 - 移动，桌面以及介于两者之间的所有内容

　●　为项目之间和开发人员之间的设计和代码添加一致性

　●　快速轻松地对新设计进行原型设计

　●　确保跨浏览器兼容性

通常，您处理的每个Web项目都需要响应并在所有主流浏览器上正常运行，并且可能会为旧版浏览器提供一些后备。Bootstrap有一个巨大的开源社区，可以用来覆盖这个，所以你不必这么做。此外，当多个开发人员都知道相同的系统时，他们可以更好地协调工作 - 并且它还使项目中的新手更容易加快速度。

网格可能是框架最重要的方面之一。它是创建整个布局的基础。除此之外，Bootstrap的核心CSS还将为表单，表格，按钮，列表和图像添加有用的样式，以及功能齐全的导航栏，而核心JavaScript将添加有用的代码，用于创建模态，轮播，警报，弹出窗口，下拉列表和手风琴。

ea0a85f3e2e1cb971cd4843ca174c61.png-600 让我们开始！

使用Bootstrap构建基本模板

Bootstrap附带了一些非常简单的示例，但从“scratch”开始也很容易，所以这就是我们要做的。首先，我将仅使用Bootstrap来奠定基础，然后我们将在顶部添加我们自己的自定义样式，以创造有趣和时尚的东西。

第一步是下载Bootstrap。这个zip文件中将附带css，fonts和js目录。解压缩并将文件保存在某个目录中。Bootstrap没有附带任何HTML，但它们有一个“Hello，World！” 从文档开始的页面，因此我们将其用作index.html。

Hello, World!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

很容易开始。我们有我们的基本doctype，html，head和body标签。该meta name="viewport"标记是响应式设计尤其重要-它可以确保你的网站有一个1：1的比例与视口（屏幕尺寸）。

除此之外，我们只是在<head>...中添加Bootstrap核心CSS 。

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

在结束</body>标记之前通过Google CDN来添加 jQuery.....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

和Bootstrap核心JavaScript。

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

Bootstrap JavaScript和自定义JavaScript 必须在jQuery下面才能运行！此外，我们可以通过谷歌的URL链接到jQuery，因为它减少了我们的实时服务器的负载，但如果你想在本地工作，你可以下载它（https://jquery.com/download/）。

好了，这就是所有你需要开始引导!让我们看看我们了不起的新网站。

c493629250c5312c899f37f1d912f54.png-600

导航栏

虽然我们什么都没有，但我们可以立刻从文档中复制和粘贴，并拥有一个漂亮，有效的网站。首先，我们添加了典型的Bootstrap顶部导航栏。我制作了导航栏示例的简化版本。将此代码放在开始<body>标记的正下方。

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button
        type="button"
        class="navbar-toggle collapsed"
        data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1"
        aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Balance Web Development</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true"
            aria-expanded="false">Services<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Consulting</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

c74bff873c4672b98fc915f2a9909e1.png-600

看起来很混乱，但其实没那么复杂。在第一行中，我将整个条形导航定义为一个navbar，选择一个带有navbar- reverse的深色方案，并选择使用navbar-static-top，而不是一个固定的(粘性的)标题。

<nav class="navbar navbar-inverse navbar-static-top"></nav>

container在全宽导航栏内设置内容的max-width。

<div class="container"></div>

navbar-header类包含“brand”的信息，你可以把你的标志或公司名称放在这。例：我们正在为虚构的科技公司Balance Web Development建立一个网站。

button隐藏在桌面上，并成为手机上的下拉菜单图标（每个<span class=“icon bar”>都是菜单中的一行）。

<div class="navbar-header">
  <button
    type="button"
    class="navbar-toggle collapsed"
    data-toggle="collapse"
    data-target="#bs-example-navbar-collapse-1"
    aria-expanded="false"
  >
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Balance Web Development</a>
</div>

其余代码是一个右对齐的无序列表，可作为桌面和移动菜单使用。

大屏幕标题（Jumbotron Header）

我决定要一个大的，浪费空间的，吸引注意力的header，这在Bootstrap术语中被称为一个jumbotron。在这里看不多，只有一个jumbotron、jumbotron和一些副本。

<div class="jumbotron">
  <div class="container">
    <h1>Ready. Set. Code.</h1>
    <p>
      Are you ready to boilerstrap your cross-compatible buzzword? We're Sassy, flat and semantic,
      so what are you waiting for?
    </p>
    <br />
    <p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Download Free Trial ?</a>
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more ?</a>
    </p>
  </div>
</div>

我们不想要一些额外的空间，但是我想看看Bootstrap可以在没有覆盖样式的情况下获得多大的空间。正如您所看到的，我们已经拥有了一个非常漂亮，适应性强的布局，而没有编写一行CSS。

2ff622adf5f613b3c998cfbddd1b30e.png-600

网格（row）

我要做的最后一件事是添加一些主要内容，这些内容将以网格的形式出现。网格是row.....

<div class="row"></div>

设置一下列：

<div class="row">
  <div class="col-md-6"></div>
  <div class="col-md-6"></div>
</div>

Bootstrap可以在12列系统上运行。上面的例子将包含两个50％宽度的列（6/12），它们将在移动设备上堆叠并变为100％宽度。

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
      <h3>Cloud Computable</h3>
      <p>
        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo,
        tortor mauris condimentum nibh.
      </p>
    </div>
    <div class="col-md-4">
      <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
      <h3>Backwards Compatible</h3>
      <p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
    </div>
    <div class="col-md-4">
      <span class="glyphicon glyphicon-console" aria-hidden="true"></span>
      <h3>GUI Free</h3>
      <p>
        Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo,
        tortor mauris condimentum nibh.
      </p>
    </div>
  </div>
</div>

在这里你可以看到我有三个四列，即十二列。

图标

我还添加了一些glyphicons（字形图标）用于装饰。Glyphicons是Bootstrap附带的内置图标集。如果您不加载字体，或者将它们移动到其他目录，则这些图标将不起作用。

<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>

使用glyphicon始终是相同的代码，只有glyphicon-floppy-disk类会改变。

我现在对布局的基础感到满意。

f499748f7bbbb1cb47ee4cff52009d1.png-600

将自定义样式添加到Bootstrap

如果不触及一线风格，就可以实现这一目标。它专业，反应灵敏，并且对浏览器友好。不过，这绝对不是创意或独特。在奠定基础之后，您将需要添加自己的个人设计。

如果您了解LESS或Sass，您可以在Bootstrap广泛的自定义区域中下载您自己的Bootstrap版本。我们碰巧使用的是“vanilla CSS”，它是没有预处理器的CSS。幸运的是，您可以在Bootstrap的核心下添加一个额外的样式表

不要修改Bootstrap核心 - 你最好覆盖现有的样式。

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<link
  href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
  rel="stylesheet"
  type="text/css"
/>

我添加了一个名为Montserrat的Google字体链接。如果您之前从未使用过Google字体，那么您只需将字体样式表添加到您的字体中，head然后更改font-family所需的元素即可。

现在我们终于开始造型了。在短短几分钟内，我将能够将无聊的通用Bootstrap布局转换为有趣的平面布局。首先，我要摆脱导航栏和jumbotron之间的那个讨厌的空间。

.navbar {
  margin-bottom: 0;
}

我在整个页面上加载了Montserrat字体，我将标题加粗，并且我使背景变暗，文字变亮。

body {
  background: #3e4649;
  color: #f7f7f7;
  font-family: 'Montserrat', sans-serif;
}
h1,
h2 {
  font-weight: bold;
}
p {
  font-size: 16px;
  color: #cdcdcd;
}

我要把jumbotron变成绿色并居中。

.jumbotron {
  background: #27a967;
  color: white;
  text-align: center;
}
.jumbotron p {
  color: white;
  font-size: 26px;
}

我要把按钮变成“ghost buttons（幽灵按钮）”，它们是带边框的透明按钮。我还添加了一个保证金，因此它们可以在移动设备上正确堆叠。

.btn-primary {
  color: #fff;
  background-color: transparent;
  border-color: white;
  margin-bottom: 5px;
}
.btn-primary:hover {
  color: #27a967;
  background-color: white;
  border-color: white;
}

我将使导航栏变暗，使链接更亮，并在悬停时更改背景颜色。

.navbar-inverse {
  background: #2e2f31;
  border: 0;
}
.navbar-inverse .navbar-nav li a {
  color: #f7f7f7;
  font-size: 16px;
}
.navbar-inverse .navbar-nav li a:hover {
  background: #27a967;
}

下拉菜单有自己的类，所以我还要更改这些类的背景颜色并添加一点填充。

.dropdown-menu {
  background: #2e2f31;
  border-radius: 0;
  border: 0;
}
.dropdown-menu li a {
  padding: 10px;
}
.navbar-inverse .navbar-nav .dropdown-menu li a:hover {
  background: #2c463c;
}

回到HTML中，我将在网格中包装一个section标签，然后调用call-to-action。我还将创建一个glyphicon-large类，并将其添加到每个图标span中。

<section class="call-to-action">
  <!-- .rows and .columns -->
  <span class="glyphicon glyphicon-cloud glyphicon-large" aria-hidden="true"></span>
  <!-- /.rows and .columns -->
</section>

最后对我的代码进行润色，将是使底部调用居中，在p标记上添加margin-bottom，以便它们在移动设备上正确堆叠，并使我的glyphicons符号更大。

.call-to-action {
  text-align: center;
}
.call-to-action p {
  margin-bottom: 30px;
  font-family: sans-serif;
}
.glyphicon-large {
  font-size: 100px;
}

2b81e68b84683dd3c25f907e4711eb7.png-600