前端UI框架Bootstrap入门

Posted on Edited on Views:

Bootstrap 是一个前端 UI 框架，提供：

  • 快速布局
  • 常用组件
  • 响应式页面

1.引入 Bootstrap

1
2
3
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2.创建容器

1
2
3
<div class="container">
    内容
</div>

常用：

  • container：固定宽度
  • container-fluid：全屏宽度

3.使用栅格布局

Bootstrap 采用 12列布局：

1
2
3
4
<div class="row">
    <div class="col-6">左</div>
    <div class="col-6">右</div>
</div>

响应式：

1
2
3
<div class="col-12 col-md-6">
    内容
</div>

4.使用组件

按钮：

1
2
3
<button class="btn btn-primary">
按钮
</button>

卡片：

1
2
3
<div class="card">
内容
</div>

表单：

1
<input class="form-control">

Bootstrap = 栅格布局 + CSS组件 + 工具类，快速搭建响应式页面。