01-11NodeJS_代码007

本文介绍: 通过.navbar属性可以创建一个标准的导航栏，若要创建响应式的导航栏，可以在.navbar属性的基础上添加.navbar-expand-xxl|xl|lg|md|sm来创建，大屏幕水平铺开，小屏幕垂直堆叠。Boostrap为开发者提供了很多功能，其中常用的有：颜色、列表、表格、图像、按钮、边框、边距、字体图标、导航、下拉菜单、Flex布局、表单、分页、卡片等。导航栏上的选项使用ul元素并添加.navbar-nav属性，然后在li元素上添加.nav-item属性，a标签上使用.nav-link属性。

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引入

<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>


<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"> 
		
        <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">
        
		<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">
        
		<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>
// 折叠导航栏就是在折叠的基础上加上响应式，也就是响应式导航栏