Bootstrap怎么搭建?导进JS项目?怎么用?是什么?(前端开发框架)

本文涉及的产品
应用实时监控服务-用户体验监控,每月100OCU免费额度
应用实时监控服务-可观测链路OpenTelemetry版,每月50GB免费额度
可观测监控 Prometheus 版,每月50GB免费额度
简介: Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集,它简洁灵活,使得web开发更加的便捷.Bootstrap 由 Mark Otto 和 Jacob Thornton 在上开发,并于年 8 月 在 GitHub 上作为开源产品发布。

Bootstrap 基本介绍

概述

  • Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集,它简洁灵活,使得web开发更加的便捷.

  • Bootstrap 由 Mark Otto 和 Jacob Thornton 在 Twitter公司 上开发,并于 2011 年 8 月 在 GitHub 上作为开源产品发布。

概述: Bootstrap是一个建立一个页面,就可以在3三个终端(PC端、平板、手机)上完美展示的响应式前端框架

Bootstrap 更易于使用、响应功能等

Bootstrap 三大核心

  • 基本CSS

    • 设置全局的CSS样式,基本的HTML元素均可以通过class设置样式并得到增强效果;还有先进的栅格系统;
  • 组件

    • 无数可以复用的组件,包括字体图标、下拉菜单、导航、警告条、弹出框等更多功能;
  • JS插件

    • Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。

    • 其它

      • 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
      • 定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

        怎么去搭建?

  1. 首先我们要去下载bootstrap库
  2. 我们提前创建项目,我是用的idea,项目类型我是选的bootstrap
    在这里插入图片描述
    ,所以为了更好的效果我就把css、js里面的文件删掉
    在这里插入图片描述

  3. 下载好后的bootstrap去解压
    在这里插入图片描述
    解压后我们双击进去后打开dist文件
    在这里插入图片描述

  4. 进去后我们选中这两个复制
    在这里插入图片描述
  5. 进去ieda里面粘贴在这里插入图片描述
  6. 然后我们新建一个html文件就是导入我们的bootstrap,首先导入css然后就是js
    在这里插入图片描述
    我们导入bootstrap之前要先导入我们的jQuery的文件再导入我们的bootstrap文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>demo</title>
    </head>
    <body>
    <link href="css/bootstrap.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.js"></script>
    </body>
    </html>
    
    有许多功能可以参考bootstrap API文档,里面有许多的框架可以供我们使用。
相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
180 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
23天前
|
前端开发 安全 API
Qwen-coder实现本地 RAG 框架能力Bootstrap
本文介绍了如何利用Qwen-coder在本地实现RAG框架能力提升,解决了企业知识库管理中的数据安全和半结构化文档处理问题。通过Qwen2.5-72b模型和多轮对话推理,成功实现了对包含图表内容的文档的高效预处理,提升了知识库检索的准确性和安全性。
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
58 5
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
84 1
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
223 14
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
60 0
|
3月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
3月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。