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

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
注册配置 MSE Nacos/ZooKeeper,118元/月
简介: 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文档,里面有许多的框架可以供我们使用。
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
27天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
28天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
47 4
|
1月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
28天前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
28天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
36 2
|
29天前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
1月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
31 9
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
36 4
|
1月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
34 0