Bootstrap的使用方法

最新推荐文章于 2026-05-04 08:08:31 发布

原创最新推荐文章于 2026-05-04 08:08:31 发布 · 1k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#bootstrap #前端 #html

概念

Bootstrap UI框架（组件库）

文档地址

Bootstrap中文网铂特优选

Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

它是UI库（CSS库）。是web前端的响应式UI框架。我们可以使用这个UI库快速构建响应式的精美界面。

一些布局的理解

PC端布局（版心 + 通栏）设计

移动端布局（百分比）移动端设计

响应式布局

特点：一张网页在不同尺寸屏幕下可以有多个UI展示效果。

同一个页面在不同的设备屏幕下，可以有不同的UI效果，像这种展示方式叫做响应式布局。

做响应式页面，可以使用bootstrap框架提高开发效率。

响应式原理是什么

答案：媒体查询，

可以利用CSS提供的“媒体查询”属性监听页面尺寸的变化，给页面标签设置不同的样式。

/* 尺寸：
大尺寸   >= 1200                    body标签背景色为蓝色

中等尺寸 >= 640 &&  <= 1199         body标签背景色为黄绿色

小尺寸    <= 639                    标签标签背景色为粉色

*/
html , body {
    height: 100%;
}

/* 媒体查询属性 */
/*   大尺寸   >= 1200    */
@media (min-width: 1200px) {
    body {
        background-color: deepskyblue;
    }   
}

/* 中等尺寸 >= 640 &&  <= 1199 */
@media (min-width:640px) and (max-width: 1199px) {
    body {
        background-color: yellowgreen;
    }   
}

/* 小尺寸    <= 639  */
@media (max-width: 639px) {
    body {
        background-color: deeppink;
    }   
}

为什么要做响应式界面？

答案: 当前市面上，有很多类型的设备，不同设备让界面可以有不同的展示效果。（要不要做响应式布局看客户需求）

例如：台式电脑，笔记本电脑，平板，手机等等。

为了让用户页面在不同设备上有较好的体验，所以可以选择响应式布局。

但是做响应式布局，所花的时间和精力比单纯做PC端或移动端开发要多。

使用步骤

1、下载Bootstrap相关文件并引入到项目中，找到相关资源下载（Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网）。

2、在技术文档上找对应的代码，进行复制粘贴修改。

基本模板

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 1) 引入响应式CSS文件 -->
    <link rel="stylesheet" href="./libs/bootcss/css/bootstrap.css">
   <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 文件是可选的。 -->
    <!-- 2) 引入jquery文件 -->
    <script src="./libs/jquery@3.5.1/jquery-3.5.1.js"></script>
    <!-- 3) 引入bootstrap文件 -->
    <script src="./libs/bootcss/js/bootstrap.bundle.js"></script>
    
  </body>
</html>

栅格系统

.container 版心容器

.row 行容器

.col 列容器

.col-sm 小屏幕下的列容器

.col-sm-数字这个数字最大值是12 ，表示占多少比例的意思

.col-sm-4 表示在小屏幕（包括小屏幕）以上,该元素的尺寸占.row标签的 4/ 12

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <link rel="stylesheet" href="./libs/bootcss/css/bootstrap.css">
    <style>
        .row>div {
            height: 60px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container d-none">
        <h3>示例1：</h3>
        <div class="row">
            <!-- 中等屏幕以上 划分1行4列  最大数字是12-->
            <!-- 数字等于多少？ 12 / 4 = 3 -->
            <!-- div.col-md-数字  -->
            <div class="col-md-3">1</div>
            <div class="col-md-3">2</div>
            <div class="col-md-3">3</div>
            <div class="col-md-3">4</div>
            <div class="col-md-3">5</div>
        </div>
    </div>

    <div class="container d-none">
        <h3>示例2：</h3>
        <div class="row">
            <!-- 小屏幕划分 1行2列，在中等屏幕 1行3个   在大屏幕以上  1行4个 -->
            <!-- 小屏幕   12 /2 = 6 -->
            <!-- 中等屏幕 12 /3 = 4 -->
            <!-- 大屏幕   12 /4 = 3 -->
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">2</div>
            <div class="col-sm-6 col-md-4  col-lg-3">3</div>
            <div class="col-sm-6 col-md-4  col-lg-3">4</div>
        </div>
    </div>

    <div class="container">
        <h3>示例3：</h3>
        <!-- 在小屏幕以上 第一个标签占比 2/12  ,  第二个标签占比 7/12  第三个标签占比 3/12  -->
        <div class="row">
            <div class="col-sm-2">第一个</div>
            <div class="col-sm-7">第二个</div>
            <div class="col-sm-3">第三个</div>
        </div>
    </div>
</body>

</html>

全局样式

边框 .border-*

背景 .bg-*

文本 .text-*

内边距 .p-* .pt-* .pm-*

外边距 .m-* .mt-*

圆角 .rounded

浮动 .float-left .float-right .clearfix

定位 .position-*

......

<!-- 引入Bootstrap核心样式文件 -->
<link rel="stylesheet" href="./libs/bootcss/css/bootstrap.css">
<!-- 语义化 -->
<header class="bg-primary container">
    <h3 class="text-warning pt-3">LOGO</h3>
</header>

<nav class="bg-warning shadow-lg mt-3">
    <div class="d-flex flex-row bd-highlight mb-3">
        <div class="p-2 bd-highlight">首页</div>
        <div class="p-2 bd-highlight">简介</div>
        <div class="p-2 bd-highlight">案例</div>
    </div>

</nav>
<main class="bg-success container mt-3 rounded-pill">
    <button type="button" class="close" aria-label="关闭">
        <span aria-hidden="true">&times;</span>
    </button>
</main>
<footer class="bg-info container mt-3"></footer>

组件

组件：是一段有特定外观或功能的代码，可以由（HTML+CSS）或者(HTML + CSS + JS)完成。

例如：

一个按钮可以是组件

一个轮播图可以是组件

图标

<!-- 引入bootstrap图标样式文件 -->
<link rel="stylesheet" href="./libs/fontIcon/font/bootstrap-icons.css">

 <style>
     /* 字体图标 实际上就是定制的字体，可以设置font-*和color属性 */
     body {
         font-size: 70px;
         color: deepskyblue;
     }
 </style>
 
<i class="bi bi-universal-access"></i>

<i class="bi bi-tools"></i>

<i class="bi bi-balloon-heart"></i>