本文介绍了NodeJS的基本概念、单线程异步I/O特性，以及如何在Node中使用NPM进行包管理。随后详细讲解了Bootstrap，包括前端框架的作用、响应式设计、网格系统、导航组件和折叠导航栏的实现方法。最后提供了相关资源链接。
- NodeJS
- Npm
- Bootstrap
NodeJS
概念：NodeJS是JavaScript的运⾏环境: node xxx，主要在Windows、Linux、Unix、MacOSX等不同平台上运行
一、特点：
- 单线程
- 异步IO
- 跨平台
- 事件驱动
- 能让JS脱离浏览器执行
- 可以开发后端程序
二、测试：
安装之后可以再cmd⾥测试：
- node -v 如果找不到命令，一般就是环境变量的问题
- npm -v
Npm
概念：在NodeJs中内置了npm，npm(node package manager)是node包管理器/工具。
作用：可以很轻松的从远程仓库下载所需要的js插件或前端框架
一、Npm常用命令：
- npm init -y 将当前项⽬交给npm管理(初始化设置)
- npm view 模块名/包名 packages - 指定版本需要带@版本号：查看当前模块的版本
- npm install/i 模块名/包名 [-g]：安装,注意【-g是可选的，代表全局安装，正常组件不⽤写】
- npm list/ls：查看安装了那些模块
- npm uninstall 模块名/包名：卸载
Bootstrap
概念：Bootstrap是⼀个⽤于快速开发web应⽤程序和⽹站的前端框架。(Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简洁灵活) 经过编译的CSS和JS
- boostrap是⼀个前端ui(界⾯)框架
作用：
- 让web开发更迅速、简单
- 可以开发响应式页面
响应式：
概念：响应式设计应该以移动优先，在设计之初就应该以移动端⽹站为设计⽬标，然后再考虑如何在桌⾯
端布局
注意：
像百度、淘宝之类的⼤公司⽹⻚不使⽤响应式，⽽是独⽴开发⼀套⼿机⻚⾯(有钱任性)
⼀般⽹站的交互很少，仅仅⽤于信息展示和获取以及点个赞什么的。需要写的兼容性代码很
少，⾮常适合做成响应式
作用：
● 让web开发更迅速简单
● 可以开发响应式⻚⾯（⻚⾯⾃适应屏幕⼤⼩）
一、使用方法
BootStrap下载
1. 通过nodeJs下载，⽤npm npm install/i 需要下载的框架 2. 通过官⽹下载BootStrap引入
<!-- cdn在线引入：必须联网才能使用 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <!-- w3school在线引入：最新编译并压缩的 CSS --> <link href="https://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet"/> <script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script> <!-- 引入本地下载/安装的文件 --> <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>布局容器:容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容
Bootstrap 需要一个容器元素来包裹网站的内容
// 1 .container 类用于固定宽度并支持响应式布局的容器 // 2 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器 // 注意：.container类用于创建固定宽度的响应式页面。但宽度 (max-width) 会根据屏幕宽度同比例放大或缩小
Bootstrap网格系统（Grid System） 网格系统也称之为栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，而无需指定宽度，我们也可以根据自己的需要定义列数
Bootstrap5的网格系统是响应式的，列会根据屏幕大小自动重新排列。请确保每一行中的列的总和等于或小于12。否则多出来的会挤到第二行去
工作原理： 网格系统通过一系列包含内容的行和列来创建页面布局
- 行必须放置在.container的class内，以便获得适当的对齐（alignment）和内边距（padding）
- 使用行来创建列的水平组
- 内容应该放置在列内，且唯有列可以是行的直接子元素
- 预定义的网格类，比如 .row 和 .col-md-4，可用于快速创建网格布局
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-md-4
- 网格系统有6类
.col- (超小型设备 - 屏幕宽度小于 576px)
.col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
.col-md- (中型设备 - 屏幕宽度等于或大于 768 像素)
.col-lg- (大型设备 - 屏幕宽度等于或大于 992 像素)
.col-xl- (xlarge 设备 - 屏幕宽度等于或大于 1200px)
.col-xxl- (xxlarge 设备 - 屏幕宽度等于或大于 1400px)网格的基本结构：
<div class="container"> // 布局容器：用于固定宽度并支持响应式布局的容器 <div class="row"> <!-- xs/sm/md/lg/xl/xxl屏幕大小，一般用md（电脑屏幕大小）。n只能是1-12之间的整数 --> <div class="col-xs/sm/md/lg/xl/xxl-n"></div> <div class="col-xs/sm/md/lg/xl/xxl-n"></div> </div> <div class="row">...</div> </div>注：网格嵌套之后还是分为12格格子
多屏幕设置：
- 对所有人隐藏 .d-none
- 在 xs 上隐藏 .d-none .d-sm-block
- 隐藏在 sm .d-sm-none .d-md-block
- 在 md 上隐藏 .d-md-none .d-lg-block
- 隐藏在 lg 上 .d-lg-none .d-xl-block
- 在 xl 上隐藏 .d-xl-none
<div class="container"> <div class="row"> <!-- 在md的屏幕上，一个div占用3个网格，占1/4。在sm的屏幕上，一个div占6个网格占一半。在xs的屏幕上，一个div占12个网格，占满整行 --> <div class="col-md-3 col-sm-6 col-xs-12"> <h1>关于我们</h1> <p>关于我们关于我们关于我们关于我们关于我们</p> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h1>友情链接</h1> <p>关于我们关于我们关于我们关于我们关于我们</p> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h1>社会动态</h1> <p>关于我们关于我们关于我们关于我们关于我们</p> </div> <div class="col-md-3 col-sm-6 d-none d-sm-block"> <h1>人间冷暖</h1> <p>关于我们关于我们关于我们关于我们关于我们</p> </div> </div> </div>列偏移样式
<div class="container"> <div class="row"> <!-- 在md的宽度上，一个div占4个网格。偏移8个网格开始显示 --> <div class="col-md-4 offset-md-8" style="border: 1px solid salmon;"> <a href="#">新闻</a> <a href="#">地图</a> <a href="#">视频</a> <a href="#">贴吧</a> <a href="#">学术</a> <a href="#">儒雅的西线阳光</a> </div> </div> </div>
二、常用内容和组件
Boostrap为开发者提供了很多功能，其中常用的有：颜色、列表、表格、图像、按钮、边框、边距、字体图标、导航、下拉菜单、Flex布局、表单、分页、卡片等
导航：
- 创建基本导航：
// 要创建简单的水平菜单，可以将.nav属性添加到ul元素，然后为每个li元素添加.nav-item并将.nav-link属性添加到他们的链接元素
<nav class="container">
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">图标</a></li>
<li class="nav-item"><a class="nav-link" href="#">说明</a></li>
<li class="nav-item"><a class="nav-link" href="#">禁用</a></li>
</ul>
</nav>
- 导航对齐:
默认情况下，导航是左对齐的，可以使用flexbox的.justify-content-center属性使导航居中，添加.justify-content-end属性使导航右对齐
<ul class="nav justify-content-center"></ul>
- 禁用
<a class="nav-link disabled"></a>
- 垂直导航
<ul class="nav flex-column"></ur>
- 选项卡式导航 使用.nav-tabs属性添加到基本导航来生成选项卡式的导航，并将.active属性添加到连接元素中
<nav class="container">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">图标</a></li>
<li class="nav-item"><a class="nav-link" href="#">说明</a></li>
</ul>
</nav>
- 胶囊式导航 使用.nav-pills属性添加到基本导航来生成胶囊式导航
<nav class="container">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">图标</a></li>
<li class="nav-item"><a class="nav-link" href="#">说明</a></li>
</ul>
</nav>
导航栏:
通过.navbar属性可以创建一个标准的导航栏，若要创建响应式的导航栏，可以在.navbar属性的基础上添加.navbar-expand-xxl|xl|lg|md|sm来创建，大屏幕水平铺开，小屏幕垂直堆叠
导航栏上的选项使用ul元素并添加.navbar-nav属性，然后在li元素上添加.nav-item属性，a标签上使用.nav-link属性
- bg-color：背景变为黑色，color根据具体要使用的背景颜色进行替换
- navbar-dark：白色文本，navbar-light黑色文本颜色
- fixed-top：将导航栏固定在顶部，导航栏默认占整个屏幕宽度，fixed-bottom固定在页面底部
- navbar-brand：链接元素高亮，一般用于选中效果
- disabled：禁用链接元素
折叠导航栏:
折叠：Bootstrap折叠插件基本上需要两个元素才能正常工作
- collapse：指定可以折叠的元素
- data-bs-toggle：指定折叠列表
- data-bs-target：指定折叠元素的Id
- navbar-collapse：响应式导航栏
<button class="btn btn-info" data-bs-toggle="collapse" data-bs-target="#collapse-test">折叠按钮</button>
<div class="collapse" id="collapse-test">
<p>这是要显示的内容</p>
</div>
// 折叠导航栏就是在折叠的基础上加上响应式，也就是响应式导航栏
更多资源：
bootstrap5官网：https://v5.bootcss.com/
bootstrap5中文文档：https://bootstrapdoc.com/
w3school文档：https://www.w3school.com.cn/bootstrap5/index.asp
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
