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

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

1563261520628675.jpg

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

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

本指南的目的是作为初学者对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让我们开始!

使用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>

很容易开始。我们有我们的基本doctypehtmlheadbody标签。该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

导航栏

虽然我们什么都没有,但我们可以立刻从文档中复制和粘贴,并拥有一个漂亮,有效的网站。首先,我们添加了典型的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

看起来很混乱,但其实没那么复杂。在第一行中,我将整个条形导航定义为一个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

网格(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

将自定义样式添加到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

有一个小页面的代码,我完全改变了我的布局。从这里开始,您可以更有创意。

可以从这里查看这个演示:http://codepen.io/taniarascia/pen/yYQYpO#0。

英文地址原文:https://www.taniarascia.com/what-is-bootstrap-and-how-do-i-use-it/

相关文章推荐:

前端开发人员必看:改进网页设计的具体步骤

以上就是什么是Bootstrap以及如何使用它?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Bootstrap 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏