第二章【超入门】Bootstrap的基础

什么是Bootstrap

在Bootstrap中，按钮、菜单等各个部分都是预先准备好的。

这意味着 HTML/CSS/JavaScript 文件或代码。通过指定 Bootstrap 提供的Class，可以轻松创建设计。下图中以按钮为例。按钮的 CSS 是预先准备好的，因此您只需指定Class“btn-primary”即可创建按钮。

如您所见，Bootstrap 提供了很多有用的设计部分，因此您可以轻松快速地创建一个漂亮的网站。

另外，它支持响应式设计。响应式网站具有精心设计的布局，即使在具有不同屏幕宽度的任何设备（智能手机、PC 等）上查看时也是如此。

Bootstrap 有一个网格系统，非常适合响应式设计。换句话说，用于响应性的 CSS 也已提前准备好。在本课中，您将学习网格系统的工作原理和使用方法。

网格系统

ootstrap 有一个叫做 Grid 的机制。它是一种将设备的屏幕划分为 12 部分。安排页面内容沿 12 部分网格设计进行排版。

快速的掌握和使用此网格，以便在适应不同屏幕宽度的设备（例如 PC 和智能手机），通过根据屏幕宽度自动改变网格的位置和大小，对应所有的屏幕。

断点

Bootstrap 具有可以根据屏幕大小更改布局的功能。确定用户环境的大小并更改其显示。例如，您可以将屏幕分为大型 PC ，小型智能手机，平板电脑等等。

下图显示了各种设备的宽度和显示。有5个参考点。当超过或小于此点的宽度时，布局等将发生变化。该参考点称为“断点”。网格系统通过指定断点来定位内容。

此外，Bootstrap 还为每个断点命名。例如“Extra small”，“Small”等等，我们稍后会练习，但是通过给它起这个名字，就可以根据设备的宽度改变外观。

	Extra small	Small	Medium	Large	Extra large
屏幕宽度	～575px	576～767px	768～991px	992～1199px	1200px～

断点 CSS 覆盖也用于网格系统之外，因此最好记住。

布局CSS

Bootstrap 提供了一个方便布局的类。本文介绍的Class，在使用网格系统时是需要的。

使用CONTAINER

Bootstrap 有一个名为“CONTAINER”的 CSS 类。它就像是您内容的容器。此外，将您放入其中的内容置于屏幕中央。

container容器类的最大宽度为 1170px。此外，随着屏幕宽度的减小，容器的宽度也会减小。让我们来看看「container」的 CSS。

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

@media (min-width: 768px) { 
    .container { 
        width: 750px; 
        } 
    } 

@media (min-width: 992px) { 
    .container { 
        width: 970px; 
        } 
    } 

@media (min-width: 1200px) { 
    .container { 
        width: 1170px; 
        } 
    }

了解媒体media

这里我们有一个不熟悉的@media。这些称为媒体查询，您可以写“如果屏幕尺寸为 ..px 或更大，则像这样显示”。

例如，在下面的示例中，设置为[如果屏幕尺寸为 480px 或更大，则将 h1 颜色设置为红色]。

@media screen and (min-width:480px) { 
    /*　如果屏幕尺寸为 480px 或更大，请阅读此处 　*/
        h1 { color: red;}
}

这是在多种情况下发生的情况。你注意到了吗？是的，这是为了根据每个设备的宽度更改设置。

智能手机 => [如果屏幕尺寸为 480px 或更大，将h1 颜色设为红色]

平板电脑 => [如果屏幕尺寸为 786px 或更大，将h1 颜色设为绿色]

PC => [屏幕尺寸为 1024px 或更多。然后将 h1 的颜色设置为蓝色]。

@media screen and (min-width:480px) { 
/*　[对于智能手机] 如果屏幕尺寸为 480px 或更大，请阅读此处　*/
    h1 { color: red;}
}
@media screen and (min-width:768px) { 
/*　[平板电脑 ] 如果屏幕尺寸为 786px 或更大，请阅读此处　*/
    h1 { color: green;}
}
@media screen and (min-width:1024px) { 
/*　[PC用]　屏幕尺寸为 1024px 或更多,请阅读此处　*/
    h1 { color: blue;}
}

明白了这些，我们再来看一下container相关的代码。您可以理解为每个设备更改container的宽度。

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

@media (min-width: 768px) { 
    .container { 
        width: 750px; 
        } 
    } 

@media (min-width: 992px) { 
    .container { 
        width: 970px; 
        } 
    } 

@media (min-width: 1200px) { 
    .container { 
        width: 1170px; 
        } 
    }

CONTAINER-FLUID

另一种是「container-fluid」。是指将宽度设定为设备上的整个屏幕宽度，例如指定“width: 100%”时。

container-fluid 没有任何媒体查询设置。当然。在任何设备上宽度都是 100%。

row类的行设置

「row」是一个表示行的类。当有要水平对齐的内容时，通过将内容封装在该行类中来使用该类。

不一定必须要放入container中，但这次我们将通过放入容器中来进行说明。代码和输出将如下图所示。

col（列）

「列」是指一行被分成 12 列。该类可以在“col”之后添加指定断点和列数的说明。例如，当屏幕宽度为768px或更大时，我们希望内容的宽度为6列（网格）。在这种情况下，实际代码将如下所示：

这意味着使其成为“col-breakpoint-number of columns”形式的类。断点使用下表中“类名”的描述。

	Extra small	Small	Medium	Large	Extra large
画面幅	～575px	576～767px	768～991px	992～1199px	1200px～
クラス名	なし	sm	md	lg	xl

在上面的示例中，当 768px (md) 或更大时使用 6 列。在这种情况下，当屏幕宽度为 768px 或更小时，它会**扩展到 12 列的宽度**。12 列表示 1 列。这是因为如果屏幕宽度小于指定的屏幕宽度，无论指定的列数如何，Bootstrap 的 CSS 都会被写入 12 列宽。

此外，有时您可能想要并排放置多个内容。在这种情况下，您必须在一行中（一行内）指定总共 12 列。例如，假设您希望两段内容具有相同的宽度。然后代码将是这样的：

<div class=”container”>
  <div class=”row”>
    <div class=”col-md-6”>内容</div>
    <div class=”col-md-6”>内容</div>
  </div>
</div>

让我们实际编写一个 Bootstrap 网格

现在让我们编写一些代码并使用网格系统。另外，尝试使用文本编辑器。这一次，我们将假设CDN 上引入了Bootstrap。

这样就设置了屏幕的显示区域。显示区域的意思类似于屏幕大小。它是读取用户屏幕尺寸的图像。

我们将在内部使用网格系统来安排我们的内容。这次，我将放置两个内容。将列数设置为 6，以便它们具有相同的宽度。另外，断点是用 md 设置的。内容由图片和文字组成。

<div class="container">
    <div class="row">
        <div class="col-md-6"><img src="images/test.jpg"></div>
        <div class="col-md-6">
            <h1>sampletext</h1>
            <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
              XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
              XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            </p>
        </div>
    </div>
</div>

如果你保持原样，图像太大并且突出。文字和图片重叠。

在这种情况下，使用类来操作引导程序图像会很方便。一个名为 img-fluid 的类保持图像大小的响应。让我们这样写：

<img src="images/test.jpg" class="img-fluid">

图像已缩小以适合宽度。

在浏览器中检查

现在让我们看看它在浏览器中的实际外观。显示如下就OK了。

接下来，让我们检查当屏幕宽度减小时显示如何变化。尝试缩小浏览器。渐渐地，图像会变小，文本区域会变窄并垂直增长。当它通过指定的断点时，它会从水平变为垂直，如下所示。

概要

・响应式 CSS 也提前准备好

・Bootstrap 提供了一个网格系统，非常适合响应式设计。

・网格系统将设备的屏幕分成12个，并沿着网格排列内容。

・根据屏幕宽度改变显示时，显示改变的参考点称为断点。

・在网格系统中，创建一个具有“col-breakpoint-number of columns”形式的类的列并使其响应

什么是Bootstrap

关联内容