欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-23 11:38:50
[catalog]  1. 了解 Bootstrap  2. Bootstrap下载及安装  3. 了解 jQuery  4. jQuery下载及安装  5. 引入Bootstrap 和 jQuery(附案例)  6.【每日一面】JS 中 attribute 和 property 的区别1. 了解 BootstrapBootstrap(辅助程序,解靴带)是美国 Twitter 公司的设计师Mark Otto和Jacob Thornton合作基于HT...

[catalog]

 
  1. 了解 Bootstrap
  2. Bootstrap下载及安装
  3. 了解 jQuery
  4. jQuery下载及安装
  5. 引入Bootstrap 和 jQuery(附案例)
  6.【每日一面】JS 中 attribute 和 property 的区别
 
 

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官网下载

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

【零基础小白的华丽蜕变】项目中引入 Bootstrap 和 jQuery
【零基础小白的华丽蜕变】项目中引入 Bootstrap 和 jQuery
解压后可以看到CSS,字体文件和JavaScript已经下载好了。

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

3. 了解 jQuery

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

4. jQuery下载及安装

点击进入jQuery官网下载

【零基础小白的华丽蜕变】项目中引入 Bootstrap 和 jQuery
【零基础小白的华丽蜕变】项目中引入 Bootstrap 和 jQuery
Ctrl+S 保存到本地

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

5. 引入Bootstrap 和 jQuery

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

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

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

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

 
 

【每日一面】

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,存在浏览器差异。

本文地址:https://blog.csdn.net/weixin_44598507/article/details/110194471