学习 Bootstrap 打通任督二脉（四）

python落日圆
284 阅读8分钟

本文旨在根据官方文档全面学习 Bootstrap. 学习其目标在于为之后使用其他更加高级的组件库打下坚实的基础。同时由于 Bootstrap 在移动端的亮眼表现，到目前为止，已经是不可逾越的技术点，因此在本文中，让我们下定决心一起突破，拿下 Bootstrap, 打通任督二脉。

表格补充

给 table 标签增加所有边框：table table-bordered 其中 table 类名给了一个基本的样式。

同理，给 button 一个名为 btn 的类名也可以设置其基本样式，然后在此基础上给更多样式 btn btn-success btn-sm，修改前后的样式对比为：

image.png

使用 table-striped 增加斑马纹，防止炫目。

image.png

使用 table-hover 实现鼠标悬浮行背景变色效果。其原理为：

.table-hover {
  > tbody > tr:hover > * {
    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
    color: var(--#{$variable-prefix}table-hover-color);
  }
}

这意味着你可以修改悬浮时候的颜色。

.table-hover {
  > tbody > tr:hover > * {
    --#{$variable-prefix}table-accent-bg: blue;
    color: var(--#{$variable-prefix}table-hover-color);
  }
}

图标

所有 bootstrap 的图标都是免费的！你可以在这里找到所有的图标：Bootstrap Icons · Official open source SVG icon library for Bootstrap (getbootstrap.com)

在不同的环境下使用 icons:

image.png

安装完成后使用类名的方式在页面中加载，并保证在行内居中：

<i class="bi bi-truck-front" style="vertical-align: middle;"></i>

用的时候在 innerText 前面把上面这段直接粘贴即可。

<p class="mb-4 f3 font-weight-normal">
Free, high quality, open source icon library with over 2,000 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without <a href="https://getbootstrap.com/">Bootstrap</a> 
<i class="bi bi-truck-front"></i>in any project.
</p>

表单

使用 form-control 这个类名给表单元素一个基本的样式。同理给 label 标签一个 form-label 获得最基本的样式。或者给 select 标签一个 form-select.

image.png

如果你想要让表单只展示信息，可以使用：form-control-plaintext disabled 而不是 form-control, 当然可以将 disabled 换成 readonly 这样稍微弱一些，保存基本的表单样式，但不可编辑。

对于 radio 这类的组件：

image.png

image.png

radio 组以及使用 checked 做首选项：

image.png

对于 checkbox 这类的组件：

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

多选和 switch: 对于 checkbox 我们只需要添加一个类名就可以让此项变成更加具有交互效果的 switch 样式。

image.png

将可选项放置一行： 这个时候需要使用的类名为：.form-check-inline

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

关于 select 标签：

image.png

select 标签本身带有 multiple 属性，而 option 上面也可以设置 selected 作为首选项。

在 select 标签上，我们可以添加 form-select-lg form-select-sm 来修改选项中文字和图标的大小。

关于 textarea:

image.png

关于文件上传：

image.png


<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupFile01">Upload</label>
  <input type="file" class="form-control" id="inputGroupFile01">
</div>

<div class="input-group mb-3">
  <input type="file" class="form-control" id="inputGroupFile02">
  <label class="input-group-text" for="inputGroupFile02">Upload</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
</div>

<div class="input-group">
  <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>

关于 range:

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

有下面的属性可以选用：

min="0" max="5" step="0.5" disabled

表单 2

从左到右的 radio

image.png

不出意外的使用了 col row 来布局横向。 其中 col-form-label 专门用于将 label 文字和 input 表单元素居中对齐。 而 form-check form-check-input 则是为选中的 radio checkbox 特设的。

从左到右的 input

image.png

下面的示例展示在 md 之上一行两个元素，在其下一行一个 input 元素的布局方式：

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>
  • row: 设置排布方式为 flex 并 wrap
  • g-2: 设置某些 css 变量的值
  • col-md: 在 md 以上所有子元素平分一行，否则占据一行
  • form-floating: 设置为 position: relative; 一般设置在包裹一组 label+input 的外层 div 上。

Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

  • 在外面的包裹元素上添加 input-group, 而在其中的addons元素上添加 input-group-text
.input-group-text {
  display: flex;
  align-items: center;
  padding: $input-group-addon-padding-y $input-group-addon-padding-x;
  @include font-size($input-font-size); // Match inputs
  font-weight: $input-group-addon-font-weight;
  line-height: $input-line-height;
  color: $input-group-addon-color;
  text-align: center;
  white-space: nowrap;
  background-color: $input-group-addon-bg;
  border: $input-border-width solid $input-group-addon-border-color;
  @include border-radius($input-border-radius);
}

image.png

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>

<div class="input-group">
  <span class="input-group-text">With textarea</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

在addons元素中可以放一些说明，label 或者 button 之类的组件。

不一定非要添加 input-group-text, button 和 input 本来就可以放在一行：

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

image.png

浮动输入框

使用 form-floating 类名绑定在 label+input 的外层 div 上就可以实现浮动 input, 需要注意的是 input 的 placeholder 是必写的！

image.png

表单验证与错误提示

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">State</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()

image.png

折叠组件和手风琴组件

折叠组件

点击按钮或者 a 标签折叠或者展开某个元素的效果：

image.png

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

添加 collapse-horizontal 可以让被折叠的元素从左到右展开：

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

展开多个的效果：

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

相关属性和类名总结：

  • data-bs-toggle="collapse"：表示此元素可以控制其他元素的展开或者折叠
  • href="#multiCollapseExample1"：a 标签中不使用 data-bs-target 直接使用 href 表示控制的元素是谁
  • data-bs-target="#multiCollapseExample2"：控制此 id 元素的展开和折叠
  • data-bs-target=".multi-collapse"：控制此 class 的展开和折叠
  • class="collapse multi-collapse"：collapse 表示自己可折叠，multi-collapse 表示自己受控身份
  • id="multiCollapseExample1"：表示自己受控

手风琴组件

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

Emmet:

div.accordion#aE> div.accordion-item> h2.accordion-header#headingOne> button.accordion-button[type=button][data-bs-toggle=collapse][data-bs-target=#collapseOne]{Accordion Item #1} +div#collapseOne.accordion-collapse.collapse.show[data-bs-parent=#accordionExample]> div.accordion-body
  1. .accordion：表明自己是手风琴组件
  2. #aE：手风琴组件的 id 方便内部引用
  3. .accordion-item：手风琴中的一层子元素
  4. h2.accordion-header：子元素的头
  5. #headingOne：头的 id
  6. button：头上面控制折叠打开的按钮
  7. .accordion-button[type=button]：按钮上面的类和属性
  8. data-bs-toggle=collapse：表明按钮具有打开，折叠功能
  9. data-bs-target=#collapseOne：受按钮控制的元素
  10. #collapseOne：受控元素的 id
  11. .accordion-collapse：表明自己是手风琴中的受控元素
  12. .collapse：表明自己是折叠元素
  13. .show：表明受控元素当前状态
  14. data-bs-parent=#accordionExample：受控元素的组名
  15. .accordion-body：受控元素内容样式

初始状态下打开或者关闭：

  1. 如果要初始打开：则在 .accordion-collapse 旁边加上 .show 在控制打开或者关闭的 data-bs-toggle="collapse" 的类名上去掉 collapsed
  2. 如果要初始关闭：则在 .accordion-collapse 旁边去掉 .show 在控制打开或者关闭的 data-bs-toggle="collapse" 的类名上加上 collapsed

其他细节：

  • Flush: Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. 这个 attribute 添加位置是手风琴的最外层，其作用是消除背景色和外部边框，使手风琴能够更好的融入父元素中去。

  • Always Open: Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened. 也就是说 data-bs-parent 值相同的手风琴被视为一组，同组同时只能有一个打开，其他自动关闭。如果想要互相之间不影响，就删除这个 attribute 就可以了！

警告框组件

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
  </svg>
  <strong>Holy guacamole!</strong> You should check in on some of those <a href="#" class="alert-link">fields</a> below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

下面逐个分析类名和属性的作用：

  • alert：给一个警告框的基本样式
  • alert-warning：警告框的 style
  • alert-dismissible：表明是可以被关闭的警告框
  • fade：添加关闭时候的动画
  • show：配合 fade, 因为设置 fade 之后会自动关闭，所以需要 show
  • svg：直接把 svg 放进去就可以了
  • alert-link：用于警告框中的 a 标签
  • btn-close：关闭按钮
  • data-bs-dismiss="alert"：使关闭按钮起效

点击按钮弹出警告框

原理：预先设置一个 container 放置警告框组件，点击按钮的时候给里面添加一个警告框 div 即可。

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

const alertPlaceholder = document.getElementById('liveAlertPlaceholder');  
const alertTrigger = document.getElementById('liveAlertBtn');  
  
function createAlert(message, type) {  
  const wrapper = document.createElement('div');  
  wrapper.innerHTML = `<div class="alert alert-${type} alert-dismissible" role="alert">${message}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>`;  
  alertPlaceholder.append(wrapper);  
}  
  
if (alertTrigger) {  
  alertTrigger.addEventListener('click', () => createAlert('Nice, you triggered this alert message!', 'success'));  
}

徽章组件

在标题中使用会徽章

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

image.png

在按钮后面添加徽章

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

image.png

徽章一般是在右上角的

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

image.png

无内容徽章

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

image.png

背景颜色

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

胶囊徽章

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

面包屑

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

<nav aria-label="breadcrumb">
  <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">
  <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>
  • nav>ol>li
  • 在 nav 上添加 aria-label="breadcrumb"
  • 在 ol 上添加 class="breadcrumb"
  • 在 li 上添加 class="breadcrumb-item"

image.png

设置分隔符的两种方式：都是改变 --bs-breadcrumb-divider 变量的值。

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <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 style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

image.png

按钮

按钮颜色

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

使用 .text-nowrap 可以防止按钮中的文字换行。

非按钮元素

我们可以将相关的类名应用到非 button 上面去，获得相同的效果。

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

outline 按钮

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

设置按钮的大小

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

按钮置灰

对于 button 按钮，在上面添加名为 disabled 的 attribute, 而对于非 button 的按钮，需要添加 disabled 类名上去，并且设置 tabindex="-1"

具有状态的按钮

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>

image.png

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

image.png

与之相关的有：

  • 一个类名 active
  • 一个属性 data-bs-toggle="button"
  • 使用 disabled 的时候又是另一个效果

独占一行的 button

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

image.png

响应式的 button

大屏下面 flex 靠右布局；小屏独占一行的布局。这非常常见，也是我要找的效果。

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

image.png

按钮组

使用 .btn-group 可以将多个按钮成组，成组的按钮之间的空隙会被消除。并且你可以通过 active 类名来指定被激活的是组内那个按钮。

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

按钮组更上级的组织结构是 btn-toolbar 内含多个 btn-group

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-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-info">8</button>
  </div>
</div>

调节按钮组的大小

使用类名 btn-group-lg 等调节按钮组的大小。

调节按钮组的排布方式

使用类名 btn-group-vertical 可以让按钮从上到下排布。

image.png

avatar
文章
阅读
粉丝