【零基础小白的华丽蜕变】项目中引入 Bootstrap 和 jQuery

最新推荐文章于 2024-05-09 20:36:20 发布

おうせき碩

最新推荐文章于 2024-05-09 20:36:20 发布

阅读量755

点赞数 1

分类专栏：零基础小白的华丽蜕变文章标签：脚本语言 js javascript jquery bootstrap

本文链接：https://blog.csdn.net/weixin_44598507/article/details/110194471

版权

零基础小白的华丽蜕变专栏收录该内容

14 篇文章 2 订阅

订阅专栏

人若有志，万事可为！（放弃了，你就是笑话一段。）

目録

1. 了解 Bootstrap

Bootstrap（辅助程序，解靴带）是美国 Twitter 公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap 4 正式版已经从 Less 迁移到 Sass。

Less（辅助程序，解靴带）Leaner Style Sheets 是一门 CSS 预处理语言（编译器），Less里面的变量都是以@作为变量的起始标识，变量名由字母、数字、_和-组成，扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端，引入Less.js即可使用，赋予了CSS逻辑运算的能力。

Sass（果脯蜜饯）Syntactically Awesome Stylesheets 是一门 CSS 预处理语言（编译器），是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！完全兼容所有版本的CSS。Sass里面的变量都是以$作为变量的起始标识，基于Ruby，需要安装Ruby（一种面向对象程序设计的脚本语言）。

2. Bootstrap下载及安装

点击进入Bootstrap官网下载

在这里插入图片描述

在这里插入图片描述

解压后可以看到CSS，字体文件和JavaScript已经下载好了。

在这里插入图片描述

3. 了解 jQuery

jQuery 是一个快速，小型且功能丰富的JavaScript库。通过易于使用的API（可在多种浏览器中使用），它使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性。具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

4. jQuery下载及安装

点击进入jQuery官网下载

在这里插入图片描述

Ctrl+S 保存到本地

在这里插入图片描述

5. 引入Bootstrap 和 jQuery

学习更多 Bootstrap 知识 → Bootstrap菜鸟教程

学习更多 jQuery 知识 → jQuery API 中文文档

直接复制粘贴到项目里就可以使用了！代码规约都放在 plugin 文件夹里。

在这里插入图片描述

【每日一面】

JS 中 attribute 和 property 的区别

Property （属性）：是DOM中的属性，是JavaScript里的对象。DOM节点是一个对象，因此，他可以和其他的JavaScript对象一样添加自定义的属性以及方法，例如childNodes、firstChild、clientHeight等。property的值可以是任何的数据类型，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。
Attribute （特性）：attribute是HTML标签上的特性，例如html中常用的id、class、title、align等，它的值只能够是字符串，大小写不敏感，出现在innerHTML中，通过类数组attributes可以罗列所有的attribute。attributes属于property的一个子集，即DOM标签（html代码）中出现的属性（id、class、title、align、classname），它保存了HTML标签上自定义的属性，是一个Attr类型的对象，拥有NodeType、NodeName等属性。常用的Attribute已经被作为Property附加到DOM对象上，可以和Property一样取值和赋值。但是自定义的Attribute不行。
Attention！！！
setAttribute(“key”,“value”)的两个参数，都必须是字符串；属性取值很简单，取任何属性的值，用"."就可以；attribute可以同步property，property不能同步attribute；建议大家用setAttribute()和getAttribute()来操作。
1.“class”变成Property之后叫做“className”，因为“class”是ECMA的关键字。
2.getAttribute获取的是href的实际值，而点号获取的是完整的url，存在浏览器差异。