Bootstrap4 快速开发 -常用样式

y2Zhang
553 阅读5分钟

网格类

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

类名 适应屏幕 大小范围
.col- 针对所有设备
.col-sm- 平板 >=576px
.col-md- 桌面显示器 >=768px
.col-lg- 大桌面显示器 >=992px
.col-xl- 超大桌面显示器 >=1200

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



针对字体大小及语义

<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 class="display-1">display-1 Bootstrap 标题 (6rem)</h1>
    <h1 class="display-2">display-2 Bootstrap 标题 (5.5rem)</h1>
    <h1 class="display-3">display-3 Bootstrap 标题 (4.5rem)</h1>
    <h1 class="display-4">display-4 Bootstrap 标题 (3.5rem)</h1>
</div>
  • Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距:.2em
  • Bootstrap 4 定义<abbr> 元素的样式为显示在文本底部的一条虚线边框:(?文本提示标签)
  • 对于引用的内容可以在<blockquote>上添加 .blockquote 类 :
<div class="container">
  <h1>Blockquotes</h1>
  <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>、<code>、<kbd>、<pre>、<del>、<s>、<ins>、<u>、<small>、<strong>、<em>、<b>、<i>

  • <b>用于强调单词或短语而不会传达额外的重要性，而<i>主要用于语音，技术术语等。



针对字体样式

类名 描述
.font-weight-bold 加粗文本(700!important)
.font-weight-normal 普通文本(400!important)
.font-weight-light 更细文本(300!important)
.font-italic 斜体文本
.lead 让段落更突出
.small 指定更小文本 (为父元素的 85% )
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在<abbr>元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled 移除默认的列表样式，列表项中左对齐(<ul>和<ol>中)。 这个类仅适用于直接子列表项(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.pre-scrollable 使<pre>元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条



Bootstrap4 颜色

  • color：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light

  • background-color: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

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



Bootstrap4 表格

  • Bootstrap4 通过.table类来设置基础表格的样式
  • 通过添加.table-striped类,将在内的行上看到条纹
  • .table-bordered类可以为表格添加边框
  • .table-hover类可以为表格的每一行添加鼠标悬停效果（灰色背景）
  • .table-dark类可以为表格添加黑色背景
  • 联合使用.table-dark和.table-striped类可以创建黑色的条纹表格
  • 联合使用.table-dark和.table-hover类可以设置黑色背景表格的鼠标悬停效果
类名 描述
.table-primary 蓝色: 指定这是一个重要的操作
.table-success 绿色: 指定这是一个允许执行的操作
.table-danger 红色: 指定这是可以危险的操作
.table-info 浅蓝色: 表示内容已变更
.table-warning 橘色: 表示需要注意的操作
.table-active 灰色: 用于鼠标悬停效果
.table-secondary 灰色: 表示内容不怎么重要
.table-light 浅灰色，可以是表格行的背景
.table-dark 深灰色，可以是表格行的背景 
<table class="table table-*">
    <thead>
      <tr>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>...</td>
      </tr>      
    </tbody>
</table>

  • 在 Bootstrap v4.0.0-beta.2 中
    .thead-dark类用于给表头添加黑色背景，.thead-light类用于给表头添加灰色背景

  • 在 Bootstrap v4.0.0-beta这个版本中，
    .thead-inverse类用于给表头添加黑色背景，.thead-default类用于给表头添加灰色背景。

  • .table-sm类用于通过减少内边距来设置较小的表格

通过以下类设定在指定屏幕宽度下显示滚动条：

类名 屏幕宽度
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px



Bootstrap4 <img />形状

  • .rounded类可以让图片显示圆角
  • .rounded-circle类可以设置椭圆形
  • .img-thumbnail类用于设置图片缩略图(图片有边框)
  • .float-right类来设置图片右对齐，使用.float-left类设置图片左对齐
  • .img-fluid类来设置响应式图片

总结：升级优点在于栅格系统的布局，类名简短了，一些组件的js简便了，代码的优化，一些表单元素的样式的美化(单选，多选)

avatar
文章
阅读
粉丝