陈雪珊的博客

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

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

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

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

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

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

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

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