BootStrap--的使用方法

最新推荐文章于 2024-07-20 15:49:14 发布

¡Venceremo

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量296

点赞数

分类专栏： bootstrap 文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/126283468

版权

bootstrap 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

响应式设计的原则：

移动优先还是pc优先（目前还是移动优先比较多--手机端）
内容流
位图还是矢量图
相对单位还是固定单位

BootStrap设计目标

优先针对移动设备
浏览器支持
响应式设计

首先进行下载或者cdn引用--Download · Bootstrap v5.2 (getbootstrap.com)

最新版本——下载编译好的样式和脚本文件

然后解压缩：里面有主要有两个文件夹——一个是css样式文件,一个是js脚本文件

里面的min的意思是压缩文件的意思

在网站中如何使用BootStrap框架——要求BootStrap文件夹需要和此网页处于同一个文件夹中

如何调用BootStrap样式(table表格为例)

原来的

调用的

如何调用BootStrap组件（nav导航键——对组件有自己的样式）

如何调用BootStrap 的JS特效（导航栏）

要根据对应版本的手册进行设置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>网页</title>
	<!-- 引入BootStrap的css文件 -->
	<link rel="stylesheet" href="bootstrap-5.2.0-dist/css/bootstrap.css">
	<!-- 引入BootStrap的js文件 -->
	<script src="bootstrap-5.2.0-dist/js/bootstrap.js"></script>
</head>
<body>
<!-- 联系的函数 要根据对应版本的手册进行设置-->
<ul class="nav nav-tabs">
	<li class="nav-item">
		<a href="#home" class="nav-link" data-bs-toggle="tab">首页</a>
	</li>
	<li class="nav-item">
		<a href="#x" class="nav-link" data-bs-toggle="tab">简介</a>
	</li>
	<li class="nav-item">
		<a href="#y" class="nav-link" data-bs-toggle="tab">未来</a>
	</li>
</ul>


<div class="tab-content">
	<div id="home" class="tab-pane active">这是首页标签</div>
	<div id="x" class="tab-pane fade">这是简介标签</div>
	<div id="y" class="tab-pane fade">这是未来标签</div>
</div>

</body>
</html>