bootstrap4 知识点整理

妖狐艹你老母 2022-04-05 03:59 1073阅读 0赞

前言：bootstrap4目前是最新的bootstrap版本，用ES6重写了所有插件，加载速度更快，不再支持IE8。（好像没有了图标库）  
1） 网格类：  
Bootstrap 4 网格系统有以下 5 个类:

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

2）  
*1*： 最外从由一个容器包裹，且这个容器的类名为container（固定宽度）或container-fluid（全屏宽度）

*2*： 内容需要放置在列中，且只有列可以是行的直接子节点。

*3*： 每行最多有12列，且列与列之间有默认的15px的padding。

*4*：

<div class="container-fluid">
      <div class="row">
        <div class="col-sm-4 col-md-6">
          <p>dingpeiyang</p>
        </div>
        <div class="col-sm-8 col-md-6">
          <p>dingpeiyang</p>
        </div>
      </div>
    </div>

以上代码表示在平板显示器上左边宽度为20%，右边宽度为80%。在桌面显示器上两边各占50%。

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

4） 文字排版：  
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)。

5） Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

6） 特殊标签：

<h1>h1 标题 <small>副标题</small></h1>  
    <small>元素用于创建字号更小的颜色更浅的文本
    <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
    <mark> 为黄色背景及有一定的内边距
    <p>The <abbr title="Ding Pei Yang">DPY</abbr> love you</p>
    <abbr> 元素的样式为显示在文本底部的一条虚线边框
    <kbd>键盘文字</kbd>
    <code>可以将一些代码元素放到 code 元素里面</code>
    <pre>自定义排版样式</pre>

引用：

<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 text-right">
        From WWF's website
        </footer>
        </blockquote>

1.  Bootstrap4 更多排版类的实例：  
    .font-weight-bold 加粗文本  
    .font-weight-normal 普通文本  
    .font-weight-light 更细的文本  
    .font-italic 斜体文本  
    .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轴出现滚动条

8） Bootstrap 4 提供了一些有代表意义的颜色类：  
muted 柔和颜色  
primary 主要颜色  
success 成功颜色  
info 信息颜色  
warning 警告颜色  
danger 危险颜色  
secondary 副标题颜色  
dark 深灰颜色  
light 浅灰颜色  
white 白色颜色  
例如：class=“bg-success text-info table-primary”

9） 表格：  
.table 类来设置基础表格的样式  
.table-striped 类，您将在 tbody 内的行上看到条纹  
.table-bordered 类可以为表格添加边框  
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）  
.table-dark（也可以是table-primary table-success等） 类可以为表格添加黑色背景  
.table-sm 类用于通过减少内边距来设置较小的表格  
.table-responsive 类用于创建响应式表格  
你可以通过以下类设定在指定屏幕宽度下显示滚动条：  
.table-responsive-sm < 576px  
.table-responsive-md < 768px  
.table-responsive-lg < 992px  
.table-responsive-xl < 1200px

10） bootstrap4 图片形状：  
.rounded 类可以让图片显示圆角效果  
.rounded-circle 类可以设置椭圆形图片  
.img-thumbnail 类用于设置图片缩略图(图片有边框)  
使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐  
.img-fluid 类来设置响应式图片  
11） bootstrap4 jumbotron:  
Jumbotron（翻译：超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息，可以通过在 div 元素 中添加 .jumbotron 类来创建 jumbotron。  
class="jumbotron jumbotron-fluid"创建一个没有圆角的全屏幕

12） 信息提示框：  
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现  
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接  
我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class=“close” 和 data-dismiss=“alert” 类来设置提示框的关闭操作。

<div class="alert alert-success alert-dismissible">
      <button type="button" class="close" data-dismiss="alert">×</button>
      <strong>成功!</strong> 指定操作成功提示信息。
    </div>

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果

13） 按钮：  
.btn定义按钮  
.btn-info定义按钮的颜色  
.btn-outline-success定义按钮边框颜色  
.btn-lg定义大号的按钮  
.btn-block定义块级按钮（按钮很宽）  
.active 可用的按钮  
.disabled 禁用的按钮  
class=“btn btn-info btn-outline-secondary btn-lg btn-block active disabled”  
可以在 div 元素上添加 .btn-group 类来创建按钮组。

.btn-group-lg|sm 类来设置按钮组的大小  
.btn-group-vertical 类来创建垂直的按钮组  
**内嵌按钮组及下拉菜单**

**拆分按钮下拉菜单：**

<div class="btn-group-vertical">
      <button type="button" class="btn btn-primary">Sony</button>
      <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>

14） 徽章：  
只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 span 元素上即可。  
.badge-pill 类来设置药丸形状徽章

15） 进度条：  
创建一个基本的进度条的步骤如下：  
1 添加一个带有 .progress 类的 div。  
2 接着，在上面的 div 内，添加一个带有 class .progress-bar 的空的 div。  
3 添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置

4 进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他  
5 可以使用 .progress-bar-striped 类来设置条纹进度条

6 使用 .progress-bar-animated 类可以为进度条添加动画

7 混合色彩进度条

<div class="progress">
      <div class="progress-bar bg-success" style="width:40%">
        Free Space
      </div>
      <div class="progress-bar bg-warning" style="width:10%">
        Warning
      </div>
      <div class="progress-bar bg-danger" style="width:20%">
        Danger
      </div>
    </div>

16）**Bootstrap4 分页**：

1 要创建一个基本的分页可以在 < ul> 元素上添加 .pagination 类。然后在 < li> 元素上添加 .page-item 类

2 .pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目

3 .breadcrumb 和 .breadcrumb-item 类用于设置面**包屑导航**

17）**Bootstrap4 列表组**：

1 要创建列表组，可以在 < ul> 元素上添加 .list-group 类, 在 < li> 元素上添加 .list-group-item 类  
2 要创建一个链接的列表项，可以将 < ul> 替换为 < div> ， < a> 替换 < li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类  
3 列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light

18）**Bootstrap4卡片：**

1 可以通过Bootstrap4的.card与.card-body类来创建一个简单的卡片  
2 .card-header类用于创建卡片的头部样式。card-footer类用于创建卡片的底部样式  
3 Bootstrap 4提供了多种卡片的背景颜色类：.bg-primary， .bg-success，.bg-info，.bg-warning，.bg-danger，.bg-secondary，.bg-dark和.bg-light  
4 .card-title设置卡片标题，.card-body设置卡片正文内容，.card-link链接设置颜色，  
可以给 < img>添加.card-img-top（图片在文字上方）或.card-img-bottom（图片在文字下方来设置图片卡片  
如果图片要设置为背景，可以使用.card-img-overlay类

19）**Bootstrap4 下拉菜单：**

1 .dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。

< div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类

2 .dropdown-divider 类用于在下拉菜单中创建一个水平的分割线  
3 .dropdown-header 类用于在下拉菜单中添加标题  
4 如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类  
5 如果你希望下拉菜单向上弹出，可以将 < div> 元素的 class=“dropdown” 替换为 “dropup”  
6 我们可以在按钮中添加下拉菜单

20）**Bootstrap4 折叠：**  
1 .collapse 类用于指定一个折叠元素 (实例中的 < div>); 点击按钮后会在隐藏与显示之间切换。

控制内容的隐藏与显示，需要在 < a> 或 < button> 元素上添加 data-toggle=“collapse” 属性。 data-target="\#id" 属性是对应折叠的内容 (< div id=“demo”>)。

注意: < a> 元素上你可以使用 href 属性来代替 data-target 属性  
2 默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示  
3 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个简单的手风琴效果。

20）**Bootstrap4 导航**

1 如果你想创建一个简单的水平导航栏，可以在 < ul> 元素上添加 .nav类，在每个 < li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类  
2 .justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐  
3 .flex-column 类用于创建垂直导航  
4 使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记  
5 .nav-pills 类可以将导航项设置成胶囊形状。  
6 .nav-justified 类可以设置导航项齐行等宽显示。  
7 选项卡下拉菜单

<ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

8 动态选项卡  
如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle=“tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

9 胶囊状动态选项卡  
胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle=“pill”

<html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>胶囊选项卡切换</h2>
      <br>
      
      <ul class="nav nav-pills" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
        </li>
      </ul>
    
      
      <div class="tab-content">
        <div id="home" class="container tab-pane active"><br>
          <h3>HOME</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="container tab-pane fade"><br>
          <h3>Menu 1</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="container tab-pane fade"><br>
          <h3>Menu 2</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
      </div>
    </div>
    
    </body>
    </html>

21）**Bootstrap4 导航栏：**

1 导航栏一般放在页面的顶部。

我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 < ul> 元素并添加 class=“navbar-nav” 类。 然后在 < li> 元素上添加 .nav-item 类， < a> 元素上使用 .nav-link 类

2 通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏  
3 可以使用以下类来创建不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。  
4 激活和禁用状态: 可以在 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。  
5 .navbar-brand 类用于高亮显示品牌/Logo  
6 如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。

7 **折叠导航栏**  
通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。  
要创建折叠导航栏，可以在按钮上添加 class=“navbar-toggler”, data-toggle=“collapse” 与 data-target="\#thetarget" 类。然后在设置了 class=“collapse navbar-collapse” 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id  
8 导航栏的表单 < form> 元素使用 class=“form-inline” 类来排版输入框与按钮  
9 你也可以使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签  
10 使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样  
11 使用 .fixed-top 类来实现导航栏的固定  
12 .fixed-bottom 类用于设置导航栏固定在底部

22）**Bootstrap4表单**  
表单元素< input>，< textarea>，和 < select> elements在使用.form-control类的情况下，宽度都是设置为100％。

Bootstrap4表单布局  
堆叠表单（全屏宽度）：垂直方向

<!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>堆叠表单</h2>
      <form>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Remember me
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    
    </body>
    </html>

内联表单：水平方向  
注意：在屏幕宽度小于576px时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

内联表单需要在元素上添加 .FORM内联类

Bootstrap 实例

## 内联表单 ##

屏幕宽度在大于等于 576px 时才会水平显示。如果小于 576px 则会生成堆叠表单。

<form class="form-inline">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Remember me
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    
    </body>
    </html>

23）**Bootstrap4 表单控件**  
Bootstrap4 支持以下表单控件：

input  
textarea  
checkbox  
radio  
select  
Bootstrap Input  
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

> 注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示

<h2>表单控件: textarea</h2>
      <p>以下实例演示了 textarea 的样式。</p>
      <form>
        <div class="form-group">
          <label for="comment">评论:</label>
          <textarea class="form-control" rows="5" id="comment"></textarea>
        </div>
      </form>
    </div>
    
    
    
     <h2>表单控件: input</h2>
      <p>以下实例使用两个 input 元素，一个是 text，一个是 password ：</p>
      <form>
        <div class="form-group">
          <label for="usr">用户名:</label>
          <input type="text" class="form-control" id="usr">
        </div>
        <div class="form-group">
          <label for="pwd">密码:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
      </form>
    </div>
    
    
    
    <h2>表单控件: checkbox</h2>
      <p>以下实例包含了三个选项。最后一个是禁用的：</p>
      <form>
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input" value="">Option 1
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input" value="">Option 2
          </label>
        </div>
        <div class="form-check disabled">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input" value="" disabled>Option 3
          </label>
        </div>
      </form>
    </div>

使用 .form-check-inline 类可以让选项显示在同一行上：

<div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">Option 1
      </label>
    </div>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">Option 2
      </label>
    </div>
    <div class="form-check form-check-inline disabled">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="" disabled>Option 3
      </label>
    </div>

单选框

<div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>Option 3</label>
    </div>

使用 .radio-inline 类可以让选项显示在同一行上：

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
    <label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
    <label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

Bootstrap select 下拉菜单