BootStrap V4.0 学习笔记

官网 https://getbootstrap.com/

1.Boostrap4 与 Bootstrap3
Boostrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。

Boostrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。

2.移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签：

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

width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。

3.容器类
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

4.Bootstrap4 网格系统
Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

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

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

5.Bootstrap4 文字排版

Bootstrap 4 默认：
font-size 为 16px,
line-height 为 1.5。
font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
所有的 p 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

<!-- 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>

<!-- 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>

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

 <!--abbr元素的样式为显示在文本底部的一条虚线边框:
 类似于tooltip提示框，title里为鼠标停留时提示的信息、
-->
<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

其他Bootstrap 4 ：

small 元素用于字号更小的颜色更浅的文本 (为父元素的 85% )：
mark 为黄色背景及有一定的内边距:
对于引用的内容可以在 blockquote 上添加 .blockquote 类 .blockquote-footer类等:
可以将一些代码元素放到 code 元素里面:

dl 元素的样式：

<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

kbd 元素的样式如下:

<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

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 空格不会     默认  一个
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

其他新增更多排版类一览表：