BootStrap4

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

栅格系统

  • 栅格选项
1
2
3
4
5
6
7
超小设备<576px
.container最大宽度:    None (auto)
类前缀:                 .col-
列数量和                  12
间隙宽度            30px（一个列的每边分别15px）
可嵌套                   Yes
列排序                   Yes
1
2
3
4
5
6
7
平板≥576px
.container最大宽度:      540px
类前缀:                .col-sm-
列数量和                  12
间隙宽度            30px（一个列的每边分别15px）
可嵌套                   Yes
列排序                   Yes
1
2
3
4
5
6
7
桌面显示器≥768px
.container最大宽度：     720px
类前缀：               .col-md-
列数量和                  12
间隙宽度            30px（一个列的每边分别15px）
可嵌套                   Yes
列排序                   Yes
1
2
3
4
5
6
7
大桌面显示器≥992px
.container最大宽度：     960px
类前缀：               .col-lg-
列数量和                  12
间隙宽度            30px（一个列的每边分别15px）
可嵌套                   Yes
列排序                   Yes
1
2
3
4
5
6
7
超大桌面显示器≥1200px
.container最大宽度：      1140px
类前缀：                 .col-xl-
列数量和                   12
间隙宽度             30px（一个列的每边分别15px）
可嵌套                    Yes
列排序                    Yes
  • Bootstrap自动布局,创建相等宽度的列

两个"col"，每个就为50%的宽度。三个"col"每个就为33.33%的宽度，四个"col"每个就为25%的宽度，以此类推。

1
2
3
4
5
<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>
  • 等宽响应式列

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

1
2
3
4
5
6
<div class="row">
  <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>
</div>
  • 不等宽响应式列

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

1
2
3
4
<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%,在移动手机等小型设备上会堆叠显示。

1
2
3
4
5
6
7
8
9
10
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>RUNOOB</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%, 在移动手机等小型设备上会堆叠显示。

1
2
3
4
5
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
push-3往后退3列，pull-9往前进9列。
  • 偏移列

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

1
2
3
4
5
6
7
8
9
10
11
12
.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>

文字排版

Bootstrap4默认的font-size为16px, line-height为1.5。
默认的font-family为"HelveticaNeue",Helvetica,Arial,sans-serif。此外，所有的p元素margin-top:0、margin-bottom:1rem（16px)。

  • h1-h6
1
2
3
4
5
6
7
8
<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标题类

Display 标题可以输出更大更粗的字体样式。

1
2
3
4
5
6
<div class="container">
  <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

small元素用于创建字号更小的颜色更浅的文本。

1
2
3
4
5
6
7
8
<div class="container">
  <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>
  • mark

mark为黄色背景及有一定的内边距。

1
<p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
  • abbr

abbr元素的样式为显示在文本底部的一条虚线边框。

1
2
3
4
<div class="container">
  <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>
  • blockquote

对于引用的内容可以在blockquote元素上添加.blockquote类。

1
2
3
4
5
6
7
<div class="container">
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>
  • dl
1
2
3
4
5
6
7
8
9
<div class="container">
  <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>
  • code
1
2
3
<div class="container">
  <p>以下HTML元素: <code>span</code>, <code>section</code>, 和<code>div</code>用于定义部分文档内容。</p>
</div>
  • kbd
1
2
3
4
<div class="container">
  <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
1
2
3
4
5
6
7
8
9
10
<div class="container">
  <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>