bootstrap5基本使用

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

Crayon鑫

7057人浏览 · 2022-01-29 11:28:28

Crayon鑫 · 2022-01-29 11:28:28 发布

前言

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

导入

css导入

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

js导入

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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

开启

display:flex;

对主轴的操作：水平对齐

justify-content:center

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

align-items:center

Container

container是最基本的布局。
给一个元素的class赋值为container之后，如果显示屏幕小于576，元素将要横向占满屏幕，但是大于576小于576像素的时候，宽度恒定为540,。就是说你的屏幕很宽的时候，元素永远不会横向占满整个屏幕，与边距有孔隙。但是赋值为.container-fluid的时候，元素永远横向占满屏幕，不会留有孔隙。

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">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </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">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </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

文本样式

<del><s><strong><u><em>

列表去除样式

.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">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </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 address</label>
    <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">Password</label>
    <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 out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

input禁用

<input ...  disabled>

input只读

<input ...  readonly>

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

input颜色选择器：

<label for="exampleColorInput" class="form-label">Color picker</label>
<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 example</label>
<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导航栏

导航栏控件也是“容器”，是可以自适应的控件。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">&#x1F6BD;导航栏名称</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">链接1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">链接2</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        下拉项
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">项1</a></li>
                        <li><a class="dropdown-item" href="#">项2</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">项3</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled">禁止按下</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
                <button class="btn btn-outline-success " type="submit">搜索</button>
            </form>
        </div>
    </div>
</nav>

Tab

<ul class="nav nav-tabs">

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">选项1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">选项2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">选项3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled">选项4（禁止状态）</a>
    </li>
</ul>

UI小组件

1、折叠框（Accordion）

使用折叠框组件需要在div元素中添加class属性：.accordion

<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">
                折叠项1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
            data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>1、</strong> 这是一个内容
            </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">
                折叠项2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
            data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>2、</strong>这是第二个内容
            </div>
        </div>
    </div>
</div>

2、按钮（button）

想要使用bootstrap的按钮样式，只需在button元素中添加class属性：.btn

<button type="button" class="btn btn-primary">按钮主样式</button>

控制颜色需要改变class属性

btn-primary，btn-secondary，btn-danger，btn-warning，btn-info，btn-light，btn-dark

按钮样式

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

一文解读GaussDB(DWS)监控运维诊断优化能力

华为开发者空间

GaussDB技术解读——GaussDB架构介绍（四）

华为开发者空间

华为云数据仓库专业级开发者认证重磅发布

华为开发者空间

所有评论(0)

查看更多评论

Crayon鑫

@Crayonxin2000

已为社区贡献4条内容

bootstrap5基本使用

Crayon鑫

目录

前言

导入

常用

Flex基础

Container

Gird网格

Columns列

垂直居中

水平居中

间距margin、padding

Gutter列填充

Reboot 重置样式

Typography排版

文本样式

列表去除样式

Image图片

Table表格

Figures图形组件

Form表单控件

Nav导航栏

Tab

UI小组件

1、折叠框（Accordion）

2、按钮（button）

所有评论(0)

Crayon鑫