bootstrap4.0

时间：2023-03-08 23:05:25
bootstrap4.0

1.CDN库引用：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

2.关闭按钮：

<div class="alert alert-warning alert-dismissible fade show" role="alert">

<strong>Holy guacamole!</strong> You should check in on some of those fields below.

  <button type="button" class="close" data-dismiss="alert" >

  <span aria-hidden="true">&times;</span>

  </button>

  <button type="button">aaaa</button>

  </div>
  • 在关闭按钮上，添加data-dismiss="alert"触发JavaScript功能的属性。确保使用该<button>元素在所有设备上正确的行为

3.警报：

<button type="button" class="btn btn-primary">

Notifications

<span class="badge badge-light">3</span>

<span class="sr-only">unread messages</span>

</button>

4.各种徽章图标：

<span class="badge badge-pill badge-primary">Primary</span>

<span class="badge badge-pill badge-secondary">Secondary</span>

<span class="badge badge-pill badge-success">Success</span>

<span class="badge badge-pill badge-danger">Danger</span>

<span class="badge badge-pill badge-warning">Warning</span>

<span class="badge badge-pill badge-info">Info</span>

<span class="badge badge-pill badge-light">Light</span>

<span class="badge badge-pill badge-dark">Dark</span>

5.链接徽章：

<a href="#" class="badge badge-primary">Primary</a>

<a href="#" class="badge badge-secondary">Secondary</a>

<a href="#" class="badge badge-success">Success</a>

<a href="#" class="badge badge-danger">Danger</a>

<a href="#" class="badge badge-warning">Warning</a>

<a href="#" class="badge badge-info">Info</a>

<a href="#" class="badge badge-light">Light</a>

<a href="#" class="badge badge-dark">Dark</a>

6.导航栏炫酷标签：

<nav aria-label="breadcrumb" role="navigation">

  <ol class="breadcrumb">

    <li class="breadcrumb-item active" aria-current="page">Home</li>

  </ol>

</nav>

<nav aria-label="breadcrumb" role="navigation">

  <ol class="breadcrumb">

    <li class="breadcrumb-item"><a href="#">Home</a></li>

    <li class="breadcrumb-item active" aria-current="page">Library</li>

  </ol>

</nav>

<nav aria-label="breadcrumb" role="navigation">

  <ol class="breadcrumb">

    <li class="breadcrumb-item"><a href="#">Home</a></li>

    <li class="breadcrumb-item"><a href="#">Library</a></li>

    <li class="breadcrumb-item active" aria-current="page">Data</li>

  </ol>

</nav>

aria-label属性:如果我们没有给输入框设置label时，当其获得焦点时，屏幕阅读器会读出aria-label属性的值，aria-label不会在视觉上呈现效果

role属性：

（1）、role是HTML5的标签属性，可以用于标识一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别。简单的说，role是为了给一些特定的浏览工具，比如盲文浏览工具识别

（2)、下面有其他案例：

Eg1:<div role="button"></div> ，把div元素转换为button按钮功能使用；
Eg2:<div role="navigation"></div>，把div元素转换为navigation导航功能使用；
Eg3:<div role="checkbox" aria-checked="checked"></div>，把div元素转换为checkbox复选框功能使用；
Eg4:<a role="button" class="btn btn-default" href="#" >链接</a>，把a链接元素转换为button按钮功能使用。

7.各种类型button：

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

8.轮廓button：

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>

<button type="button" class="btn btn-outline-success">Success</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-info">Info</button>

<button type="button" class="btn btn-outline-light">Light</button>

<button type="button" class="btn btn-outline-dark">Dark</button>

9.禁用button：

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

10.复选框：

<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-secondary active">

    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)

  </label>

  <label class="btn btn-secondary">

    <input type="checkbox" autocomplete="off"> Checkbox 2

  </label>

  <label class="btn btn-secondary">

    <input type="checkbox" autocomplete="off"> Checkbox 3

  </label>

</div>

data-toggle理解:

<a href="#tab1" data-toggle="tab">Tab1</a>

在这段代码中，data-toggle="tab"将<a>属性转换成了tab属性

11.按钮组：

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">

  <div class="btn-group mr-2" role="group" aria-label="First group">

    <button type="button" class="btn btn-secondary">1</button>

    <button type="button" class="btn btn-secondary">2</button>

    <button type="button" class="btn btn-secondary">3</button>

    <button type="button" class="btn btn-secondary">4</button>

  </div>

  <div class="btn-group mr-2" role="group" aria-label="Second group">

    <button type="button" class="btn btn-secondary">5</button>

    <button type="button" class="btn btn-secondary">6</button>

    <button type="button" class="btn btn-secondary">7</button>

  </div>

  <div class="btn-group" role="group" aria-label="Third group">

    <button type="button" class="btn btn-secondary">8</button>

  </div>

</div>

12.下拉菜单：

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">

  <button type="button" class="btn btn-secondary">1</button>

  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">

    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

      Dropdown

    </button>

    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">

      <a class="dropdown-item" href="#">Dropdown link</a>

      <a class="dropdown-item" href="#">Dropdown link</a>

    </div>

  </div>

</div>

13.Card：

<div class="card" style="width: 20rem;">

  <img class="card-img-top" src="..." alt="Card image cap">

  <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

  </div>

  <ul class="list-group list-group-flush">

    <li class="list-group-item">Cras justo odio</li>

    <li class="list-group-item">Dapibus ac facilisis in</li>

    <li class="list-group-item">Vestibulum at eros</li>

  </ul>

  <div class="card-body">

    <a href="#" class="card-link">Card link</a>

    <a href="#" class="card-link">Another link</a>

  </div>

</div>

card是一个灵活的，可扩展的内容容器。它包括页眉和页脚的选项，各种内容，上下文背景颜色和强大的显示选项。