1.前言
如果不了解Bootstrap或者想快速入门Bootstrap的小伙伴可以点击下方链接进行学习(转自B站黑马视频)
189-Bootstrap-体验_哔哩哔哩_bilibili
想详细深入了解学习的话可以去菜鸟教程,链接如下:
以下内容是我自己对Bootstrap的理解以及使用方法,希望可以帮助大家!
2.Bootstrap引用方法
(1)Bootstrap5的中文官网
Bootstrap 入门 · ootstrap v5 中文文档 v5.3 | Bootstrap 中文网
(2)引用方法一:下载包文件
进入后,点击左边导航栏的下载,有两种下载文件,我们开发下载上边的文件就行,如对源码感兴趣可以选择下载下边的文件。
文章末尾,我会分享我已经下载好的Bootstrap开发使用到的包文件,包含字体图标、CSS和JS文件,开发直接引用即可。
上边文件包下载好后得到一个压缩包,里边包含了CSS文件夹和JS文件夹解压,开发时只需要
引用 bootstrap.min.css和bootstrap.min.js 这两个文件即可。
(3)引用方法二(推荐):在线使用
CSS引入
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
JS引入
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
3.Bootstrap使用示例
其实Bootstrap使用起来特别简单,只需要去Bootstrap5的官网找到你想要实现的效果,然后把对应的代码粘贴到你的项目中就可实现css和JS的精美效果。
就拿按钮(css)和轮播图(JS)来举例:
(1)按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap使用</title>
<!-- 引入bootstrap的css文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: rgb(218, 192, 255);
padding-top: 15rem;
margin-left: 400px;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</body>
</html>
效果图如下:
是不是很简单就引入精美的按钮样式。
(2)轮播图
轮播图的实现效果也一样,首先在侧边栏中找到Carousel,找到一个自己喜欢的轮播图样式,复制粘贴官网提供的代码,然后引用到自己的项目中,除此之外,还要引入JS文件和CSS文件(上边有)。我以下面这种样式为例实现简单的轮播图并加以修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap使用</title>
<!-- 引入bootstrap的css文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: rgb(218, 192, 255);
}
</style>
</head>
<body>
<!-- 轮播图 -->
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<!-- 多添加了几张就还要添加按钮 -->
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/banner_1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/banner_2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/banner_3.jpg" class="d-block w-100" alt="...">
</div>
<!-- 多添加一张轮播图 -->
<div class="carousel-item">
<img src="./images/banner_4.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</html>
对原版的样式进行二次加工修改 。比如在原先的基础上,把三张图片变为四张图片,就要添加一个div和button按钮,如下所示:
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
<!-- 多添加一张轮播图 -->
<div class="carousel-item">
<img src="./images/banner_4.jpg" class="d-block w-100" alt="...">
</div>
使用Bootstrap开发轮播图就是这么简单高效, 当然也不止这些,还有许多弹窗、表单和表格等都可以引用。
4.字体图标引用方法
下面是官网链接:
Bootstrap 图标库 · Bootstrap 官方开源图标(icon)库
学习链接:(视频来自B站黑马)
194-Bootstrap-字体图标_哔哩哔哩_bilibili
(1)方法一:下载包文件
打开官网链接,点击下方的安装
下载下方这个压缩包就是图标库了
(2)方法二:在线引用链接
(这两个链接都可以)
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
5.字体图标使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标</title>
<!-- 引入字体文件 -->
<!-- <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css"> -->
<!-- 字体图标库的引入关键网站 -->
<!-- <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
/* 2.设置样式 */
.bi-android2 {
font-size: 100px;
color: green;
}
</style>
</head>
<body>
<!-- 1.引入所要的图标 -->
<i class="bi-android2"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
<!-- 只要类名带有bi,就可以使用图标 -->
<span class="bi bi-4-circle-fill" style="font-size: 2rem;"></span>
</body>
</html>
运行效果:
6.总结
Bootstrap是一个来自Twitter的前端开发框架,它基于HTML、CSS和JavaScript,以其简洁灵活的特性使得Web开发更加快捷。
-
基本结构:
- 网格系统:Bootstrap使用12列网格布局,可以快速构建响应式布局。通过添加class到HTML元素上,可以指定元素在不同屏幕宽度下的列数和偏移量。
- CSS样式:Bootstrap包含了大量的预设CSS样式,如排版、颜色、按钮、表单等,可以快速地为网页添加统一的样式。
- JavaScript插件:Bootstrap还集成了大量的JavaScript插件,如轮播、模态框、下拉菜单等,可以实现丰富的交互效果,提升用户体验。
-
常用类:
- 文本:Bootstrap提供了多种文本样式类,如对齐方式(text-left、text-center、text-right等)、文本颜色(text-muted、text-primary等)和背景颜色(bg-muted、bg-primary等)。
- 容器属性:如flex-direction和flex-wrap,用于控制元素在页面中的布局方向。
-
常用组件:
- 导航条:Bootstrap提供了丰富的导航条样式,如默认导航条、固定导航条、内嵌式导航条等。
- 按钮:Bootstrap的按钮样式非常丰富,包括不同的大小、颜色和样式。
- 表单:Bootstrap还包含了许多预设的表单样式和组件。
-
使用方法:
- 栅格系统:通过添加class到HTML元素上,可以很容易地指定元素在不同屏幕宽度下的列数和偏移量。
- CSS组件:只需要在HTML元素上添加相应的class,即可使用Bootstrap的CSS组件。
- JavaScript插件:在HTML文件中引入相应的JavaScript文件,并按照文档中的说明使用即可。
-
响应式布局:Bootstrap的响应式布局使得同一套页面可以兼容不同分辨率的设备。
-
主题定制:Bootstrap提供了多种主题,可以通过覆盖默认变量或修改源码进行个性化定制。此外,还可以使用第三方工具如Bootstrap Studio进行可视化定制。
7.资料分享
链接:https://pan.baidu.com/s/1_KHFWeZJ0h5f2KLWVUUPjg?pwd=as3r
提取码:as3r
文件目录:
引用方法:
<!-- 引入字体图标文件 -->
<link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
<!-- 引入bootstrap的css文件 -->
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<!-- 引入bootstrap的js文件 -->
<script src="./Bootstrap/js/bootstrap.min.js"></script>
具体引用的路径还是要根据实际的文件目录进行引用,这里仅提供参考。
第一篇博客文章,有问题欢迎各位指正!