Bootstrap4 卡片
简单的卡片
我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下:
实例
<div class="card">
<div class="card-body">简单的卡片</div>
</div>
尝试一下 »
Bootstra……继续阅读 »
2年前 (2022-06-15) 186浏览 0评论
0个赞
Bootstrap5 颜色
Bootstrap 5 提供了一些有代表意义的颜色类：.text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark, .text-body (默认颜色，为黑色) and .text-light:
实……继续阅读 »
2年前 (2022-06-15) 317浏览 0评论
0个赞
CSS 实例
CSS背景
设置页面的背景颜色
设置不同元素的背景颜色
设置一个图像作为页面的背景
错误的背景图片
如何在水平方向重复背景图像
如何定位背景图像
一个固定的背景图片（这个图片不会随页面的其余部分滚动）
声明背景属性
高级的背景例子
背景属性的解释
CSS文本
设置不同元素的文本颜色
文本对齐
移除链接下划线
装饰文字
控制文本中的字母
缩进文本
指定了字符之间的空间
指定了行与行之间的空间
设置元素的文……继续阅读 »
2年前 (2022-06-14) 186浏览 0评论
0个赞
CSS 盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
Margi……继续阅读 »
2年前 (2022-06-14) 229浏览 0评论
0个赞
Bootstrap 缩略图
本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：
在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
……继续阅读 »
2年前 (2022-06-14) 284浏览 0评论
0个赞
Bootstrap 环境安装
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。
下载 Bootstrap
您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：
您会看到两个按钮：
Download Bootstrap：下载 ……继续阅读 »
2年前 (2022-06-14) 271浏览 0评论
0个赞
Bootstrap5 教程
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
谁适……继续阅读 »
2年前 (2022-06-14) 235浏览 0评论
0个赞
JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息。
Window Screen
window.screen对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth – 可用的屏幕宽度
screen.availHeight – 可用的屏幕高度
Window Screen 可用宽度
scre……继续阅读 »
2年前 (2022-06-14) 208浏览 0评论
0个赞
Bootstrap 轮播（Carousel）插件
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 boot……继续阅读 »
2年前 (2022-06-13) 257浏览 0评论
0个赞
Bootstrap 导航元素
本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。
表格导航或标签
创建一个标签式的导航菜单：
以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。
下面的实例演示了这点：
实例……继续阅读 »
2年前 (2022-06-13) 153浏览 0评论
0个赞
Bootstrap 面板（Panels）
本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示：
实例
<div class="panel panel-default">
&……继续阅读 »
2年前 (2022-06-13) 249浏览 0评论
0个赞
CSS 简介
你需要具备的知识
在继续学习之前，你需要对下面的知识有基本的了解：
HTML / XHTML
如果你希望首先学习这些项目，请在 首页 访问相关教程。
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效……继续阅读 »
2年前 (2022-06-12) 88浏览 0评论
0个赞
JavaScript 表单
JavaScript 表单验证
HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：
JavaScript 实例
function validateForm() {
var x = document.forms["myForm"]["fnam……继续阅读 »
2年前 (2022-06-12) 159浏览 0评论
0个赞
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
实例
a:link……继续阅读 »
2年前 (2022-06-12) 142浏览 0评论
0个赞
Bootstrap4 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数：
table.grid {
width:100%;
border:none;
background-color:#F6F4F0;
padding:0px;
}
table.g……继续阅读 »
2年前 (2022-06-12) 263浏览 0评论
0个赞
JavaScript Promise
在学习本章节内容前，你需要先了解什么是异步编程，可以参考：JavaScript 异步编程
Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。
由于 Promise 是 ES6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。
以下是……继续阅读 »
2年前 (2022-06-12) 400浏览 0评论
0个赞
HTML5 Web 存储
HTML5 web 存储，一个比 cookie 更好的本地存储方式。
什么是 HTML5 Web 存储?
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数……继续阅读 »
2年前 (2022-06-12) 245浏览 0评论
0个赞
Bootstrap5 模态框
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。
如何创建模态框
以下实例创建了一个简单的模态框效果 ：
实例
<button type="button" class="btn btn-primary" data-bs-toggle=&q……继续阅读 »
2年前 (2022-06-12) 291浏览 0评论
0个赞
CSS 布局 – 水平 & 垂直对齐
水平 & 垂直居中对齐
元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
div 元素是居中的
实例
.center {
margin: auto;
width: 50%;
……继续阅读 »
2年前 (2022-06-11) 219浏览 0评论
0个赞
Font Awesome 文本图标
下表显示了所有的 Font Awesome 文本图标：
图标
描述
实例
fa fa-align-center
尝试一下
fa fa-align-justify
尝试一下
fa fa-align-left
尝试一下
fa fa-align-right
尝试一下
fa fa-bold
尝试一下
fa fa-chain
尝试一下
fa……继续阅读 »
2年前 (2022-06-11) 135浏览 0评论
0个赞
CSS 布局 – Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
#overflowTest {
background: #4CAF50;
color: white;
padding: 15px;
width: 80%;
height: 100px;
overflow: scroll;
border: 1px……继续阅读 »
2年前 (2022-06-11) 94浏览 0评论
0个赞
JavaScript 函数参数
JavaScript 函数对参数的值没有进行任何的检查。
函数显式参数(Parameters)与隐式参数(Arguments)
在先前的教程中，我们已经学习了函数的显式参数:
functionName(parameter1, parameter2, parameter3) {
// 要执行的代码……
}
函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真……继续阅读 »
2年前 (2022-06-11) 297浏览 0评论
0个赞
Bootstrap 滚动监听（Scrollspy）插件
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。
如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的……继续阅读 »
2年前 (2022-06-11) 256浏览 0评论
0个赞
Bootstrap4 表单控件
Bootstrap4 支持以下表单控件：
input
textarea
checkbox
radio
select
Bootstrap Input
Bootstrap 支持所有的 HTML5 输入类型:
text, password, datetime, datetime-local, date, month, time, week, number,
email, url, sea……继续阅读 »
2年前 (2022-06-10) 222浏览 0评论
0个赞
Bootstrap 徽章（Badges）
本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class=”badge”> 添加到链接、Bootstrap 导航等这些元素上即可。
下面的实例演示了这点：
实例
展示未读邮件：
<a hr……继续阅读 »
2年前 (2022-06-10) 235浏览 0评论
0个赞
HTML(5) 代码规范
HTML 代码约定
很多 Web 开发人员对 HTML 的代码规范知之甚少。
在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。
使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。
而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。
使用正确的文档类型
文档类型声明位于HTML文档的第一行：
<!DOCT……继续阅读 »
2年前 (2022-06-10) 254浏览 0评论
0个赞
JavaScript 使用误区
本章节我们将讨论 JavaScript 的使用误区。
赋值运算符应用错误
在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号
(==)。
if 条件语句返回 false (是我们预期的)因为 x 不等于 10:
var x = 0;if (x == 10)
if 条件语句返回 ……继续阅读 »
2年前 (2022-06-10) 81浏览 0评论
0个赞
Bootstrap4 进度条
进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下：
添加一个带有 .progress 类的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”width:70%” 表……继续阅读 »
2年前 (2022-06-10) 244浏览 0评论
0个赞
JavaScript HTML DOM 节点列表
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。
一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。 ……继续阅读 »
2年前 (2022-06-10) 231浏览 0评论
0个赞
CSS 网格元素
CSS 网格元素
网格容器包含了一个或多个网格元素。
默认情况下，网格容器的每一列和每一行都有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。
grid-column 属性
grid-column 属性定义了网格元素列的开始和结束位置。
注意： grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。
我们……继续阅读 »
2年前 (2022-06-09) 208浏览 0评论
0个赞
