今天做的事情，任务9中 bootstrap4的学习

今日收获：

1.data-toggle与data-target的作用。

因为Bootstrap为这些元素都绑定上了事件，而终止了链接默认行为，你可以看看Bootstrap的文档，data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标,你这段代码的意思就是指将#signin-signup-tab这个Dom元素的内容以模态框的形式展示。

<a> 元素上你可以使用 href 属性来代替 data-target 属性

例子:

<div

  <h2>简单的折叠</h2>

  <a href="#demo" "collapse">简单的折叠</a>

  <div id="demo"

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,

    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  </div>

</div>

网格系统：

.col- 针对所有设备

.col-sm- 平板 - 屏幕宽度等于或大于 576px

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

<!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->

<div

  <div

</div>

<div

  <div

  <div

  <div

</div>

<!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->

<div

  <div

  <div

  <div

</div>

第一个例子：创建一行(<div "color:#ff0000">响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。

第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推。同样，可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

不同类型显示器bootstrap写法：

    平板、            桌面、          大桌面显示器、   超大桌面显示器     的宽度比例为分别为：

25%/75%、50%/50%、33.33%/66.67%、    16.67/83.33%,  在移动手机等小型设备上会堆叠显示。

实例

<div

  <div

    <div "color:#ff0000">col-sm-3 col-md-6 col-lg-4 col-xl-2">

      <p>RUNOOB</p>

    </div>

    <div "color:#ff0000">col-sm-9 col-md-6 col-lg-8 col-xl-10">

      <p>菜鸟教程</p>

    </div>

  </div>

</div>

偏移列（相对定位类似？？）

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

实例

</div>