BootStrap--的使用方法

响应式设计的原则：

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

BootStrap设计目标

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

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

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

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

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

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

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

原来的

调用的

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

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

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


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-5.2.0-dist/css/bootstrap.css">
	
	<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>

相关阅读:
论文写作——ICASSP论文写作及投稿
一款云渗透工具 - Sea Moon
Python顺序结构程序设计（湖南工业大学）
【文件I/O】标准IO：库函数
BAT027:删除当前目录指定文件夹以外的文件夹
架构师之路：中台和微服务区别
nodejs+vue+elementui高校人事管理系统
【JAVA】有关包的概念
计算机毕业设计JavaVUE商场库存管理系统(源码+系统+mysql数据库+lw文档）
Spring事务管理 | 数据库连接池流程原理分析

原文地址：https://blog.csdn.net/weixin_47295886/article/details/126283468