自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(8)
  • 收藏
  • 关注

原创 动态样式语言——less运行环境的搭建及使用

由于CSS的维护和扩展工作艰巨。“动态样式语言”(如 less)在CSS的基础之上,添加了一些标准的“语言”所必须的内容:类型、变量、运算、函数、循环选择、继承等。 但是浏览器默认只支持静态样式语言,所以所有的动态样式首先必须“编译”为静态样式才可以实现渲染页面的功能! 所以 .less 文件必须用工具软件(lessc),转化为静态样式(CSS),才能被浏览器所使用。下面是两种转化方法:在客户端

2017-03-30 12:42:21 2221

原创 bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现

在一般大型的网页,会有顶部和侧面两个导航。bootstrap提供的附加导航(侧面导航)可以实现监听页面滚动功能,下面看一下是什么样的:如上图所示,右侧导航原本是相对定位的,当它随页面滚动到顶部的时候,会变成固定定位回到原来的位置(即data-offset-top扩展属性指定的位置)。且它是导航有滚动监听功能,当页面滚动到指定位置它会改变样式,也可以点击跳转到指定位置。实现代码如下:<!--注意扩展属

2017-03-27 00:14:31 2411

原创 bootstrap中jquery插件——Carousel轮播广告

轮播广告在网站中的应用实在是太常见了,下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果,下图为最终效果: 具体实现方法请看下面的代码:<div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000"> //data-interval设置轮播间隔为3秒钟

2017-03-26 21:33:55 927

原创 bootstrap组件——导航条

bootstrap提供了导航条组件,效果是这样的(也可以是黑底白字的样式): 这是在pc端下的样子,在移动端中间的导航会折叠起来,最右边多一个控制折叠的按钮,像下面这样: 具体实现代码如下:<div class="navbar navbar-default"> //.navbar-inverse为黑底白字的样式,如有需要可以自主更改。 <div class="contain

2017-03-26 19:59:22 1220

原创 bootstrap中jquery插件——collapse折叠效果-手风琴效果

先来掌握collapse插件的基本用法,再慢慢深入实例。 collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下:<a class="btn btn-success" href="#collapseTest" data-toggle="collapse">Link with href</a> //a标签触发折叠效果 <button class="b

2017-03-24 21:37:35 3098

原创 bootstrap中jquery插件——警告框、工具提示框、弹出框、模态框

bootstrap的JavaScript插件中提供了几种形式的提示框。其中就有警告框、工具提示框、弹出框和模态框。下面就来一个一个的看看它们是怎样使用的吧!警告框 它就是这个样子的,点击右侧的小叉子可以将它隐藏。如果不想要淡淡消失的效果可以将 .fade.in 类去掉,和bootstrap其他组件改变颜色的方式一样(只需将类 .alert-info改为 .alert-danger / .alert

2017-03-24 10:46:43 4040

原创 bootstrap中jquery插件——下拉菜单

这篇是用来记录怎样为应用了bootstrap下拉菜单组件的元素引用下拉菜单插件的,其实无论使用bootstrap中哪一个插件都有两种方式: 一种是直接使用data-*扩展属性,这是 Bootstrap 中的一等 API,也应该是首选方式。 另一种是使用编程方式的 API,即用写js的方式来调用插件函数实现效果,一般情况不建议使用这种方式。下拉菜单插件如果使用JavaScript API的方式

2017-03-22 16:36:41 1488

原创 bootstrap中jquery插件——带下拉菜单的标签页

这篇是用来记录怎样为应用了bootstrap样式、组件的元素引用标签页插件,其实无论使用bootstrap中哪一个插件都有两种方式: 一种是直接使用data-*扩展属性,这是 Bootstrap 中的一等 API,也应该是首选方式。 另一种是使用编程方式的 API,即用写js的方式来调用插件函数实现效果,一般情况不建议使用这种方式。应用了组件还没有应用标签页插件时的写法和效果: <ul

2017-03-22 15:29:40 1959

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除