返回首页 - Notes - 2017

学习 Bootstrap4


基本框架

Bootstrap4 目前还没有正式发布,这里使用 Yarn 包管理器安装其最新的 alpha 版本:yarn add bootstrap@4.0.0-alpha.6

HTML 页面的 head 标签首部,加上下面两行

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

然后引入 Bootstrap4 及其依赖的 CSSJS,最终的模版页面如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Learn BS4</title>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body>

    <div class="container">
      Hello World
    </div>

    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/tether/dist/js/tether.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

注意事项:

  1. css 文件放到 head 标签内,js 文件放到 body 结束标签前
  2. bootstrap 依赖 jquerytether,必须把两依赖项放在 bootstrap 之前
  3. 网页对外展示的内容,需要包裹在 .container 类之中

网格系统

一行分为 12 列,行的类为 .row;划分为五种不同的自适应屏幕尺寸,分别对应一个类,具体如下:

如果一行分配的子项宽度数值超过 12,则会将即将超过 12 的项作为单独的一行呈现

行里面还可以有行,也就是支持 嵌套

每一个尺寸又包含几种不同的修饰词,包括 -数字-autooffset-尺寸-数字pull-尺寸-数字push-尺寸-数字,举例如下:

指定了任意其他屏幕大小的宽度,却没有指定 极小 屏幕的宽度时,一旦屏幕尺寸处于极小状态下,所有在其他屏幕尺寸下正常排列的子项会垂直堆叠

.w-100 类可以另起一行,类似于 <br> 标签

每一行均可以附加下面三个类来指定子内容整体的垂直位置:

而一行内的每一列也都可以附加下面三个类来指定自身的垂直位置,并会覆盖所属行的垂直设定:

针对行的水平位置设定:

在行上附加 .no-gutters 类可以将子项的水平内边距给干掉

可以对一行内的每列指定呈现顺序:


媒体对象

单个媒体

<div class="container">

  <div class="media">
    <img class="d-flex mr-3" src="" alt="图片">
    <div class="media-body">
      <h5 class="mt-0">内容标题</h5>
      内容主体
    </div>
  </div>

</div>

嵌套媒体

<div class="container">

  <div class="media">
    <img class="d-flex mr-3" src="" alt="图片">
    <div class="media-body">
      <h5 class="mt-0">内容标题</h5>
      内容主体
      <div class="media mt-3">
        <a class="d-flex pr-3" href="#"><img src="" alt="嵌套图片"></a>
        <div class="media-body">
          <h5 class="mt-0">嵌套内容标题</h5>
          嵌套内容主体
        </div>
      </div>
    </div>
  </div>

</div>

媒体列表

<ul class="list-unstyled">
  <li class="media">
    <img class="d-flex mr-3" src="" alt="图片">
    <div class="media-body">
      <h5 class="mt-0 mb-1">内容标题</h5>
      内容主体
    </div>
  </li>
  <li class="media my-4">
    <img class="d-flex mr-3" src="" alt="图片">
    <div class="media-body">
      <h5 class="mt-0 mb-1">内容标题</h5>
      内容主体
    </div>
  </li>
  <li class="media">
    <img class="d-flex mr-3" src="" alt="图片">
    <div class="media-body">
      <h5 class="mt-0 mb-1">内容标题</h5>
      内容主体
    </div>
  </li>
</ul>

控制媒体的位置:


间距设置

外间距:.m方向(-尺寸)-(数字|auto)

内间距:.p方向(-尺寸)-(数字|auto)

可选方向:

可选尺寸(在什么屏幕尺寸下生效):smmdlgxl,省略则代表 极小 屏幕

可选数字(间距大小):05,还可以用 auto(但是内边距不能使用 auto,只有外边距可用)

举例如下:


控制是否可见

可选尺寸:xssmmdlgxl

.hidden-md-down 表示在中等或中等以下屏幕时,将自身隐藏掉

打印的可视控制


date:2017-02-09、2017-02-10