[简介]从如何安装Bootstrap 4到如何使用它都有详尽的解释!

“ Bootstrap可以做什么?”
“我没有代表Bootstrap 3-4更新信息。”

如果到目前为止您已经学习了html或css,您可能想知道将来是否会从头开始编写长代码。我认为这需要时间和精力。

“引导程序”可以立即解决此问题。 Bootstrap由Twitter启动。这是CSS的“框架”,有固定的编写html的方式,这是一个简单的任务(复制)&只需使用(粘贴)将其放置在html中,就可以快速创建一个漂亮的网站,而无需编写CSS。

创建与智能手机和手机兼容的站点时,没有比Bootstrap方便的工具。如果您想提高工作效率,那么您绝对希望掌握这项技术。尤其要确保您了解“网格系统”的中心概念。在这里,我们将主要说明如何安装Bootstrap和网格系统。

本文是针对那些初次学习Bootstrap的用户的。它不适用于已经安装并正在使用它的人,因此如有必要,请跳过它。

Bootstrap可以做什么

对于那些问“ Bootstrap是什么?”的人,我将首先解释它可以做什么。您可以看到图像。

例如,Bootstrap允许您将功能添加到站点中,这些功能比从头开始编写代码更快捷,更有用。以下是一些可用功能。

例如,假设您要添加“模态”功能。在上面的列表中单击“模态”。如果转到“模态”页面,则会找到该功能的html代码。

将此添加到您的html代码。然后,可以容易地实现以下效果。无需添加CSS。

上面的html代码是基础,因此您实际上需要自定义和使用此代码。如您所见,Boostrap提供的代码只是创建网站的基本代码,您必须对其进行自定义。尽管如此,从一开始就提供高功能代码的好处是无法估量的。在Boostrap中,为每个功能组织html代码。例如,输入表单,导航栏和按钮是常用功能,不是吗?

我会总结一下。请记住,boostrap功能具有以下优点:第三个对初学者也很有吸引力。

  1. 极大地减少了编码时间
  2. 它很容易实现Javascript和复杂的功能,几乎没有学习成本。
  3. 参考资料可在线获得,从而减少了解决问题的时间。

如何安装Bootstrap

首先引导程序官方页面请去。

在这里,我们将说明如何下载和使用Bootstrap css文件。该说明适用于使用本地编辑器的人员。还有一种将它与CDN一起使用的方法,但是如果您始终可以连接到网络,那么这里也没有问题。

环境设定

转到官方页面,然后单击下面的下载。

转到“下载”页面后,单击下面的“下载”按钮以下载文件。

然后,将出现包含以下“ css”和“ js”文件的“ bootstrap-4.3.1(这是版本名称)”文件。将其存储在您的html文件中。但是,如您在上图中所见,不包括jQuery文件。因此,如果您打算使用jQuery,jQuery官方页面请去。在js文件中创建“ jquery-3.3.1.min.js”,并按如下所示进行配置。

最终配置应如下所示:

如果您始终有Internet环境,并且想使用云编辑器,则还可以使用以下CDN。

如果安排如下,则准备就绪。

请复制并使用以下内容。

<!doctype html>
<html lang="ja">
  <head>
  	<title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">

    <!-- style.css -->
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  	

    <!-- Optional JavaScript -->
    <script src="./js/jquery-3.3.1.min.js"></script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/bootstrap.bundle.min.js"></script>
  </body>
</html>

功能介绍

在这里,我们将介绍Bootstrap 4中经常使用的功能。

从侧栏(左侧)中选择“组件”。

然后,将显示可用元素的列表(以下是一些)。只需选择要使用的元素,复制所需的代码,然后进行调整。

快讯

保存或删除输入时,此“警报”功能具有“ @@保存”,“ @@保存失败”和“ @@已删除”。每当用户执行操作时,可能会显示一条消息。那时我经常使用它。

从以下html中选择适当的颜色,然后将其粘贴到html中。

<div class="alert alert-primary" role="alert">
   A simple 主 alert—check it out!
</div>

显示如下。

在某种程度上记住这里使用的颜色。它不仅以警报方式使用,还以其他方式使用。

          

          

          

次要的
成功
危险
警告
资讯资讯
黑暗

纽扣

每当您使用表格时,都有按钮。即使不是表单,也有很多机会创建按钮,例如页面转换按钮。如果要以表格形式使用它,请使用下面的按钮。

<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

您也可以调整此按钮的大小。
如果要创建一个大按钮,请在类中添加“ btn-lg”。

<button type="button" class="btn btn-primary btn-lg">Large button</button>

如果要创建一个小按钮,请在类中添加“ btn-sm”。

<button type="button" class="btn btn-primary btn-sm">Small button</button>

如果要将按钮的大小增加到元素的整个宽度,请添加“ btn-block”。

<button type="button" class="btn btn-primary btn-block">Block level button</button>

卡也是经常在常规网站上使用的功能。我敢肯定,您已经在某处看到了以下元素,并且许多实际上已经使它们成为现实。

粘贴下面的代码。如果更改其中使用的类别“ card”,“ card-body”,“ card-title”和“ card-text”,则已设置的填充等将无效,因此请注意。请。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

形式

您将经常使用Bootstrap表格。将下面的代码粘贴到html中。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter EMail">
    <small id="emailHelp" class="form-text text-muted">We'll never share your EMail with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

上面提到的“表单组”和“表单控件”是创建Bootstrap表单时必不可少的元素。

导航栏

我也经常使用Bootstrap的导航栏。但是,许多人没有按原样使用它,而是对其进行自定义并使用它。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

实际上,您通常不需要下拉菜单。在这种情况下,请删除它。您还可以更改导航栏的背景颜色。请更改下面的“ bg-light”部分的颜色规格。您可以相对自由地进行更改。

<nav class="navbar navbar-expand-lg navbar-light bg-light">

</nav>

关于网格

学习Bootstrap时必须了解的是此网格系统。这是一个布局更改系统,支持智能手机,平板电脑和PC等不同的设备。

点击下方边栏中的“布局”。

在此网格布局系统中要理解的重点是将元素的宽度分为12个相等的部分。这称为列。首先,您需要考虑如何将所有布局的宽度分成相等的部分。根据诸如“ 10:2”或“ 8:4”之类的比例来划分元素,并且通过设置比例,根据比例来布置元素。可以根据如何划分12自由设置此比率设置。而水平线称为“行”,垂直线称为“ col”。使用此组合创建布局。

例如,假设您要设计以下布局。如果要均匀地水平排列三个元素,请创建“ 4:4:4”网格。这被表示为“ col-4”。同样,由于它被视为一行,因此它是一个“行”。

为了实现以上设计,请编写以下代码。

<div class="row">
    <div class="col-4">
     要素1
    </div>
    <div class="col-4">
     要素2
    </div>
    <div class="col-4">
     要素3
    </div>
  </div>

如果这是两行,则代码如下。

<div class="row">
    <div class="col-4">
     要素1
    </div>
    <div class="col-4">
     要素2
    </div>
    <div class="col-4">
     要素3
    </div>
  </div>
<div class="row">
    <div class="col-4">
     要素4
    </div>
    <div class="col-4">
     要素5
    </div>
    <div class="col-4">
     要素6
    </div>
  </div>

将宽度设置为网格

您可以如上所述设置“ col-4”,但也可以更详细地设置它。那就是宽度设置。根据宽度的大小,可以进行以下5种设置。通过将其添加到class属性,您可以根据智能手机或平板电脑的尺寸获得适当的位置。

特小 超大
显示宽度 无(自动) 〜540像素 〜720像素 〜960像素 1140px〜
类名前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-

也可以根据宽度更改网格中的列数,如下所示。以下是将3列(最大540px),4列(最大720px)和2列(最大960px)排列的说明。

<div class="row">
    <div class="col-sm-3 col-md-4 col-lg-6">
     要素1
    </div>
    <div class="col-sm-3 col-md-4 col-lg-6">
     要素2
    </div>
    <div class="col-sm-3 col-md-4 col-lg-6">
     要素3
    </div>
</div>

Bootstrap 3和Bootstrap 4之间的区别

Bootstrap现在是版本4,但是如果您不是初学者,则可能已经习惯了Bootstrap 3。在2015年发布的Alpha版本中,提供了几种不同的功能。对于那些想知道“ 3”和“ 4”之间的区别是什么的人,这里有一些区别。想要查询更多的信息,迁移指南请确认。

         

Bootstrap3 引导程序4
4层(.col-sm-/。col-md-/。col-lg-/。col-xl-) 更好的网格层次结构已添加。有5个级别(.col-/。col-sm-/。col-md-/。col-lg-/。col-xl-)。请注意,由于添加了层次结构,每个层次结构的宽度定义都不同。
添加删除 面板,缩略图和孔被废除 左侧的元素已统一为卡。
弹性盒处理 Flexbox是可选的。 默认情况下,Flexbox可用。
CSS语言 萨斯
重置CSS Normalize.css 重启
尺寸 像素 EM

列的宽度已更改如下。

引导程序4

特小 超大
显示宽度 无(自动) 〜540像素 〜720像素 〜960像素 1140px〜
类名前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-

Bootstrap3

特小
显示宽度 〜767像素 〜991像素 〜1199像素 1200px〜
类名前缀 .col-xs- .col-sm- .col-md- .col-lg-

概要

Bootstrap的优点是您可以通过简单地复制和自定义功能来轻松实现复杂的功能,但是当涉及到网格时,请务必了解并使用它。可能是最常用的功能。它具有多种功能,因此让我们习惯它。特别是,由于从Bootstrap 3过渡到4,显示宽度的数量增加了,因此如果您习惯于Bootstrap 3,请小心。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。