Bootstrap4 布局排版

Data: 2016-12-29 11:49:59Form: JournalClick: 0

# 布局排版

# 一、布局

# 1、响应式概述

什么是响应式框架？响应式布局是一种设计实践，以前看网站都是在电脑的浏览器上，现在智能手机越来越普及，还包括平板，不同的型号，屏幕尺寸，手机上需要看网页，导致以前的网页布局，无法在多设备上，查看。需要把网页做成电脑端、手机端、平板端，多个客户端，使工作量增大。。为了解决多客户端的问题，响应式布局就出来了。响应式布局，Bootstrap 算比较早的一批框架，设计的也很不错，所以现在很多大公司都在用。

# 2、响应断点

@media (min-width: 576px) {
    ...;
  }
  @media (min-width: 768px) {
    ...;
  }
  @media (min-width: 992px) {
    ...;
  }
  @media (min-width: 1200px) {
    ...;
  }

# 3、网格概述

网格布局（Grid）是最强大的 CSS 布局方案
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

# 4、`Bootstrap` 的网格

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

# 5、`Bootstrap4` 网格系统根据屏幕分为 5 个类

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

# 6、使用

网格每一行需要放在设置了 .container (固定宽度，1140) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。没有的话，会出现底部拖拉
row 创建一行

<div class="container-fluid">
      <div class="row">
          <div class="col-3">欧阳克</div>
          <div class="col-3">灭绝师太</div>
          <div class="col-3">天蓬</div>
          <div class="col-3">裘千丈</div>
      </div>
  </div>
  <div class="container"></div>

<div class="container-fluid">
      <div class="row">
          <div class="col-3">欧阳克</div>
          <div class="col-3">灭绝师太</div>
          <div class="col-3">天蓬</div>
          <div class="col-3">裘千丈</div>
      </div>
  </div>
  <div class="container-fluid">
      <div class="col-3">欧阳克</div>
      <div class="col-3">灭绝师太</div>
      <div class="col-3">天蓬</div>
      <div class="col-3">裘千丈</div>
  </div>

# 7、其他尺寸

<div class="container-fluid">
      <div class="row">
          <div class="col-xl-3">欧阳克</div>
          <div class="col-xl-3">灭绝师太</div>
          <div class="col-xl-3">天蓬</div>
          <div class="col-xl-3">裘千丈</div>
      </div>
  </div>
  <div class="container-fluid">
      <div class="row">
          <div class="col-lg-3">欧阳克</div>
          <div class="col-lg-3">灭绝师太</div>
          <div class="col-lg-3">天蓬</div>
          <div class="col-lg-3">裘千丈</div>
      </div>
  </div>
  <div class="container-fluid">
      <div class="row">
          <div class="col-md-3">欧阳克</div>
          <div class="col-md-3">灭绝师太</div>
          <div class="col-md-3">天蓬</div>
          <div class="col-md-3">裘千丈</div>
      </div>
  </div>
  <div class="container-fluid">
      <div class="row">
          <div class="col-sm-3">欧阳克</div>
          <div class="col-sm-3">灭绝师太</div>
          <div class="col-sm-3">天蓬</div>
          <div class="col-sm-3">裘千丈</div>
      </div>
  </div>

# 8、混用

<div class="container-fluid">
      <div class="row">
          <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">欧阳克</div>
          <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">灭绝师太</div>
          <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">天蓬</div>
          <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">裘千丈</div>
      </div>
  </div>

# 9、偏移

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

<div class="container-fluid">
      <div class="row">
          <div class="col-md-3 offset-md-3">欧阳克</div>
          <div class="col-md-3 offset-md-3">灭绝师太</div>
          <div class="col-md-3 offset-md-3">天蓬</div>
          <div class="col-md-3 offset-md-3">裘千丈</div>
      </div>
  </div>

# 10、网格里网络

<div class="container-fluid">
      <div class="row">
          <div class="col-md-8">
          <div class="row">
              <div class="col-md-3">欧阳克</div>
              <div class="col-md-3">灭绝师太</div>
              <div class="col-md-3">天蓬</div>
              <div class="col-md-3">裘千丈</div>
          </div>
          </div>
          <div class="col-md-4">php中文网</div>
      </div>
  </div>

# 六、排版

# 1、标题

<h1>PHP中文网</h1>
  <h2>PHP中文网</h2>
  <h3>PHP中文网</h3>
  <h4>PHP中文网</h4>
  <h5>PHP中文网</h5>
  <h6>PHP中文网</h6>

# 2、标题类

不会视作 html 的标题元素（seo、搜索引擎没效果）

<p class="h1">PHP中文网</p>
  <p class="h2">PHP中文网</p>
  <p class="h3">PHP中文网</p>
  <p class="h4">PHP中文网</p>
  <p class="h5">PHP中文网</p>
  <p class="h6">PHP中文网</p>

h1 到 h6 的 font-size 排序：
2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
初始情况，1em = 16px，则换算如下
32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;
Boostrap 将 h1-h6 的字体大小 font-size 重新进行了设置，如下所示
36px -> 30px -> 24px -> 18px -> 14px -> 12px;

# 3、副标题

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。<small>标签和.small 类的元素的样式相同
副标题是标题的 80%

<small>副标题</small>
  <h1>PHP中文网 <small>副标题</small></h1>
  <h2>PHP中文网 <small>副标题</small></h2>
  <h3>PHP中文网 <small>副标题</small></h3>
  <h4>PHP中文网 <small>副标题</small></h4>
  <h5>PHP中文网 <small>副标题</small></h5>
  <h6>PHP中文网 <small>副标题</small></h6>
  <!-- 更小文本 (为父元素的 80% ) -->
  <p>PHP中文网，<span class="small">欧阳克</span></p>

# 4、Display 标题类

<h1 class="display-1">标题</h1>
  <h1 class="display-2">标题</h1>
  <h1 class="display-3">标题</h1>
  <div class="display-4">标题</div>

# 5、`p` 标签

<p>PHP中文网 讲师：欧阳克</p>

<p> （段落）元素去掉了上边距（外边距）

p {
    margin-top: 0;
    margin-bottom: 1rem;
  }

# 6、(内联文本)

mark 高亮文本
abbr 缩写标签
del 删除文本
s 无用文本
ins 插入文本
u 带下划线的文本

<!-- `mark` 高亮文本 -->
  <p>PHP中文网 <mark>讲师：</mark> 欧阳克</p>
  
  <!-- `abbr` 缩写标签 -->
  <p>PHP中文网 <abbr title="这是提示语句">讲师：</abbr> 欧阳克</p>
  
  <!-- `del` 删除文本 -->
  <p>PHP中文网 <del>讲师：</del> 欧阳克</p>
  
  <!-- `s` 无用文本 -->
  <p>PHP中文网 <s>讲师：</s> 欧阳克</p>
  
  <!-- `ins` 插入文本 -->
  <p>PHP中文网 <ins>讲师：</ins> 欧阳克</p>
  
  <!-- `u` 带下划线的文本 -->
  <p>PHP中文网 <u>讲师：</u> 欧阳克</p>