bootstrap5基本使用

前言

bootstrap5官方文档：https://getbootstrap.com/docs/5.1
bootstrap虽然没有Vue强大，但是对于新手快速建造精美的web有着非常大的帮助。我觉得bootstrap5更像是一个组件库，对于小型网页来说非常的nice。组件库非常精美、简洁。而且上手很快。非常的高兴的是官方文档很详细，不仅有详细的api文档，而且有完善的示例，对新手来说，一个例子胜过千字文。

导入

css导入

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

js导入

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">script>

---

常用

隐藏元素：.d-none .visually-hidden

---

Flex基础

注意：flex是对容器操作的，是设置的容器，但是控制的是容器内的内容。

css原生flex布局详见： https://www.runoob.com/w3cnote/flex-grammar.html

1. 开启

display:flex;

2. 对主轴的操作：水平对齐

justify-content:center

3. 对交叉轴的操作：垂直对齐

align-items:center

---

Container

---

Gird网格

container里面自动就有gird布局，里面的row元素内的列元素没有类属性col则元素占一行的全部宽度。若有，则会按照12列原则分配列宽。

实例：

<div class="container">
  <div class="row">
    <div class="col">
      Column
    div>
    <div class="col">
      Column
    div>
    <div class="col">
      Column
    div>
  div>
div>

列的class属性解释：
.col-6一行有12列，这个列表示占6份，用来调整列元素的宽度
.col-lg-6当视图宽度大于992时，col才起作用，此列占6份。如果小于，则无效果，等于没有col这个东西。

.col-md-auto当视图大于md时，自动计算宽度，重新排列。
.row-cols-2设置在行元素中，表示一行中最多显示几个列元素。

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col">Columndiv>
  div>
div>

.row-cols-auto 设置在行元素中。列数自适应，一行能放下列元素就排，放不下就自动另起一行排。
行元素类属性也可以加断点。

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col">Columndiv>
  div>
div>

---

Columns列

垂直居中

.align-items-设置在row元素类中。后加start、center、end，分别是顶部对齐，垂直居中，底部对齐
.align-self- 与上面的不同但相似，设置在column元素类中，单独对自身垂直方向对齐

<div class="row align-items-center">
    <div class="col">
      One of three columns
    div>
    <div class="col">
      One of three columns
    div>
    <div class="col">
      One of three columns
    div>
  div>

 <div class="row">
    <div class="col align-self-start">
      One of three columns
    div>
    <div class="col align-self-center">
      One of three columns
    div>
    <div class="col align-self-end">
      One of three columns
    div>
  div>

水平居中

.justify-content-设置在row元素类中。后加start、center、end、around、between、evenly。表示左端对齐，水平居中、右端对齐、水平等距对齐，两端对齐。
.order-给列排序，可以改变列的顺序
.offset- 列偏移几个宽度。

如果水平居中无效，那么试一试class加上d-flex

---

间距margin、padding

.mx- .my- .mb- .mt- .ms- .me- 设置margin
.p- 设置padding，同上

---

Gutter列填充

特别方便、简单、规范的设置元素间距。
.gx- 水平填充
.gy- 垂直填充
.g-水平垂直都设置

---

Reboot 重置样式

---

Typography排版

设置标题大小
.h1 .h2 .h3

文本样式

列表去除样式

.list-unstyled

---

Image图片

.img-fluid响应式图片。等同于：max-width: 100%;随宽度自适应
.img-thumbnail : 给图像加上一像素的边框
对齐：.float-start
或者想居中对齐的话，给父对象设置.text-center
四角变圆：rounded

---

Table表格

标准格式

<table class="table">
  <thead>
    <tr>
      <th scope="col">#th>
      <th scope="col">Firstth>
      <th scope="col">Lastth>
      <th scope="col">Handleth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">1th>
      <td>Marktd>
      <td>Ottotd>
      <td>@mdotd>
    tr>
    <tr>
      <th scope="row">2th>
      <td>Jacobtd>
      <td>Thorntontd>
      <td>@fattd>
    tr>
    <tr>
      <th scope="row">3th>
      <td colspan="2">Larry the Birdtd>
      <td>@twittertd>
    tr>
  tbody>
table>

表格行颜色设置：.table-颜色变量
斑马纹:

<table class="table table-striped">
  ...
table>

悬停行

<table class="table table-hover">
  ...
table>

对齐：.align-

---

Figures图形组件

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.figcaption>
figure>

---

Form表单控件

标准

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email addresslabel>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.div>
  div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Passwordlabel>
    <input type="password" class="form-control" id="exampleInputPassword1">
  div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me outlabel>
  div>
  <button type="submit" class="btn btn-primary">Submitbutton>
form>

input禁用

<input ...  disabled>

input只读

<input ...  readonly>

input调整大小：.form-control-lg

input颜色选择器：

<label for="exampleColorInput" class="form-label">Color pickerlabel>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

Datalists数据列表

<label for="exampleDataList" class="form-label">Datalist examplelabel>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
datalist>

---

Nav导航栏

在这里插入代码片

Tab

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>