Font Awesome Web 应用图标
下表显示了所有的 Font Awesome Web 应用图标:
图标
描述
实例
fa fa-address-book
尝试一下
fa fa-address-book-o
尝试一下
fa fa-address-card
尝试一下
fa fa-address-card-o
尝试一下
fa fa-adjust
尝试一下
fa fa-……继续阅读 »
3年前 (2022-06-03) 185浏览 0评论
0个赞
CSS 媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。
媒体类型
一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如, font-size 属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体,sans-serif 字体比较适合……继续阅读 »
3年前 (2022-06-03) 291浏览 0评论
0个赞
Bootstrap 超大屏幕(Jumbotron)
本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:
创建一个带有 class .jumbotron. 的容器 <div>。
除了更大的 <h1>,字体粗细 font-weight ……继续阅读 »
3年前 (2022-06-03) 69浏览 0评论
0个赞
Bootstrap5 轮播
轮播是一个循环的幻灯片:
如何创建轮播
以下实例创建了一个简单的图片轮播效果 :
实例
<!– 轮播 –>
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!– 指示符 ……继续阅读 »
3年前 (2022-06-02) 318浏览 0评论
0个赞
Font Awesome 手势图标
下表显示了所有的 Font Awesome 手势图标:
图标
描述
实例
fa fa-hand-grab-o
尝试一下
fa fa-hand-lizard-o
尝试一下
fa fa-hand-o-down
尝试一下
fa fa-hand-o-left
尝试一下
fa fa-hand-o-right
尝试一下
fa fa-hand-o-u……继续阅读 »
3年前 (2022-06-02) 105浏览 0评论
0个赞
Bootstrap4 表单
在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 <input>, <textarea>, 和
<select> elements
在使用 .form-control 类的情况下,宽度都是设置为 100%。
Bootstrap4 表单布局
堆叠表……继续阅读 »
3年前 (2022-06-02) 237浏览 0评论
0个赞
Bootstrap 简介
什么是 Bootstrap?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
为什么使用 Bootst……继续阅读 »
3年前 (2022-06-02) 152浏览 0评论
0个赞
Bootstrap 响应式实用工具
Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。
需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。
超小屏幕
手机 (<768px)
……继续阅读 »
3年前 (2022-06-01) 147浏览 0评论
0个赞
JavaScript switch 语句
switch 语句用于基于不同的条件来执行不同的动作。
JavaScript switch 语句
请使用 switch 语句来选择要执行的多个代码块之一。
语法
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
defa……继续阅读 »
3年前 (2022-06-01) 302浏览 0评论
0个赞
JavaScript 函数调用
JavaScript 函数有 4 种调用方式。
每种方式的不同在于 this 的初始化。
this 关键字
一般而言,在Javascript中,this指向函数执行时的当前对象。
注意 this 是保留关键字,你不能修改 this 的值。
调用 JavaScript 函数
在之前的章节中我们已经学会了如何创建函数。
函数中的代码在函数被调用后执行。
作为一个……继续阅读 »
3年前 (2022-06-01) 83浏览 0评论
0个赞
JavaScript 字符串(String) 对象
String 对象用于处理已有的字符块。
JavaScript 字符串
一个字符串用于存储一系列字符就像 “John Doe”.
一个字符串可以使用单引号或双引号:
实例
var
carname=”Volvo XC60″;
var
carname=’Volvo XC60′;
你使用位置(索引……继续阅读 »
3年前 (2022-06-01) 205浏览 0评论
0个赞
Bootstrap4 按钮组
Bootstrap 4 中允许我们将按钮放在同一行上。
可以在 <div> 元素上添加 .btn-group 类来创建按钮组。
实例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple<……继续阅读 »
3年前 (2022-06-01) 166浏览 0评论
0个赞
Bootstrap4 自定义表单
Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
自定义复选框
如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-checkbox,复选框作为子元素放在该 <div> 里头,然后复选框设置为 type=”checkbox”,类为 .custom-co……继续阅读 »
3年前 (2022-06-01) 115浏览 0评论
0个赞
Bootstrap 辅助类
本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。
文本
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:
类
描述
实例
.text-muted
“text-muted” 类的文本样式
尝试一下
.text-primary
“text-primary” 类的文本样式
尝试一下
.……继续阅读 »
3年前 (2022-06-01) 101浏览 0评论
0个赞
Bootstrap5 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
我们也可以根据自己的需要,定义列数:
table.grid {
width:100%;
border:none;
background-color:#F6F4F0;
padding:0px;
}
table.gr……继续阅读 »
3年前 (2022-05-31) 260浏览 0评论
0个赞
JavaScript HTML DOM – 改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=新样式
下面的例子会改变 <p> 元素的样式:
实例
<!DOCTYPE html>
……继续阅读 »
3年前 (2022-05-31) 159浏览 0评论
0个赞
JavaScript prototype(原型对象)
所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。
在前面的章节中我们学会了如何使用对象的构造器(constructor):
实例
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last……继续阅读 »
3年前 (2022-05-31) 168浏览 0评论
0个赞
Bootstrap 过渡效果(Transition)插件
过渡效果(Transition)插件提供了简单的过渡效果。
如果您想要单独引用该插件的功能,那么除了其他的 JS 文件,您还需要引用 transition.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
Transition.js 是 transitionEnd……继续阅读 »
3年前 (2022-05-31) 163浏览 0评论
0个赞
Bootstrap v2 教程
Bootstrap,来自 Twitter,是基于 HTML、CSS、JAVASCRIPT 的简介灵活的流行前段框架及交互组件集。
现在开始学习 Bootstrap!
内容列表
Bootstrap 简介
Bootstrap CSS 概览
Bootstrap 网格系统
Bootstrap 布局
Bootstrap 响应式设计
Bootstrap 排版
Bootstrap Glyphico……继续阅读 »
3年前 (2022-05-31) 112浏览 0评论
0个赞
Bootstrap 输入框组
本章将讲解 Bootstrap 支持的另一个特性,输入框组。输入框组扩展自 表单控件。使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。
向 .form-control 添加前缀或后缀元……继续阅读 »
3年前 (2022-05-30) 205浏览 0评论
0个赞
#klem1,#klem2
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#klem1:hover,#klem2:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
div.background
{
width: 500……继续阅读 »
3年前 (2022-05-30) 275浏览 0评论
0个赞
JavaScript 异步编程
异步的概念
异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。
在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。
简单来理解就是:同步按你的代码顺序执行,异步不按照代码……继续阅读 »
3年前 (2022-05-30) 184浏览 0评论
0个赞
Bootstrap 字体图标(Glyphicons)
@font-face {
font-family:’Glyphicons Halflings’;src:url(https://cdn.staticfile.org/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);src:url(//cdn.staticfile……继续阅读 »
3年前 (2022-05-30) 203浏览 0评论
0个赞
Bootstrap5 侧边栏导航(Offcanvas)
Bootstrap5 侧边栏侧边栏类似于模态框,在移动端设备中比较常用。
创建滑动导航
我们可以通过 JavaScript 来设置是否在 .offcanvas 类后面添加 .show 类,从而控制侧边栏的显示与隐藏:
.offcanvas 隐藏内容 (默认)
.offcanvas.show 显示内容
可以使用 a 链接的 href 属性或者 button ……继续阅读 »
3年前 (2022-05-30) 212浏览 0评论
0个赞
Bootstrap 模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
用法
您可以切……继续阅读 »
3年前 (2022-05-30) 124浏览 0评论
0个赞
Font Awesome 付款图标
下表显示了所有的 Font Awesome 付款图标:
图标
描述
实例
fa fa-cc-amex
尝试一下
fa fa-cc-diners-club
尝试一下
fa fa-cc-discover
尝试一下
fa fa-cc-jcb
尝试一下
fa fa-cc-mastercard
尝试一下
fa fa-cc-paypal
尝试一下
……继续阅读 »
3年前 (2022-05-30) 334浏览 0评论
0个赞
CSS3 边框
CSS3 边框
用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。
在本章中,您将了解以下的边框属性:
border-radius
box-shadow
border-image
CSS3 圆角
在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。
在 CSS3 中,很容易创建圆角。
在 CSS3 中 border-radiu……继续阅读 »
3年前 (2022-05-29) 93浏览 0评论
0个赞
Bootstrap5 Jumbotron
Jumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息。
在 Bootstrap 3 中引入了一个 jumbotron 来创建一个大的背景框,用于显示一些重要的信息。
在 Bootstrap 5 中,已经不再支持 Jumbotron。但是,我们可以使用 <div> 元素添加一些辅助类与颜色类来达到相同的效果:
提示: Jumb……继续阅读 »
3年前 (2022-05-29) 229浏览 0评论
0个赞
CSS 表格
使用 CSS 可以使 HTML 表格更美观。
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Berglunds snabbköp
Christina Berglund
Sweden
Centro comercial Moctezuma
Francisco Chang
Mexico
Ernst Ha……继续阅读 »
3年前 (2022-05-29) 299浏览 0评论
0个赞
Bootstrap5 下拉菜单
下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。
实例
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"……继续阅读 »
3年前 (2022-05-28) 243浏览 0评论
0个赞