Bootstrap4(一)

Bootstrap 4是什么？

Bootstrap 4 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 4 目前是 Bootstrap 的最新版本，是一套用于HTML、CSS 和 JS 开发的开源工具集，利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预售组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app。

Bootstrap 4安装使用

我们可以通过以下两种方式来安装 Bootstrap 4：

      使用Bootstrap 4 CDN。

      从官网 https://v4.bootcss.com/下载Bootstrap 4。

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
<script src=“https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.js”></script>

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

网格系统(栅格系统)

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。

我们也可以根据自己的需要，定义列数：

网格类

Bootstrap 4 网格系统有以下5个类：

      .col-针对所有设备

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

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

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

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

网格系统规则

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

使用行来创建水平的列组。

内容需要放置在列中，并且只有列可以是行的直接子节点。

预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。

网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。

Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

网格的基本结构

第一个例子：创建一行(

)。然后， 添加需要的列( .col- - 类中设置)。 第一个星号 ( ) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 () 表示一个数字, 同一行的数字相加为 12。

第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局

同一行的每个列宽度相等： 两个 “col” ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

<!-- 第一个例子 控制列的宽度及在不同的设备上如何显示 -->
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>

<!-- 第二个例子 让 Bootstrap 自动处理布局 -->
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>

等宽列，自动布局

创建相等宽度的列，Bootstrap 自动布局

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

等宽响应式列

在平板及更大屏幕上创建等宽度的响应式列。

在移动设备上，即屏幕宽度小于576px是，四个列将会上下堆叠排版。

  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>

不等宽响应式列

在平板及更大屏幕上创建不等宽度的响应式列。

在移动设备上，即屏幕宽度小于576px时，两个列将会上下堆叠排版。

<div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-8">.col-sm-8</div>
</div>

平板和桌面端

在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%，在移动手机等小型设备上会堆叠显示。

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-6">
        <p>click369.com</p>
      </div>
      <div class="col-sm-9 col-md-6">
        <p>网星软件</p>
      </div>
    </div>
  </div>

平板、桌面、大桌面显示器、超大桌面显示器

在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
        <p>click369</p>
      </div>
      <div class="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 class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>

文字排版

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。

此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

<h1>-<h6>

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式

<div class="container">
    <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
    <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
    <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
    <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
    <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
    <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
  </div>

Display标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4

<div class="container">
    <h1>Display 标题</h1>
    <p>Display 标题可以输出更大更粗的字体样式。</p>
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>
  </div>

<small>

在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:

<div class="container">
    <h1>更小文本标题</h1>
    <p>small 元素用于字号更小的颜色更浅的文本:</p>
    <h1>h1 标题 <small>副标题</small></h1>
    <h2>h2 标题 <small>副标题</small></h2>
    <h3>h3 标题 <small>副标题</small></h3>
    <h4>h4 标题 <small>副标题</small></h4>
    <h5>h5 标题 <small>副标题</small></h5>
    <h6>h6 标题 <small>副标题</small></h6>
  </div>

<pre>

Bootstrap 4 定义HTML<pre>元素的样式如下：

<div class="container">
    <h1>Multiple Code Lines</h1>
    <p>For multiple lines of code, use the pre element:</p>
    <pre>
    Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both spaces and
    line breaks.
    </pre>
  </div>

更多排版类

Bootstrap4 更多排版类的实例：

     .font-weight-bold 加粗文本

     .font-weight-normal 普通文本

     .font-weight-light 更细的文本

     .font-italic 斜体文本

     .lead 让段落更突出

     .small 指定更小文本 (为父元素的 85% )

     .text-left 左对齐

     .text-center 居中

     .text-right 右对齐

     .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行

     .text-nowrap 段落中超出屏幕部分不换行

     .text-lowercase 设定文本小写

     .text-uppercase 设定文本大写

     .text-capitalize 设定单词首字母大写

     .list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)

     .list-inline 将所有列表项放置同一行,需要配合.list-inline-item 一起使用

     .pre-scrollable 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

文本颜色

Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light

在链接中使用也可以使用

<div class="container">
    <h2>代表指定意义的文本颜色</h2>
    <p class="text-muted">柔和的文本。</p>
    <p class="text-primary">重要的文本。</p>
    <p class="text-success">执行成功的文本。</p>
    <p class="text-info">代表一些提示信息的文本。</p>
    <p class="text-warning">警告文本。</p>
    <p class="text-danger">危险操作文本。</p>
    <p class="text-secondary">副标题。</p>
    <p class="text-dark">深灰色文字。</p>
    <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
    <p class="text-white">白色文本（白色背景上看不清楚）。</p>
  </div>

背景颜色

提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

注意:背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

<div class="container">
    <h2>背景颜色</h2>
    <p class="bg-primary text-white">重要的背景颜色。</p>
    <p class="bg-success text-white">执行成功背景颜色。</p>
    <p class="bg-info text-white">信息提示背景颜色。</p>
    <p class="bg-warning text-white">警告背景颜色</p>
    <p class="bg-danger text-white">危险背景颜色。</p>
    <p class="bg-secondary text-white">副标题背景颜色。</p>
    <p class="bg-dark text-white">深灰背景颜色。</p>
    <p class="bg-light text-dark">浅灰背景颜色。</p>
  </div>