bootstrap5基本使用

Crayon鑫

发布于 2023-10-10 16:18:22

2800

发布于 2023-10-10 16:18:22

前言

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-07-28，如有侵权请联系 cloudcommunity@tencent.com 删除

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度