DX

Bootstrap 5.x

4 min read

https://getbootstrap.com/ https://getbootstrap.com/docs/5.3/getting-started/introduction/ https://bootstrap.nodejs.cn/docs/5.3/components/breadcrumb/#example

  • 所有内容的第一个容器，body标签内的全部内容。
<div class="container">
<div class="container-md">

Layout

row

网格中的一行

row                标记一行
col-md-1           占用行中1列
col-form-label     表单标签列
col-form-label-sm  表单标签列-小号

Forms

Checks & radios

https://getbootstrap.com/docs/5.3/forms/checks-radios/

col-form-label     行内表单label
col-form-label-sm  行内表单label-小字
form-control       表单input
form-control-sm    表单input-小号
form-text          表单字段说明span文本
text-small         表单字段说明span文本-小字
<div class="row g-3 align-items-center mb-3">  
    <label for="online"  
           class="col-md-1 col-form-label col-form-label-sm">线上业务</label>  
    <div class="col-md-3">  
        <select class="form-select form-select-sm" id="online" name="online">  
            <option value="true">是</option>  
            <option value="false">否</option>  
        </select>  
    </div>  
    <div class="col-md-8">  
        <span id="onlineHelpInline" class="form-text text-small">  
           该笔订单是否是线上业务  
        </span>  
    </div>  
</div>

Layout

Input group

input-group input-group-sm mb-3(margin-bottom)

<form>  
    <div class="input-group flex-nowrap input-group-sm mb-3">  
        <span class="input-group-text w-25" id="name">企业名称</span>  
        <input type="text" class="form-control" aria-label="name" aria-describedby="addon-wrapping">  
    </div>  
    <div class="input-group flex-nowrap input-group-sm mb-3">  
        <span class="input-group-text w-25" id="address">企业地址</span>  
        <input type="text" class="form-control" aria-label="address" aria-describedby="addon-wrapping">  
    </div>  
    <div class="input-group flex-nowrap input-group-sm mb-3">  
        <span class="input-group-text w-25" id="type1">类型1</span>  
        <input type="text" class="form-control" aria-label="type1" aria-describedby="addon-wrapping">  
    </div>  
    <button type="submit" class="btn btn-sm btn-primary">保存</button>  
</form>

示例

<form>  
    <div class="row g-3 align-items-center mb-3">  
        <label for="name" class="col-md-1 col-form-label col-form-label-sm">企业名称</label>  
        <div class="col-md-3">  
            <input type="text" id="name" class="form-control form-control-sm"  
                   aria-label="name"  
                   aria-describedby="name">  
        </div>  
        <div class="col-md-8">  
            <span id="nameHelpInline" class="form-text text-small">  
               请输入企业名称  
            </span>  
        </div>  
    </div>  
  
    <div class="row g-3 align-items-center mb-3">  
        <label for="address"  
               class="col-md-1 col-form-label col-form-label-sm">企业地址</label>  
        <div class="col-md-3">  
            <input type="text" id="address" class="form-control form-control-sm"  
                   aria-label="address"  
                   aria-describedby="address">  
        </div>  
        <div class="col-md-8">  
            <span id="addressHelpInline" class="form-text text-small">  
               请输入企业详细地址  
            </span>  
        </div>  
    </div>  
  
    <div class="row g-3 align-items-center mb-3">  
        <label for="type1" class="col-md-1 col-form-label col-form-label-sm">类型1</label>  
        <div class="col-md-3">  
            <input type="text" id="type1" class="form-control form-control-sm"  
                   aria-label="type1"  
                   aria-describedby="type1">  
        </div>  
        <div class="col-md-8">  
            <span id="type1HelpInline" class="form-text text-small">  
               请输入企业类型1，如：大型企业，中型企业，小型企业。  
            </span>  
        </div>  
    </div>  
  
    <div class="row ">  
        <div class="col-md-4 text-center">  
            <button type="submit" class="btn btn-sm btn-primary">保存</button>  
        </div>  
    </div>  
  
</form>

Components

Badge

https://getbootstrap.com/docs/5.3/components/badge/#examples

<div class="row">  
    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">  
        <ol class="breadcrumb">  
            <li class="breadcrumb-item">  
                <a href="/Opportunity/welcome">首页</a>  
            </li>  
            <li class="breadcrumb-item active" aria-current="page">  
                <a>订单列表</a>  
            </li>  
        </ol>  
    </nav>  
</div>

Card

https://getbootstrap.com/docs/5.3/components/card/

再card title右上角添加两个按钮

<div class="card-header d-flex justify-content-between align-items-center">  
    条件查询  
    <div>  
        <button type="submit" class="btn btn-primary btn-xs m-t-n-xs"><i  
                class="fa fa-search"></i>&nbsp;查询</button>  
        <button type="button" class="btn btn-warning btn-xs m-t-n-xs resetBtn"><i  
                class="fa fa-refresh"></i>&nbsp;重置</button>  
    </div>  
</div>

https://getbootstrap.com/docs/5.3/components/modal/#how-it-works

Offcanvas

https://getbootstrap.com/docs/5.3/components/offcanvas/

Spinners

加载框

text

每个版本的设置不一样

text-small 使用小字体
text-center 内容居中
 
# 5.3.3
fs-1...  fs-6

gutter

https://bootstrap.nodejs.cn/docs/5.3/layout/gutters/#how-they-work

spacing

设置间距 https://bootstrap.nodejs.cn/docs/5.3/utilities/spacing/

button

btn
btn-lg
btn-link
btn-light
btn-primary

label | badge

label label-default  [[灰色]]
label label-info     [[绿色]]
label label-danger   [[红色]]
label label-primary  [[深蓝色]]
label label-warning  [[橙色]]

icons

https://icons.getbootstrap.com/

table

https://getbootstrap.com/docs/5.3/content/tables/

table 
table-striped 交替颜色的
<table class="table">  
    <thead class="table-primary">  
    <tr>  
        <th scope="col">序号</th>  
        <th scope="col">类型</th>  
        <th scope="col">业务数</th>  
        <th scope="col">发生额</th>  
        <th scope="col">预计收入</th>  
    </tr>  
    </thead>  
    <tbody>  
    <tr>  
        <th scope="row">1</th>  
        <td>Mark</td>  
        <td>Otto</td>  
        <td>@mdo</td>  
        <td>@mdo</td>  
    </tr>  
    <tr>  
        <th scope="row">2</th>  
        <td>Jacob</td>  
        <td>Thornton</td>  
        <td>@fat</td>  
        <td>@fat</td>  
    </tr>  
    <tr>  
        <th scope="row">3</th>  
        <td colspan="2">Larry the Bird</td>  
        <td>@twitter</td>  
        <td>@twitter</td>  
    </tr>  
    </tbody>  
    <tfoot class="table-info">  
    <tr>  
        <th scope="col">合计</th>  
        <th scope="col"></th>  
        <th scope="col"></th>  
        <th scope="col"></th>  
        <th scope="col"></th>  
    </tr>  
    </tfoot>  
</table>

link

https://getbootstrap.com/docs/5.3/utilities/link/

pagination

https://getbootstrap.com/docs/5.3/components/pagination/

Graph View