首页 前端知识 Npm BootStrap布局

Npm BootStrap布局

2024-05-30 10:05:02 前端知识 前端哥 39 443 我要收藏

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
      
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10057.html
标签
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!