Bootstrap 源代码目录结构一览

目录

前言

Bootstrap 目录结构

Bootstrap 内容简介

Bootstrap 编译文件

CSS文件 | CSS 文件功能对比与清单

JS文件 | JS 文件功能对比与清单

Bootstrap 源码码目录 | 资源清单


前言

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为5.3 。

Bootstrap 目录结构

Bootstrap每次都会以预编译版、源代码两种形式发布。下面我们介绍两种形式的内容和结构。注意无论使用哪种形式,Bootstrap的JavaScript插件都需要jQuery。

Bootstrap 内容简介

CSS主要是bootstrap样式,JS主要记录JavaScript定义的元素操作。

bootstrap-grid:主要是bootstrap的栅格结构

bootstrap-reboot:Reboot建立在Normalize的基础上,它仅使用元素选择器提供了许多具有某种固执己见风格的HTML元素。

Bootstrap 编译文件

下载解压文件BootStrap文件包后,你会看到以下目标结构和文件列表:

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/├── bootstrap.bundle.js├── bootstrap.bundle.js.map├── bootstrap.bundle.min.js├── bootstrap.bundle.min.js.map├── bootstrap.esm.js├── bootstrap.esm.js.map├── bootstrap.esm.min.js├── bootstrap.esm.min.js.map├── bootstrap.js├── bootstrap.js.map├── bootstrap.min.js└── bootstrap.min.js.map

这是 Bootstrap 最基础的形式:直接拖入即用的编译文件,几乎能在所有Web项目中使用。其中bootstrap.*是预编译的文件(css+js)。而bootstrap.min.*是编译过且压缩后的文件(css+js),用户可以根据自己需要引用。程序目录中,还有bootstrap.*.map格式的文件,这是Source maps文件,需要在特定的浏览器开发者工具下才可用式。捆绑的JS文件(bootstrap.bundle.js 和缩小 bootstrap.bundle.min.js)包括 Popper。

*关于Source map技术可以点此了解:
什么是Source map?.Map文件是什么,它的作用是什么?JQurey中的Source map使用技术放松

CSS文件 | CSS 文件功能对比与清单

Bootstrap包含了一些选项,用于包含我们编译的部分或全部CSS。

文件布局内容组件公共样式

bootstrap.css

bootstrap.min.css

bootstrap.rtl.css
bootstrap.rtl.min.css

IncludedIncludedIncludedIncluded

bootstrap-grid.css
bootstrap-grid.rtl.css
bootstrap-grid.min.css
bootstrap-grid.rtl.min.css

只作用 grid 类不包含不包含只作用 flex 类
bootstrap-utilities.css
bootstrap-utilities.rtl.css
bootstrap-utilities.min.css
bootstrap-utilities.rtl.min.css
不包含不包含不包含包含
bootstrap-reboot.css
bootstrap-reboot.rtl.css
bootstrap-reboot.min.css
bootstrap-reboot.rtl.min.css
不包含Only Reboot不包含不包含

JS文件 | JS 文件功能对比与清单

类似地,我们可以选择包含一些或所有编译的JavaScript。

JS 文件PopperjQuery

bootstrap.bundle.js

bootstrap.bundle.min.js

包含不包含

bootstrap.js

bootstrap.min.js

不包含不包含

Bootstrap 源码码目录 | 资源清单

Bootstrap 源代码包中包含了预编译的CSS和JavaScript资源,以及源Sass、JavaScript、例子和文档,核心结构如下:

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──content/
│      └── docs/
│          └── 5.3/
│              └── examples/
├── js/
└── scss/

scss/js/是CSS和JavaScript的源码。

dist/文件夹包括上述列举的所有预编译的下载文件,一般网页都是读取dist目录下的文件。

docs/文件夹是开发者文件夹。

examples/是例子。

其它文件则是对整个BootStrap开发、编译提供支持的文件以及授权信息、支持文档。 


参考资料

Bootstrap目录结构 · Bootstrap文档网

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

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

相关文章

Visual Studio编译出来的程序无法在其它电脑上运行

在其它电脑(比如Windows Server 2012)上运行Visual Studio编译出来的应用程序,结果报错:“无法启动此程序,因为计算机中丢失VCRUNTIME140.dll。尝试重新安装该程序以解决此问题。” 解决方法: 属性 -> …

ConsoleApplication815项目(直接加载+VEH Hook Load)

上线图 ConsoleApplication815.cpp #include <iostream> #include<Windows.h> #include "detours.h" #include "detver.h" #pragma comment(lib,"detours.lib")#pragma warning(disable:4996)LPVOID Beacon_address; SIZE_T Beacon…

机器视觉工程师永不为奴,他们是肯干肯出差肯加班肯拼命肯被使唤肯被叼

​ 永不为奴&#xff0c;为什么这样呐喊&#xff0c;真的很难做到。我们职业机器视觉工程师&#xff0c;本身职业具有一大特点就是专业性。 但是我们机器视觉工程师是专业技术绝不苟同于不是技术人员言语&#xff0c;我们很专业。 肯出差&#xff1a; 设备去那里&#xff0c;…

C#,《小白学程序》第七课:列表(List)应用之一“编制高铁车次信息表”

1 文本格式 /// <summary> /// 车站信息类 class /// </summary> public class Station { /// <summary> /// 编号 /// </summary> public int Id { get; set; } 0; /// <summary> /// 车站名 /// </summary>…

【优化算法】Python实现面向对象的遗传算法

遗传算法 遗传算法(Genetic Algorithm)属于智能优化算法的一种&#xff0c;本质上是模拟自然界中种群的演化来寻求问题的最优解。与之相似的还有模拟退火、粒子群、蚁群等算法。 在具体介绍遗传算法之前&#xff0c;我们先来了解一些知识&#x1f9c0; DNA&#xff1a; 携带有…

性能优化之分库分表

1、什么是分库分表 1.1、分表 将同一个库中的一张表&#xff08;比如SPU表&#xff09;按某种方式&#xff08;垂直拆分、水平拆分&#xff09;拆分成SPU1、SPU2、SPU3、SPU4…等若干张表&#xff0c;如下图所示&#xff1a; 1.2、分库 在表数据不变的情况下&#xff0c;对…

图像处理 信号处理板 设计原理图:367-基于zynq XC7Z100 FMC接口通用计算平台

基于zynq XC7Z100 FMC接口通用计算平台 一、板卡概述 板卡由SoC XC7Z100-2FFG900I芯片来完成卡主控及数字信号处理&#xff0c;XC7Z100内部集成了两个ARM Cortex-A9核和一个kintex 7的FPGA&#xff0c;通过PL端FPGA扩展FMC、光纤、IO等接口&#xff0c;PS端ARM扩展网络、USB、R…

exchange实战

未得到exchange服务器权限 确定exchange服务器ip地址 setspn -T example.domain.com -F -Q */* | findstr exchangeMailSniper 爆破用户名和密码 爆破Exchange邮箱用户名密码&#xff0c;为了防止账号被锁定&#xff0c;所以我们使用密码喷洒攻击&#xff0c;即只使用一个密…

dolphinschedule配置企微告警服务(WeChat群组)

一、前置说明 ds配置好工作流后&#xff0c;比较重要的一个就是上线后的监控报警服务&#xff0c;如果你是基于企微作为协同办公的&#xff0c;WeChat群组预警必须是要安排上的&#xff0c;文章基于自建应用配合群组方式构建预警群&#xff0c;接入后&#xff0c;任务成功或者…

sql:SQL优化知识点记录(五)

&#xff08;1&#xff09;explain之例子 &#xff08;2&#xff09;索引单表优化案例 上面的功能已经实现&#xff0c;但是分析功能&#xff0c; 使用explain分析这条sql&#xff1a; 发现type为All Extra&#xff1a;有Using filesort &#xff08;文件内排序&#xff09; 这…

创作2周年纪念日-特别篇

创作2周年纪念日-特别篇 1. 与CSDN的机缘2. 收获3. 憧憬 1. 与CSDN的机缘 很荣幸&#xff0c;在大学时候&#xff0c;能够接触到CSDN这样一个平台&#xff0c;当时对嵌入式开发、编程、计算机视觉等内容比较感兴趣。后面一个很偶然的联培实习机会&#xff0c;让我接触到了Pych…

浅析Linux SCSI子系统:设备管理

文章目录 概述设备管理数据结构scsi_host_template&#xff1a;SCSI主机适配器模板scsi_host&#xff1a;SCSI主机适配器主机适配器支持DIF scsi_target&#xff1a;SCSI目标节点scsi_device&#xff1a;SCSI设备 添加主机适配器构建sysfs目录 添加SCSI设备挂载LunIO请求队列初…

基于Spring Boot的软件缺陷追踪系统的设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的软件缺陷追踪系统的设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java spri…

【HTML】基础语法讲解

基础语法 1. HTML 结构1.1 认识HTML标签1.2 HTML 文件基本结构1.3 标签层次结构1.4 快速生成代码框架 2. HTML 常见标签2.1 注释标签2.2 标题标签:h1-h62.3 段落标签:p2.4 <br>换行标签2.5 格式化标签2.6 图片标签&#xff1a;img2.7 超链接标签&#xff1a;a2.8 表格标签…

Flutter问题记录 - Unable to find bundled Java version

新版本的Android Studio真的移除了JRE&#xff0c;jre目录找不到&#xff0c;怪不得报错了&#xff0c;不过多了一个jbr目录&#xff0c;找了个以前的Android Studio版本对比 搜了一下jbr&#xff08;JetBrains Runtime&#xff09;&#xff0c;原来IDEA老早就开始用了&#xf…

公网远程访问局域网SQL Server数据库

文章目录 1.前言2.本地安装和设置SQL Server2.1 SQL Server下载2.2 SQL Server本地连接测试2.3 Cpolar内网穿透的下载和安装2.3 Cpolar内网穿透的注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 1.前言 数据库的重要性相信大家都有所了解&…

Android studio APK切换多个摄像头(Camera2)

1.先设置camera的权限 <uses-permission android:name"android.permission.CAMERA" /> 2.布局 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"and…

vue中html引入使用<%= BASE_URL %>变量

首先使用src相对路径引入 注意&#xff1a; js 文件放在public文件下 不要放在assets静态资源文件下 否则 可能会报错 GET http://192.168.0.113:8080/src/assets/js/websockets.js net::ERR_ABORTED 500 (Internal Server Error) 正确使用如下&#xff1a;eg // html中引…

go gin 参数绑定常用验证器

https://pkg.go.dev/github.com/go-playground/validator/v10#readme-baked-in-validations min 最小max 最大len 长度限制gt 大于eq 等于ne 不等于eqfield 与某个字段值一样nefield 与某个字段值不一样 package mainimport ("net/http""github.com/gin-gonic…

7.react useReducer使用与常见问题

useReducer函数 1. useState的替代方案.接收一个(state, action)>newState的reducer, 并返回当前的state以及与其配套的dispatch方法2. 在某些场景下,useReducer会比useState更加适用,例如state逻辑较为复杂, 且**包含多个子值**,或者下一个state依赖于之前的state等清楚us…