Npm+BootStrap布局

Npm+BootStrap布局

NodeJs

  • NodeJs概述

    Node.js是Ryan Dahl于2009年5月基于Chrome V8引擎构建的一个开源和跨平台的JavaScript运行环境。主要在Windows、Linux、Unix、MacOSX等不同平台上运行

  • NodeJs意义

    Node.js是一个javascript运行环境,它使得javascript可以脱离浏览器执行【node xxx.js】。不仅如此NodeJs也可以让javascript开发后端程序,实现几乎其他后端语言实现的所有功能。可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐

    例如javascript本身无法操作文件系统,但是使用Node.js后就可以操作文件系统了

  • NodeJs特点

    • 单线程
    • 异步IO
    • 跨平台
    • 事件驱动
  • Npm

    在NodeJs中内置了npm,npm(node package manager)是node包管理器/工具。使用npm可以很轻松的从远程仓库下载所需要的js插件或前端框架。开发人员可以遵循Common.js规范来编写Node.js模块,然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。

Bootstrap

  • BootStrap概述

    Bootstrap是一个用于快速开发web应用程序和网站的前端框架。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简洁灵活

    Bootstrap5是目前的最新版本,兼容所有主流浏览器(IE除外),并且不依赖与jQuery,支持Flex弹性布局和Grid网格布局

    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。

bootstrap5官网:https://v5.bootcss.com/bootstrap5中文文档:https://bootstrapdoc.com/w3school文档:https://www.w3school.com.cn/bootstrap5/index.asp
  • BootStrap作用

    1. 让web开发更迅速、简单
    2. 可以开发响应式页面
    
  • BootStrap引入

    要使用bootstrap必须要引入,不同的版本引入文件大同小异。bootstrap5需要引入:bootstrap.min.css和bootstrap.bundle.min.js

    <!-- 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 需要一个容器元素来包裹网站的内容

    我们可以使用以下两个容器类

    • .container 类用于固定宽度并支持响应式布局的容器
    • .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器

    注意:.container类用于创建固定宽度的响应式页面。但宽度 (max-width) 会根据屏幕宽度同比例放大或缩小

    超级小屏幕 <576px小屏幕 ≥576px中等屏幕 ≥768px大屏幕 ≥992px特大屏幕 ≥1200px超级大屏幕 ≥1400px
    max-width100%540px720px960px1140px1320px
  • 网格系统

    • 什么是Bootstrap网格系统(Grid System)

    网格系统也称之为栅格系统

    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列,而无需指定宽度

    我们也可以根据自己的需要定义列数。Bootstrap5的网格系统是响应式的,列会根据屏幕大小自动重新排列。请确保每一行中的列的总和等于或小于12。否则多出来的会挤到第二行去

    • Bootstrap网格系统的工作原理

      网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:

      1. 行必须放置在.container的class内,以便获得适当的对齐(alignment)和内边距(padding)
      2. 使用行来创建列的水平组
      3. 内容应该放置在列内,且唯有列可以是行的直接子元素
      4. 预定义的网格类,比如 .row 和 .col-md-4,可用于快速创建网格布局
      5. 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个.col-md-4
      6. 网格系统有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>
      
    • 多屏幕设置

      自 Bootstrap V4 以来,hidden-X 类已被删除。为了根据列宽隐藏列,请使用 d-none d-X-block。基本上,您只需关闭要隐藏的尺寸的显示,然后设置更大尺寸的显示即可

      • 对所有人隐藏 .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占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>
      

      4. 常用内容和组件

      Boostrap为开发者提供了很多功能,其中常用的有:颜色、列表、表格、图像、按钮、边框、边距、字体图标、导航、下拉菜单、Flex布局、表单、分页、卡片等。接下来我们直接通过官网学习,并在综合练习中去学习这些功能。也可以在w3school中学习:https://www.w3school.com.cn/bootstrap5/bootstrap_get_started.asp

      具体内容查看:

      bootstrap5官网:https://v5.bootcss.com/bootstrap5中文文档:https://bootstrapdoc.com/w3school文档:https://www.w3school.com.cn/bootstrap5/index.asp
      

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/614111.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jupyter notebook 配置conda 虚拟环境python

conda创建python环境 conda create -n openvoice python3.9 激活环境 source activate openvoice 在虚拟环境中安装ipykernel pip install ipykernel 添加虚拟环境进到 jupyter notebook python -m ipykernel install --user --name openvoice --display-name openvoice …

Springboot+vue的毕业论文管理系统(有报告)。Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的毕业论文管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的毕业论文管理系统&#xff0c;采用M&#xff08;model&…

QT延时五种实现方法

QT中没有提供专用延时函数&#xff0c;但有多种实现方法&#xff0c;各有特点&#xff0c;如下所示&#xff1a; 一.阻塞方式 1.多线程程序使用QThread::sleep()或者QThread::msleep()或QThread::usleep()或QThread::wait()进行延时处理。 Sleep不会释放对象锁&#xff0c;其…

第3章:python的判断语句

学一门语言&#xff0c;无外乎多敲&#xff0c;多用&#xff0c;记得回顾昨天写过的代码呀 布尔类型和比较运算符 布尔类型的定义 使用比较运算符进行比较运算得到布尔类型的结果 比较运算符 """ 演示布尔类型的定义 以及比较运算符的应用 ​ """…

并发前置知识一:线程基础

一、通用的线程生命周期&#xff1a;“五态模型” 二、java线程有哪几种状态&#xff1f; New&#xff1a;创建完线程Runable&#xff1a;start(),这里的Runnable包含操作的系统的Running&#xff08;运行状态&#xff09;和Ready&#xff08;上面的可运行状态&#xff09;Blo…

vscode配置Todo Tree插件

一、在VSCode中安装插件Todo Tree ​​​​ 二、按下快捷键ctrlshiftP&#xff0c;输入setting.jspn 选择相应的配置范围&#xff0c;我们选择的是用户配置 Open User Settings(JSON)&#xff0c;将以下代码插入其中。 {//todo-tree 标签配置从这里开始 标签兼容大小写字母(…

强化学习9——免模型预测算法介绍(蒙特卡洛方法和时步差分方法)

对于大部分情况来说&#xff0c;环境是未知的&#xff0c;也就是说状态转移概率未知&#xff0c;对于这种情况的算法称为免模型预测算法。免模型算法与环境不断交互学习&#xff0c;但是需要大量的运算。 蒙特卡洛方法 蒙特卡罗方法通过重复随机抽选&#xff0c;之后运用统计…

Phaser详解

Phaser是一个相对较新且功能强大的同步原语&#xff0c;它于Java 7中引入&#xff0c;用于协调并行任务的执行。与CyclicBarrier和CountDownLatch等传统的同步工具相比&#xff0c;Phaser提供了更灵活和更高级的功能&#xff0c;特别是在处理动态和可变的并行任务集合时。 1.P…

Python-基础语法

标识符 第一个字符必须是字母表中字母或下划线 _ 。标识符的其他的部分由字母、数字和下划线组成。标识符对大小写敏感。在 Python 3 中&#xff0c;可以用中文作为变量名&#xff0c;非 ASCII 标识符也是允许的了。 python保留字 保留字即关键字&#xff0c;我们不能把它们用…

MATLAB全局最优搜索函数:GlobalSearch函数

摘要&#xff1a;本文介绍了 GlobalSearch 函数的使用句式&#xff08;一&#xff09;、三个运行案例&#xff08;二&#xff09;、 GlobalSearch 函数的参数设置&#xff08;三&#xff09;、GlobalSearch 注意事项及必要说明&#xff08;五&#xff09;等内容。详细介绍如下&…

超维空间S2无人机使用说明书——11、使用3维激光雷达实现ROS无人机的精准定位

引言&#xff1a;在工程应用中&#xff0c;往往需要在没有GPS信号的情况下实现无人机的资助或者稳定的飞行。实现这个的基础就是定位&#xff0c;有了准确的定位信息&#xff0c;无人机才能稳定的飞行。性比较于视觉定位效果&#xff0c;目前3D雷达相对更加稳定&#xff0c;视觉…

FineBI实战项目一(18):每小时上架商品个数分析开发

点击新建组件&#xff0c;创建每小时上架商品个数组件。 选择线图&#xff0c;拖拽cnt&#xff08;总数&#xff09;到纵轴&#xff0c;拖拽hourStr到横轴。 修改横轴和纵轴的文字。 调节连线样式。 添加组件到仪表板。

【LeetCode】59. 螺旋矩阵II(中等)——代码随想录算法训练营Day02

题目链接&#xff1a;59. 螺旋矩阵II 题目描述 给你一个正整数 n &#xff0c;生成一个包含 1 到 n 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]] 示例 …

攒机到底能省多少钱?

昨天弄好了攒机配置&#xff0c;今天要求配置一些更为实用的配置&#xff0c;只是作为一般办公&#xff0c;单位买进来的计算机都是联想&#xff0c;价格普遍在7000元以上&#xff0c;出于省钱和实用目的&#xff0c;今天搭配了一个组机方案。 上面的配置对付一般办公足够&…

基于JAVA的婚恋交友网站 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 会员管理模块2.3 新闻管理模块2.4 相亲大会管理模块2.5 留言管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 会员信息表3.2.2 新闻表3.2.3 相亲大会表3.2.4 留言表 四、系统展示五、核心代码5.…

Docker 有什么优势?

Docker作为一种流行的容器化技术&#xff0c;其优势所在可以从多个维度进行详细阐述。 ![&nbsp][nbsp] 统一环境 在容器化技术成熟之前&#xff0c;软件开发过程中环境部署是一个常见的问题&#xff0c; 开发到生产的整个软件交付流程往往受到多个因素的影响。 场景描述…

Magento1.9 浏览器提示该网页无法正常运作,将您重定向的次数过多

不久前部署了一个Magento网站&#xff0c;访问时却直接打不开&#xff1a; 该网页无法正常运作 xxx.com将您重定向的次数过多 若要解决此问题&#xff0c;请尝试清除 Cookie. ERR_TOO_MANY_REDIRECTS 我的网络架构是这样的&#xff1a; 网站部署在Nginx服务器上, 做了加密…

2 快速前端开发

CSS快速入门 1.CSS案例1.1 内容回顾1.2 案例&#xff1a;二级菜单1.2.1 划分区域1.2.2 搭建骨架1.2.3 Logo区域1.2.4 菜单部分 1.3 案例&#xff1a;顶部菜单 二级菜单小结 1.4 案例&#xff1a;推荐区域1.4.1 划分区域1.4.2 搭建骨架1.4.3 案例的实现小结 2. CSS知识点2.1 ho…

登录模块的实现

一.前期的准备工作 1.页面的布局 (1)表单的校验: 利用element-ui提供的文档绑定rules规则后实现校验 (2)跨域的配置 &#xff1a; 利用proxy代理来解决跨域的问题 (3)axios拦截器的配置 两个点:1. 在请求拦截的成功回调中,如果token,因为调用其它的接口需要token才能调取。 在请…

2024.1.11 Kafka 消息队列,shell命令,核心原理

目录 一 . 消息队列 二. Kafka 三 . 启动命令 四 . Kafka的Shell 命令 五 . Kafka的核心原理 1. Topic的分区和副本机制 2 . 消息存储机制 和 查询机制 3. Kafka中生产者数据分发策略 六 . Kafka 之所以具有高速的读写性能&#xff0c;主要有以下几个原因 七. 笔记…