【Bootstrap】常用方法

原创已于 2023-08-07 16:49:45 修改 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

于 2021-01-24 12:28:34 首次发布

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Bootstrap的基础布局，包括固定宽度的.container和全宽的.container-fluid，以及响应式列布局.col-*。同时讲解了行间距和列间距的设置方法，图片的响应式处理，文本样式和按钮设计。此外，还涵盖了表单input、表格样式、Font Awesome图标库的使用，以及如何创建和禁用Carousel轮播。这些内容都是Bootstrap框架中常用且重要的元素，对于构建响应式网站非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础布局

宽度

<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>