【Bootstrap】常用方法

基础布局

宽度

<div class="container">固定宽度</div>
<div class="container-fluid">100%宽度</div>

行列

<div class="row">
    <div class="col-xs-4 col">小于768px 手机</div>
    <div class="col-sm-4 col">大于等于768px 平板</div>
    <div class="col-md-4 col">大于等于992px 桌面显示器</div>
    <div class="col-lg-4 col">大于等于1200px 大桌面显示器</div>
</div>

行间距

<div class="container">
    <p>抵消.container的padding</p>
    <div class="row del-row"></div>
</div>

.del-row {
    margin: 0 -10px;
}

列间距

<div class="container">
    <div class="row line"></div>
</div>

.line {
    padding: 0 10px;
}

图片

<!-- 图片尺寸=手机的尺寸 -->
<img src="~@/assets/images/banner01.png" alt="" class="img-responsive">

文本

<p class="text-center">文本居中</p>
<p class="text-danger">文字红色</p>

按钮

<button class="btn">内联按钮</button>
<button class="btn btn-block">块级按钮</button>
<button class="btn btn-primary">蓝色按钮</button>
<button class="btn btn-info">浅蓝色按钮</button>
<button class="btn btn-danger">红色按钮</button>
<button class="btn well">深度按钮（视觉上的深度感）</button>

表单input

<!-- 每个input都需要使用不同id -->
<!-- width是100% -->
<input type="text" class="form-control">

表格

<!-- 奇数行灰色偶数行白色 --> 
<table class="table-striped "></table>

图标

font Awesome图标库通常写在i上。

Carousel 轮播

禁止自动播放 

data-interval="false" 

<div id="carousel" class="carousel slide" data-interval="false"></div>

data-interval="false" 不起作用，改成 data-bs-interval="false"

<div id="carousel" class="carousel slide" data-bs-interval="false"></div>