Bootstrap4 提示框
提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。
如何创建提示框
通过向元素添加 data-toggle=”tooltip”
来来创建提示框。
title 属性的内容为提示框显示的内容:
<a href="#" data-toggle="tooltip" title="我是提示内容!……继续阅读 »
2年前 (2022-06-09) 246浏览 0评论
0个赞
Bootstrap Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well:
实例
<div class="well">您好,我在 Well 中!</div>
结果如下所示:
尺寸大小
您可以使……继续阅读 »
2年前 (2022-06-09) 249浏览 0评论
0个赞
JavaScript – 测试 Prototype
测试 JavaScript 框架库 – Prototype
引用 Prototype
如需测试 JavaScript 库,您需要在网页中引用它。
为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:
引用 Prototype
<!DOCTYPE html>
<html>……继续阅读 »
2年前 (2022-06-09) 330浏览 0评论
0个赞
Bootstrap5 导航栏
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏
(大屏幕水平铺开,小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加 class=”navbar-nav” 类。
然后在 <li> 元素上添加 ……继续阅读 »
2年前 (2022-06-09) 108浏览 0评论
0个赞
Bootstrap4 Flex(弹性)布局
Bootstrap4 通过 flex 类来控制页面的布局。
弹性盒子(flexbox)
Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局,而不是使用浮动来布局。
弹性盒子是 CSS3 的一种新的布局模式,更适合响应式的设计,如果你还不了解 flex,可以阅读我们的 CSS3 弹性盒子(Flex Box) ……继续阅读 »
2年前 (2022-06-09) 215浏览 0评论
0个赞
HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。
你也可以参考我们的 SQL 教程,了解更多数据库操作知识。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
核心……继续阅读 »
2年前 (2022-06-09) 266浏览 0评论
0个赞
Bootstrap4 图像形状
圆角图片
.rounded 类可以让图片显示圆角效果:
实例
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
尝试一下 »
椭圆图片
.rounded-circle 类可以设置椭圆形图片:
实例
<img s……继续阅读 »
2年前 (2022-06-09) 182浏览 0评论
0个赞
var H=’….’;
var H=H.split(”);
var M=’…..’;
var M=M.split(”);
var S=’……’;
var S=S.split(”);
var Ypos=0;
var Xpos=0;
var Ybase=8;
var ……继续阅读 »
2年前 (2022-06-09) 222浏览 0评论
0个赞
Bootstrap4 徽章(Badges)
徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span>
元素上即可。 徽章可以根据父元素的大小的变化而变化:
实例
<h1>测试标题 <span class="badge badge-secondary&qu……继续阅读 »
2年前 (2022-06-08) 110浏览 0评论
0个赞
Chrome 浏览器中执行 JavaScript
本章节为大家介绍如何在 Chrome 浏览器上进行 JavaScript 代码的运行与调试。
Chrome 是由 Google 开发的免费网页浏览器,对于前端开发来说(尤其是调试代码)非常方便。
Chrome 官网地址:https://www.google.com/intl/zh-CN/chrome/。
我们在 Chrome 浏览器中可以通过按下 F12 按钮或者右击……继续阅读 »
3年前 (2022-06-08) 180浏览 0评论
0个赞
Bootstrap 附加导航(Affix)插件
附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动。
如果您想要单独引用该插件的功能,那么您需要引用 affix.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 boo……继续阅读 »
3年前 (2022-06-08) 138浏览 0评论
0个赞
JavaScript let 和 const
ECMAScript 2015(ECMAScript 6)
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变……继续阅读 »
3年前 (2022-06-08) 295浏览 0评论
0个赞
你已经学习了CSS,下一步学习什么呢?
CSS 总结
本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。
你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。
同时,你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后,以及向某些选择器添加特殊的效果,比如链接。
如果需要更多关于 CSS 的信息,请参阅我们的
CSS……继续阅读 »
3年前 (2022-06-07) 278浏览 0评论
0个赞
HTML5 浏览器支持
你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。
HTML5 浏览器支持
现代的浏览器都支持 HTML5。
此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。
正因为如此,你可以 “教会” 浏览器处理 “未知” 的 HTML 元素。
甚至你可以教会 IE6 (Windows XP 20……继续阅读 »
3年前 (2022-06-07) 358浏览 0评论
0个赞
Bootstrap4 滚动监听(Scrollspy)
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。
如何创建滚动监听
以下实例演示了如何创建滚动监听:
实例
<!– 可滚动区域 –>
<body data-spy="scroll" data-target=".na……继续阅读 »
3年前 (2022-06-07) 236浏览 0评论
0个赞
JavaScript this 关键字
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
在方法中,this 表示该方法所属的对象。
如果单独使用,this 表示全局对象。
在函数中,this 表示全局对象。
在函数中,在严格模式下,this 是未定义的(undefined)。
在事件中,this 表示接收事件的……继续阅读 »
3年前 (2022-06-06) 134浏览 0评论
0个赞
Bootstrap5 导航
如果你想创建一个简单的水平导航栏,可以在 <ul> 元素上添加
.nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类:
实例
<ul class="nav">
<li class="nav-item">
<a class=&qu……继续阅读 »
3年前 (2022-06-06) 72浏览 0评论
0个赞
JavaScript if…Else 语句
条件语句用于基于不同的条件来执行不同的动作。
条件语句
通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中,我们可使用以下条件语句:
if 语句 – 只有当指定条件为 true 时,使用该语句来执行代码
if…else 语句 – 当条件为 tru……继续阅读 »
3年前 (2022-06-06) 198浏览 0评论
0个赞
JavaScript 教程
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript 非常容易学。
本教程将教你学习从初级到高级 JavaScript 知识。
JavaScript 在线实例
本教程包含了大量的 JavaScript 实例, 您可以点击 “尝试一下” 来在线查看实例。
实例
function displa……继续阅读 »
3年前 (2022-06-06) 205浏览 0评论
0个赞
JavaScript Boolean(布尔) 对象
Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false)。
在线实例
检查布尔值
检查布尔对象是 true 还是 false。
完整的 Boolean(布尔) 对象参考手册
我们提供 JavaScript Boolean 对象参考手册,其中包括所有可用于布尔对象的属性和方法。
该手册包含了对每个属性和方法的详细描述以及相关实例。
……继续阅读 »
3年前 (2022-06-06) 211浏览 0评论
0个赞
CSS Id 和 Class
id 和 class 选择器
如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “class”选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应……继续阅读 »
3年前 (2022-06-06) 673浏览 0评论
0个赞
Bootstrap4 文字排版
Bootstrap 4 默认设置
Bootstrap 4 默认的
font-size 为 16px,
line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外,所有的 <p> 元素
margin-top: 0 、 margin-b……继续阅读 »
3年前 (2022-06-05) 106浏览 0评论
0个赞
HTML5 SVG
SVG 定义为可缩放矢量图形。
HTML5 支持内联 SVG。
HTML <svg> 元素是 SVG 图形的容器。
SVG 有多种绘制路径、框、圆、文本和图形图像的方法。
SVG
Sorry, your browser does not support inline SVG.
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphic……继续阅读 »
3年前 (2022-06-05) 183浏览 0评论
0个赞
CSS 字体
CSS字体属性定义字体,加粗,大小,文字样式。
serif和sans-serif字体之间的区别
在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读
CSS字型
在CSS中,有两种类型的字体系列名称:
通用字体系列 – 拥有相似外观的字体系统组合(如 “Serif” 或 “Monospace”)
特定字体系……继续阅读 »
3年前 (2022-06-05) 250浏览 0评论
0个赞
Bootstrap 网格系统
table.grid {
width:100%;
border:none;
background-color:#F6F4F0;
padding:0px;
}
table.grid tr {
text-align:center;
}
table.grid td {
border:4px solid white;
padding:6px……继续阅读 »
3年前 (2022-06-04) 336浏览 0评论
0个赞
.runoob-ripple{
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transit……继续阅读 »
3年前 (2022-06-04) 156浏览 0评论
0个赞
JavaScript 变量
变量是用于存储信息的”容器”。
实例
var x=5;
var y=6;
var z=x+y;
就像代数那样
x=5
y=6
z=x+y
在代数中,我们使用字母(比如 x)来保存值(比如 5)。
通过上面的表达式 z=x+y,我们能够计算出 z 的值为 11。
在 JavaScript 中,这些字母被称为变量。
您可以把变量看做存储数据的容器。
……继续阅读 »
3年前 (2022-06-04) 81浏览 0评论
0个赞
Bootstrap4 教程
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
谁适合阅读本教程?
只要您具备……继续阅读 »
3年前 (2022-06-04) 172浏览 0评论
0个赞
JavaScript 代码规范
所有的 JavaScript
项目适用同一种规范。
JavaScript 代码规范
代码规范通常包括以下几个方面:
变量和函数的命名规则
空格,缩进,注释的使用规则。
其他常用规范……
规范的代码可以更易于阅读与维护。
代码规范一般在开发前规定,可以跟你的团队成员来协商设置。
变量名
变量名推荐使用驼峰法来命名(camelCase):
firstName = “……继续阅读 »
3年前 (2022-06-04) 117浏览 0评论
0个赞
CSS3 多媒体查询
CSS2 多媒体类型
@media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。
例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。
但是这些多媒体类型在很多设备上支持还不够友好。
CSS3 多媒体查询
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。
媒体查询可……继续阅读 »
3年前 (2022-06-03) 327浏览 0评论
0个赞