ixygj197875的博客_CSDN博客-ES6标准入门,Bootstrap3实用教程,揭秘 CSS领域博主

原创《揭秘 CSS》开源啦

《揭秘 CSS》将整个 CSS 体系作为一个有机整体，系统介绍整个 CSS 体系，全面涵盖 CSS1、CSS2.1、CSS3。内容由浅入深，从基础讲起，逐步深入，让零基础的 web前端工程师从入门到完全精通CSS。《揭秘 CSS》采用创意共享4.0许可证，只要保持原作者署名和非商用，您可以自由地阅读、分享、修改其内容。《揭秘 CSS》已经在 Github 开源...

2018-02-27 22:03:16 717

原创 Win2008 IIS TLS1.0升级到TLS1.2或TLS1.3

Win2008 IIS TLS1.0升级到TLS1.2或TLS1.3

2022-09-10 11:10:25 2688 1

原创 JSON和JavaScript对象互转

JSON的本质是一个字符串，它之所以受欢迎，是因为可以把JSON字符串解析为有用的JavaScript对象。ECMAScript5中，对解析JSON的行为进行了规范，并定义了一个全局对象JSON，该对象有两个方法：JSON.parse() 和 JSON.stringify()。JSON.parse()JSON.parse() 方法，用于把JSON字符串转换为原生的 JavaScript...

2020-04-01 22:43:02 511

原创 JSON 数组

遍历 JSON 数组你可以使用 for-in循环来遍历数组：for(iinmyObj.sites){ x+=myObj.sites[i]+"<br>"; }你也可以直接使用 for 循环来遍历数组：for(i=0;i<myObj.sites.length;i++){ x+=myObj.sites[i]+"<...

2020-03-28 23:10:43 326

原创 JSON 对象

访问 JSON 对象的值可以使用点号（.），或中括号（[]）来访问 JSON 对象的值。使用点号访问对象时，直接使用对象的 key 来访问， key 无须放在双引号中。如：<script> varmyObj,x; myObj={"github":"https://github.com/"}; x=myObj.github; docu...

2020-03-28 23:07:33 262

原创 JSON语法

JSON语法JSON 键/值对JSON键/值对由键和值组成，键必须是字符串，值可以是字符串（string）、数值(number) 、对象（object）、数组（array）、true、false、null。如图 1‑1所示：图1-1 JSON的值在定义JSON键/值时，先是键名，后面写一个冒号，然后是值。如："github":"https://github.com/"这...

2020-03-27 22:58:42 309

原创 JSON简介

JSON简介什么是JSONJSON是JavaScript Object Notation的简称，中文含义为“JavaScript 对象表示法”，它是一种数据交换的文本格式，而不是一种编程语言。JSON 是一种轻量级的数据交换格式，它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理...

2020-03-27 22:52:21 2738

转载 windows2008R2+IIS部署python Django的web环境

windows2008R2+IIS部署python Django的web环境这篇文章写得非常好，非常仔细，它完全可以指导在 windows2008R2+IIS中部署python Django的web环境。这篇文章中，作者把所有的坑都明确标识出来，可以少走很多弯路。感谢作者潇洒哥Kahn的辛苦付出。这里对作者省略的内容进行补充，以备忘记。添加角色服务角色-》Web服务器（IIS...

2020-02-20 13:46:37 662

原创 Bootstrap3 Font Awesome 字体图标的堆叠

堆叠的图标Font Awesome还支持将多个图标叠加在一起组成一个复合图标。如果想要将多个图标堆叠起来，需要给容器元素添加.fa-stack类，为图标元素使用.fa-stack-1x作为正常比例的图标，使用.fa-stack-2x作为大一些的图标。还可以为图标元素使用.fa-inverse类让图标颜色反色，为容器元素添加 .fa-lg、或.fa-2x、或.fa-3x、或.fa-4x、或.fa...

2019-06-05 15:04:22 904

原创 Bootstrap3 Font Awesome 字体图标带动画的图标

带动画的图标Font Awesome不仅支持固定角度的旋转，还提供了带动画的旋转图标。可以使用.fa-spin类让任意图标动态持续旋转，还可以使用.fa-pulse类让图标以 8 步为周期进行旋转，它们尤其适合表示刷新、加载等功能的图标，如.fa-spinner、.fa-refresh和.fa-cog等：<divclass="fa-3x"> <iclass="fa ...

2019-06-05 15:03:27 1325

原创 Bootstrap3 Font Awesome 字体图标旋转或翻转图标

旋转或翻转图标Font Awesome提供了一组样式类，可以对图标进行固定角度的旋转或翻转。这些类分别是 .fa-rotate-90（顺时针旋转90度）、.fa-rotate-180（顺时针旋转180度）、.fa-rotate-270（顺时针旋转270度）、.fa-flip-horizontal（水平翻转）、.fa-flip-horizontal（垂直翻转）。如：<divclass...

2019-06-05 15:02:39 3238 1

原创 Bootstrap3 Font Awesome 字体图标带边框的图标

带边框的图标使用.fa-border类，可以类轻易构造出带有圆角边框的图标。还可以添加.pull-right或.pull-left类，让图标向右或向左浮动，所有图标都支持这两个类。如：<div> <iclass="fa fa-quote-left fa-3x fa-border pull-left"></i> <p>歪脖网(waibo....

2019-06-05 15:01:53 558

原创 Bootstrap3 Font Awesome 字体图标的尺寸

图标的尺寸通过应用.fa-lg、.fa-2x、.fa-3x、.fa-4x、.fa-5x类，让图标变得更大。按先后顺序，这些类所对应的图标大小按 33% 依次递增。如：<iclass="fa fa-camera-retro fa-lg"></i> <iclass="fa fa-camera-retro fa-2x"></i> <i...

2019-06-05 15:01:00 730

原创 Bootstrap3 Font Awesome 字体图标的基本图标

基本图标Font Awesome图标跟Glyphicon图标的用法完全相同，所有图标都需要一个基类 .fa和对应每个图标的 .fa-*类。只需创建一个行内元素，并为它应用图标类，即可使用Font Awesome图标。如：<iclass="fa fa-camera-retro"></i>效果如图 5‑1所示：图5-1 基本图标关于作者...

2019-06-05 14:59:34 1512

原创 Bootstrap3 Font Awesome 字体图标

简介Font Awesome 是一套绝佳的图标字体库，它提供可缩放的矢量图标，并且可以通过CSS来设置大小、颜色、阴影或者其它任何支持的效果。Font Awesome具有以下特性：一个字库，675 个免费图标。完全免费，包括商业用途。最初是为Bootstrap设计的，现在可以适用于所有框架。完全不依赖JavaScript，不存在任何兼容性问题。兼容桌面应用。只要CSS支...

2019-06-05 14:58:14 751

原创 Bootstrap3 Affix插件

AffixAffix插件（affix.js）是一个很有用的插件，它可以让你的导航始终都固定在某个位置。一开始的时候，导航出现在页面的某个位置，当页面滚动一定距离时，无论页面如何滚动，它都固定在一个位置，就像被帖在页面上一样。Affix插件被翻译为多种中文名称，如粘条、固定导航等，每种翻译都很难准确表达作者的原意。本文干脆不做翻译，直接使用Affix了事，免得画蛇添足。以下是Affix插...

2019-06-04 16:19:01 1037

原创 Bootstrap3 输入提示插件typeahead

输入提示输入提示是一个表单输入辅助类型的插件，它简单、易于扩展，可以在用户输入过程中，针对用户的输入快速地给出输入提示。在Bootstrap2中，输入提示是一个标准插件，到了Bootstrap3，它已经被独立出来，不再是Bootstrap的标准插件。如果要使用输入提示插件的功能，可以从Bootstrap2中拷贝 bootstrap-typeahead.js 文件。输入提示插件的基本原理...

2019-06-04 16:18:17 2543

原创 Bootstrap3 轮番插件的事件

轮番插件的事件Bootstrap为轮番插件定义了两个事件，通过这些事件，可以监听播放行为及轮番组件的状态。这些事件及含义见表 4‑12。表 4‑12 轮番插件的事件及含义事件含义 slide.bs.carousel 当 slide 实例方法被调用时，立即触发该事件 slid.bs.carousel 当切换完一帧后，触发该事件如，希望在轮番切换过程中，整...

2019-06-03 16:23:36 218

原创 Bootstrap3轮番插件的选项

轮番插件的选项Bootstrap为轮番插件提供了 4 个选项，这些选项都可以通过 data 属性或JavaScript进行设置。选项的详细说明见表 4‑11：表 4‑11 carousel插件的选项名称类型默认值说明 interval number 5000 自动循环时，每个项目延迟的时间量。如果为 false，轮播将不会自动循环 pa...

2019-06-03 16:22:54 202

原创 Bootstrap3 轮番插件的调用方式

轮番插件的调用方式1、JavaScript调用JavaScript调用轮番其实很简单，只需在脚本中调用 carousel() 方法即可。格式为：$('.carousel').carousel();除此之外，Bootstrap还提供了其它一些方法，可以根据需要选择使用。这些方法为：.carousel('cycle')：从左向右循环播放。 .carousel('pause...

2019-06-03 16:22:18 307

原创 Bootstrap3 轮番插件的使用方法

轮番Bootstrap 的轮番插件（carousel.js）是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件，它的内容可以是图片、视频、或者其他任何内容。使用方法Bootstrap中的轮番由一个 class="carousel" 的容器定义，其中包含轮番指示器、轮番内容、轮番的控制按钮。为了确保在播放时，能够对控制按钮和轮番指示器进行正常定位，需要为容器定义一个 id。如：...

2019-06-03 16:21:32 508

原创 Bootstrap3 折叠插件的事件

折叠插件的事件Bootstrap还为折叠组件提供了一组事件，通过这些事件，可以监听用户的行为及折叠组件的状态。这些事件及含义见表 4‑10。表 4‑10 折叠插件的事件及含义事件含义 show.bs.collapse 调用show方法时，立即触发该事件 shown.bs.collapse 当可折叠元素对用户完全可见（会等待过渡效果执行结束）后，触发该事件 ...

2019-06-02 18:52:17 700

原创 Bootstrap3 折叠插件的选项

折叠插件的选项Bootstrap为折叠插件提供了 2 个选项，所有的选项都可以通过 data 属性或JavaScript进行设置。见表 4‑9。表 4‑9 collapse插件的选项名称类型默认值说明 parent 选择器 false 如果指定了选择器，则该选择器指定的父元素下，同一时刻只能显示一个折叠面板 toggle bool...

2019-06-02 18:51:35 338

原创 Bootstrap3 折叠插件的调用方式

折叠插件的调用方式折叠插件的结构相对复杂，但调用比较简单，可以通过data属性调用，也可以通过JavaScript调用。1、data 属性调用要激活折叠插件的激活行为，首先为标题部分的链接定义 data-toggle="collapse" 属性，还要为包含框定义 id，并在标题中通过 data-parent 属性指向该 id，以便在同一个包含框中同时只能有一个内容部分被显示出来。如：...

2019-06-02 18:50:24 424

原创 Bootstrap3 折叠插件的使用方法

折叠折叠插件（collapse.js）可以很容易地让页面区域折叠起来。当列表菜单的条目特别多，而页面空间有限时，使用类似于手风琴的折叠菜单可以节约页面空间，方便用户浏览。使用方法Bootstrap中，折叠组件的基本结构是在一个 class="accordion" 的容器中，包含一个或多个 class="accordion-group" 的折叠面板子容器。如：<div...

2019-06-02 18:49:16 1798

原创 Bootstrap3 按钮组插件

按钮组将按钮组放在特定的容器中，不必编写JavaScript代码，就可以让按钮组具有HTML的复选框（checkbox）或单选框（radio）的效果。1）复选按钮组复选按钮组是类似于复选框的一组按钮，用户可以选择按钮组中的多个按钮。要添加这个功能，只需给 .btn-group 的按钮组容器添加 data-toggle="buttons " 属性，并将一组包含复选框的 <label...

2019-06-01 17:54:21 368

原创 Bootstrap3 按钮状态切换

按钮状态切换将单个按钮的 data-toggle 属性设置 button，或通过简单的JavaScript编程，就可以激活按钮的行为状态，让它在未激活和激活状态之间来回切换。如：<buttonclass="btn btn-primary"data-toggle="button"autocomplete="off">Single Toggle</button>...

2019-06-01 17:53:30 3966

原创 Bootstrap3 按钮状态提示

按钮Bootstrap中的按钮插件（button.js）被赋予多种功能，如为工具条之类的组件赋予状态提示功能、状态切换功能、或者按钮组的功能。在页面多次加载之间，Firefox 仍然保持表单控件的状态（禁用状态和选择状态）。一个解决办法是为按钮设置 autocomplete="off"属性。状态提示通过自定义属性和简单的JavaScript编程，就可以让按钮具有状态提示功能。比如，...

2019-06-01 17:52:41 1007

原创 Bootstrap3 警告框插件的事件

警告框插件的事件警告框有两个可以被监听的事件。见表 4‑8。表 4‑8 警告框的事件及含义事件含义 close.bs.alert close方法被调用后，立即触发该事件 closed.bs.alert 当警告框已经被关闭（会等待过渡效果执行结束）之后，触发该事件如，要在警告框关闭之后执行操作，代码可以这样写：<script> $('#...

2019-05-31 16:21:41 495

原创 Bootstrap3 警告框插件的使用方法

警告框警告框插件（alert.js）仅仅为警告框组件一个关闭功能，即点击警告框的关闭按钮，可以让警告框消失，并将它从 DOM 中删除。使用方法为警告框添加一个可选的.alert-dismissible类和一个关闭按钮，就可以为警告框组件提供关闭功能。关闭按钮可以使用.close的任何元素定义，无论使用什么元素，都必须使用 .close 类，并包含 data-dismiss="alert...

2019-05-31 16:21:00 1669

原创 Bootstrap3 弹出提示插件的方法

弹出提示插件的方法1、.popover (options)使用一个可选的对象参数 options调用某个页面元素的弹出提示。如：$('#element').popover({ placement:right })2、.popover('show')手动弹出某个页面元素的弹出提示。如：$('#element').popover('show')3...

2019-05-30 21:21:42 805

原创 Bootstrap3 弹出提示插件的选项

弹出提示插件的选项Bootstrap为工具提示插件提供了 11 个选项，所有的选项都可以通过 data 属性或JavaScript进行设置。这些选项详细见表 4‑7：表 4‑7 popover插件的选项名称类型默认值说明 animation boolean true 为工具提示应用CSS淡入淡出过渡效果 container str...

2019-05-30 21:14:08 531

原创 Bootstrap3 弹出提示插件的使用方法

弹出提示弹出提示（popover.js）是工具提示的子类，它比工具提示多了一个 content 参数，是工具提示插件的拓展。弹出框依赖于工具提示插件tooltip.js，如果你定制了 Bootstrap，就一定要将依赖的插件编译进去。使用方法你可以给任何元素添加弹出提示，并通过 title 属性定义提示的标题，通过 data-content 属性定义提示的内容。如：&...

2019-05-30 21:13:19 1220

原创 Bootstrap3 工具提示插件的事件

工具提示插件的事件Bootstrap为工具提示插件提供了 5 个事件，通过监听这些事件，可以对特定操作阶段的用户行为作出响应。这些事件及含义见表 4‑6。表 4‑6 tooltip插件的事件及含义事件含义 show.bs.tooltip show方法调用之后，立即触发该事件。 shown.bs.tooltip 当工具提示已经对用户可见（并且过渡效果执行完毕）...

2019-05-29 14:46:42 252

原创 Bootstrap3 工具提示插件的方法

工具提示插件的方法1、.tooltip(options)使用一个可选的对象参数 options调用某个页面元素的工具提示。如：$('#element').tooltip({ placement:right })2、.tooltip('show')手动触发某个页面元素的工具提示，并在工具提示被实际显示出来之前（即shown.bs.tooltip事件被触发之前）...

2019-05-29 14:45:59 273

原创 Bootstrap3 工具提示插件的选项

工具提示插件的选项Bootstrap为工具提示插件提供了 10 个选项，所有的选项都可以通过 data 属性或JavaScript进行设置。这些选项详细见表 4‑5：表 4‑5 tooltip插件的选项名称类型默认值说明 animation boolean true 为工具提示应用CSS淡入淡出过渡效果 container str...

2019-05-29 14:45:16 208

原创 Bootstrap3 工具提示插件的使用方法

工具提示当鼠标移动到特定元素上时，显示相关的提示信息，比如给出链接说明或缩写词的全称等，是一个非常人性化的功能。HTML本身就支持这样的功能，只需给任何元素添加 title 属性，当鼠标悬停时，浏览器就会将 title 属性的值作为提示信息显示出来。由于原生的工具提示样式单调、功能单一，经常需要自己去开发相关的工具提示功能。鉴于此，Bootstrap提供了一个工具提示插件，它功能完善，...

2019-05-29 14:44:33 981

原创 Bootstrap3 滚动监听插件的事件

滚动监听插件的事件Bootstrap为滚动监听插件提供了一个事件 activate.bs.scrollspy，每当一个新的导航项目被激活时，就会触发该事件，并自动为导航条的相应菜单项添加了一个 .active 类，让它高亮显示。你可以通过JavaScript监听activate.bs.scrollspy事件，来执行你所需要的操作。如：$('#myScrollspy').on('acti...

2019-05-28 17:25:47 609

原创 Bootstrap3 滚动监听插件的方法

滚动监听插件的方法通过 JavaScript 调用滚动监控插件时，如果监听对象的DOM节点有增删元素的操作，则需要调用 .scrollspy('refresh') 方法来更新DOM。<script> $('[data-spy="scroll"]').each(function(){ var$spy=$(this).scrollspy('refres...

2019-05-28 17:25:09 268

原创 Bootstrap3 滚动监听插件的选项

滚动监听插件的选项Bootstrap为滚动监听插件提供了一个选项 offset，用来调整滚动位置距顶部偏移的像素值，取值为数字，默认值为10。正值表示滚动条向上偏移，负值表示向下偏移。offset选项可以通过 data 属性或JavaScript进行设置。如果使用data属性，则要将选项名称放在 data- 的后面，类似于 data-offset="100"。如果使用JavaScrip...

2019-05-28 17:24:31 423