学习教程

本站学习教程均来自于网络公开资料,并经过精心整理编辑,希望能够提高Bootstrap爱好者学习效率,尽快上手并掌握这一框架技术。(如有侵权,请通知我们删除)

HTML5本地图片裁剪并上传

wzgl阅读(28)评论(0)

本章实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小)。这个功能的需求是:头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸,那么这整张图片都会作为头像。如果大于规定的尺寸,那么用户可以选择要裁剪的区域。用户点击确定按钮,就将裁剪得到的图片数据发送到服务器,在后端将图片数据保存成一个文件。 要完成上述功能,涉及到的知识有:ajax,ca

Bootstrap之javascript插件

wzgl阅读(37)评论(0)

1、导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库。 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstr

如何巧妙的用面向对象封装常用效果

wzgl阅读(46)评论(0)

序言:之前有很多时候PC端页面只有一些切换,悬停下拉效果,可能有多个!这时候可能会选jQuery,但是就这么几个简单的效果用jq有点浪费,所以用原生js,这时候又会又一堆的for循环。。。性能又不太好。 能不能简单封装一下,可以复用?答案是:肯定的~~ 下面就是一个用构造函数实例化一个对象,用面向对象的思想实现的简单封装,最终效果 1 javscript 123456789101112131415

Bootstrap开关(switch)控件学习

wzgl阅读(57)评论(0)

bootstrap-switch插件是一个针对Bootstrap实现的开关(switch)按钮控件,可以支持尺寸、颜色等属性的自定义。开关式按钮在国内网站上使用的并不是很多,Bootstrap 的应用在国外非常流行,不知道是我们不喜欢还是使用它很麻烦很难适合网站来使用。但这种开头式按钮在手机等移动设备上的应用是最广泛的,屏幕的特性促使它更好的发展。 功能说明: 介绍chekbox与radio的两个

所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解

wzgl阅读(61)评论(0)

本文教大家如何使用bootstrap-wysiwyg文本编辑器,充分发挥编辑器的优势,希望大家可以有所收获。 主要特性: 超小5kb 自动的热键支持(MAC和windows) 拖放的插入图片,支持图片上传(支持手机拍照) 支持声音输入(chrome支持) 允许自定义的工具条,可以使用所有的bootstrap内容,字体 不使用任何强制的样式 ………………………… 其实不止这些,需要大家自己去探索,加

移动端部分兼容问题总结

wzgl阅读(57)评论(0)

1、H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 123<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> (部分安卓手机的UC浏览器写完以后还

bootstrap&NPM淘宝代理镜像

wzgl阅读(49)评论(0)

box-shadow 属性向框添加一个或多个阴影。 < box-shadow: h-shadow v-shadow blur spread color inset; h-shadow必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。 inse

JQuery 跨框架(iframe)操作

wzgl阅读(64)评论(0)

使用jquery操作iframe 1、 内容里有两个ifame 12<iframe id="leftiframe"...</iframe> <iframe id="mainiframe..</iframe> leftiframe中jQuery改变mainiframe的src代码: 1$("#mainframe&qu

BFC的外边距折叠

wzgl阅读(31)评论(0)

问题描述:   在子元素里设置margin-bottom,该margin-bottom的值没有作用于子元素,而会”转移”给外层div,如下所示。 123456789<div style="background:red;">             父元素的内容占据      

运用@media实现网页自适应中的几个关键分辨率

wzgl阅读(77)评论(0)

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢?   先看下面的代码,这是从bootstrap中遍历出来的,min-width来确认分别是 768、992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于7

Media Queries详解

wzgl阅读(69)评论(0)

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 123 <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />   <

如何处理HTML5新标签的浏览器兼容版问题

wzgl阅读(56)评论(0)

HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器。以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在低级浏览器中也得到有限的支持,不至于影响整个的页面功能。 让浏览器识别HTML5规范中的新标签 IE8浏览器中还没有添加对HTML5新标签的支持,所以在IE8中无法直接展现HTML5新标签中的内容。庆

Bootstrap Typeahead组件的使用

wzgl阅读(72)评论(0)

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便。这里我们将介绍一下这个组件的使用。 第一,简单使用 首先,最简单的使用方式,就是直接在标记中声明,通过 data-provide=”typeahead” 来声明这是一个 typeahead 组件,通过 data-source= 来提供数据。

层级多选框(html+javascript+bootstrap),全层全选和多选

wzgl阅读(68)评论(0)

想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里, 查到这篇博文,非常详细,如果大家需要做前面所说的功能,可以参考这个地址,http://mrthink.net/jquery-plugin-iselecttags/ 但是,考虑到如果要做一个选项数不确定、可能非常多,用标签会容易视觉疲劳,同时要求随着选项数的变化,最小程度影响网页布局和效果,于是选择用层级的多选框

javascript多线程Web Worker

wzgl阅读(77)评论(0)

客户端javascript其中一个基本的特性就是单线程:比如,浏览器无法同时运行两个事件处理程序,它也无法在一个事件处理程序运行的时候触发一个计时器。Web Worker是HTML5提供的一个javascript多线程解决方案,可以将一些大计算量的代码交由web Worker运行从而避免阻塞用户界面,在执行复杂计算和数据处理时,这个API非常有用。本文将详细介绍Web Worker 前提 在使用W

关于http-equiv

wzgl阅读(31)评论(0)

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 引用 meat标签的http-equiv属性语法格式是:<meta http-equiv=”参数” content=”参数变量值”> ;其中ht

Bootstrap禁用响应式布局

wzgl阅读(56)评论(0)

在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行。 不过正所谓“萝卜青菜各有所爱”,如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局。 移除标签 禁用第一步,就是需要移除在head标签中添加的 1<meta nam

WAI-ARIA无障碍网页应用属性完全展示

wzgl阅读(103)评论(0)

一、你至少应该知道ARIA是什么东西! WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。 而ARIA就是可以让屏幕阅读器准确识别网页中的内容,变化,状态的技术规范,可以让盲人这类用户也能无障碍阅读! 二、为什么需要ARIA? 回答标题问题前我

前端之HTTP缓存

wzgl阅读(50)评论(0)

缓存并重用之前获取的资源的能力是性能优化的一个关键方面。 每个浏览器都自带了 HTTP 缓存实现功能,只需要确保每个服务器响应都提供正确的 HTTP 标头指令,以指示浏览器何时可以缓存响应以及可以缓存多久。   HTTP 与浏览器交互的请求头:   当服务器返回响应时,还会发出一组 HTTP 标头,用于描述响应的内容类型、长度、缓存指令、验证令牌等。例如,在上图的交互中,服务器

padding和margin——内边距和外边距

wzgl阅读(57)评论(0)

一、padding——内边距(内填充)   1.1、padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。 HTML代码: 12345678910111213141516171819<style>                 div.outer{     &n

JavaScript中的工厂函数

wzgl阅读(45)评论(0)

不学习函数和对象,你不可能成为一名JavaScript程序员,并且当他们一起使用时,是构建块,我们需要从一个称为 组合(composition) 的强大对象范例开始。今天我们来看一些惯用的模式,使用工厂函数来组成函数,对象和 Promises 。组合模式是将一批子对象组织为树形结构,一条顶层的命令会在操作树中所有的对象。当一个函数返回一个对象时,我们称之他为 工厂函数(factory functi

angularJS与bootstrap结合实现动态加载弹出提示内容

wzgl阅读(63)评论(0)

angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板。Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒。用angularjs就像写后台代码,更规范,更结构化,更可控。 1.bootstrp的弹出提示 bootstrap已经帮我们

bootstrap和jQuery.Gantt的css冲突 如何解决

wzgl阅读(38)评论(0)

bootstrap是广泛使用的一个前端框架,而jQuery.Gantt在目前也是一个很好用的用于绘制甘特图的插件。 这次在同时使用它们时,发现甘特图显示异常,如图 不加载bootstrap.css,甘特图就不会出问题,很容易就定位出现bootstrap的css冲突问题。 但是要实际定位到具体是哪个样式所导致的却花了一些功夫。 1、先看了甘特图里与bootstrap的重复样式,有一个.row,于是我

基于Bootstrap使用jQuery实现简单可编辑表格

wzgl阅读(70)评论(0)

这篇文章主要介绍了基于Bootstrap使用jQuery实现简单可编辑表格的相关资料,需要的朋友可以参考下 editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列;(这里的操作包括 编辑当前行、在当前行下添加一行、删除当前行) handleFirst 设置表格的第一行

bootstrap data与jquery .data

wzgl阅读(45)评论(0)

bootstrap框架在使用中发现其data与jquery的data有些不一样的地方,记录一下,分享给大家 jquery官网对.data函数描述是:在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 存储键值(key/value): JS代码: 12345678$("body").data("foo&q

jquery ui bootstrap 实现自定义风格

wzgl阅读(74)评论(0)

本文主要是给大家分享了jQuery UI bootstrap的自定义风格,以及自定义的方法,非常的实用,有需要的小伙伴千万不要错过 首先看一下自定义提示框的效果图 alert 普通的提示当然可以自定义样式 confrim 确认框 支持callback 12345//message 提示的信息 ,callback(true/false)回调函数  window.shconfirm = functio

基于Bootstrap+jQuery.validate实现Form表单验证

wzgl阅读(71)评论(0)

这篇文章主要介绍了基于Bootstrap+jQuery.validate实现Form表单验证,需要的朋友可以参考下 基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1、form 表单代码[html] 123456789101112131415

写好你的JavaScript

wzgl阅读(68)评论(0)

前言 在实际工作中,我们应该经常会看到一些功能上没有问题,但编码风格和规范却十分糟糕的代码,这往往会让人不敢再往下阅读,甚至会影响阅读者一天的心情。这些代码不仅不易阅读,而且难以维护,它们一般会出自刚入门的编程新手,也会出自工作了好几年的老程序员手下。因此本文的目的在于帮助那些没有养成良好的编码风格,缺乏相应编码规范意识的JavaScript学习者们改善他们的编码形象。 编码形象 以上我提出了编码

纯js实现html转pdf

wzgl阅读(63)评论(0)

项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格、svg图片和样式。 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1、大部分浏览器就有这个功能。然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass。 2、利用第三方工