这就是为什么 Bootstrap 是迄今为止市场上最流行的框架。所有开发者都听说过 Bootstrap，超过 80%的开发者表示他们很乐意使用它。

但这并不意味着如果您愿意货比三家，就没有一些很好的选择。Bootstrap 不会永远领先，并且有许多新的轻量级和强大的 CSS 框架。

如果您厌倦了使用 Bootstrap 和 Foundation 进行编码并且厌倦了使用复杂的 CSS 规则，那么此列表适合您。 

从采用纯 CSS 方法的框架到具有完全可定制主题的极简框架，没有任何遗漏。让我们开始吧…

1. Bulma

Bulma是 Bootstrap 和 Foundation 最受欢迎的替代品之一。它是一个完全免费的开源 CSS 框架，没有陡峭的学习曲线。使用 Bulma 不需要任何 CSS 知识。

当您添加它提供的各种颜色、响应能力和干净的基于 flexbox 的网格时，难怪 Bulma 每天都变得越来越流行。Bulma 是一个文档齐全的框架，您绝对应该尝试一下。

2. UIkit

如果您正在寻找可以与 HTML 和 JS 连接的轻量级但功能强大的 CSS 框架，Ulkit适合您。它完全支持从右到左的语言，并拥有最好的图标库之一。

请记住，Ulkit 也很容易使用。总而言之，Ulkit 是一个出色的 Bootstrap 替代品，非常适合为桌面和移动屏幕设计 Web 布局。

3. HTML5 Boilerplate

尽管 Bootstrap 相对容易学习，但它不仅仅是一个前端模板。那么，如果您需要一个完全兼容的 JavaScript、CSS3 和 HTML5 模板怎么办？在这种情况下，HTML5 Boilerplate是一个不错的选择。

当然，由于它是一个模板，所以这个框架不包括布局和组件模块。但是，如果您需要一个提供大量文档的可靠 CSS 模板，HTML5 Boilerplate 是一个很好的解决方案。

4. Metro UI

Metro UI是市场上最灵活的 CSS 框架之一。这个前端框架可以很容易地与 Angular、React 等基于 JavaScript 的框架结合使用。

在我们的测试过程中，我们发现 Metro UI 是一个优秀的开源 CSS 框架，也是 Foundation 的绝佳替代品。

5. Skeleton

作为二合一解决方案，Skeleton很快就出现在我们的列表中。这既是一个样板文件，也是一个全面的 CSS 框架。在测试过程中，我们喜欢定制它的 12 列网格，我们发现它几乎没有学习曲线。 

自动调整宽度大小就像一个魅力，并且语法是完全响应的。这就是为什么我们认为 Skeleton 是一个优秀的 Bootstrap 替代品。

6. Bootflat

如果您正在寻找一种快速创建 Web 应用程序的方法，Bootflat是您需要的框架。Bootflat 的组件是用 CSS3 和 HTML5 构建的，框架提供了一个全面的配色方案面板供您选择。 

Bootflat 的外观和行为类似于 Bootstrap 的简化版本。然而，这并不意味着这个 CSS 框架不具备可扩展性和鲁棒性。相反，您可以完全控制您创建的网页设计的大小和性能。 

7. Semantic UI

如果您排除Semantic UI没有 Bootstrap 提供的实用程序类这一事实，那么您应该尝试一下它是一个全面的 CSS 框架。最好的语义功能允许您在不使用 BEM 方法的情况下编写 HTML 代码。 

因此，如果您需要一个可以帮助您在几分钟内编写可读代码的框架，Semantic 就是您的最佳选择。 

8. Susy

我们知道现在大多数开发人员都使用 flexbox 和原生 CSS 网格。尽管如此，如果您需要一个支持旧版浏览器的网格系统，没有什么比Susy更好的了。虽然 Susy 不再维护，但它是最灵活的老式网格系统之一。 

9. Materialize

与此列表中的大多数 CSS 框架一样，Materialize是使用 HTML、CSS 和 JavaScript 构建的。 

它专门设计用于帮助您使用标准模板和可自定义组件更快地进行开发。顾名思义，Materialize 是基于 Material Design 的基本原则。

10. Kickstart

如果您需要 Bootstrap 的轻量级替代品，Kickstart是适合您的 CSS 库。Kickstart 的一大优点是它不需要 jQuery，这使得它非常小。 

当然，就像精简版的 Bootstrap 一样，这个 CSS 框架没有那么健壮。不过，对于那些需要 UI 框架和综合样板库的人来说，这是一个很好的选择。 

11. Tailwind

凭借快速的造型过程和它提供的终极自由度，Tailwind在一些开发人员中非常受欢迎。这是一个实用程序优先的前端框架，具有完全响应性和稳定性。 

不幸的是，Tailwind CSS 需要一些时间来学习，而且在修改 CSS 规则时它并不是最灵活的选择。

12. Pure CSS

雅虎专门开发了Pure CSS来帮助开发人员创建完全响应的网页。 

我们认为 Pure 是 Bootstrap 的极简替代品，它提供了初学者需要的每个模块（导航菜单、网格、表格等）。

13.PowertoCSS

PowertoCSS 出现在这个列表中是有充分理由的。这是一个最终响应的 CSS 框架，您可以使用它在任何平台上创建网格和扩展 Web 应用程序。 

PowertoCSS 在设计方面基于模块化架构和可扩展性。

与其他 CSS 框架不同，PowertoCSS 非常轻量级，对初学者友好，并附带详细的文档。 

编码过程很简单，我们发现学习曲线很浅。

14. Spectre

Spectre是我们为本文测试的最灵活、最轻量级的 CSS 框架之一。 

它有一个现代的（flexbox）布局系统；它是完全可定制的，可让您获得快速、有吸引力的结果。 

15. Primer

我们最后的建议是Primer，一个很棒的开源 CSS 框架。 

准确地说，Primer 更像是一个设计系统，让您可以使用 BEM CSS 框架并快速高效地创建项目。

因此，即使 Primer 不是严格意义上的 CSS 框架，它也会帮助您使用 React 和 Figma 组件、图标和高级文档来统一所有这些。

总结

选择正确的 CSS 框架并不容易。这完全取决于您作为前端开发人员的个人需求和偏好。 

尽管 Bootstrap 和 Foundation 仍然是最流行的框架，但上面介绍的许多替代方案将继续受到欢迎，这是有充分理由的。

主要特点

• 纯JS编写，无任何依赖
• 支持多重画廊(Multiple-gallery)效果, 且允许自定义参数
• 支持手势滑动(仅在支持多点触控设备上)
• 现代简约风格
• 图像字幕支持
• 响应式的图像
• CSS3转换
• SVG按钮，没有额外的文件下载
• 压缩后大约2.3KB

浏览器兼容

• IE 8+
• Chrome
• Firefox 3.6+
• Opera 12+
• Safari 5+
• Sleipnir

演示和下载

• 官方下载： https://github.com/feimosi/baguetteBox.js
• 在线演示： https://feimosi.github.io/baguetteBox.js/
• WordPress插件： https://github.com/mikejandreau/baguetteBox-WP （好像仅适用于WP插入的相册）

在设计达人看到这个幻灯的介绍，非常不错，转载分享下。

随着移动端的普及，为了能让访客方便查看网页内容，网页幻灯片效果（又称：灯箱，轮换图）也需要支持移动端，即响应式，当然再加上拖拽支持就更多好了，今天为大家分享一个实用的幻灯片 jQuery 插件「Slick」，几乎能满足大部分网页的需求。

Slick 这个插件功能多且实用，下面我们一起来看看介绍。

jQuery 名称：Slick
下载&演示：http://kenwheeler.github.io/slick/

1.多组切换

多组同时切换，如下图，第一屏是1，2，3图，点击下一屏按钮后，就直接切的到4，5，6屏了。

2. 响应式兼容

自适应这个需求是必须的了，看看效果，还不错呢。

3. 单独固定幻灯片宽度

可以为每个切的图像设置不同的宽度，即不统一宽度也可以哦！

4. 自动高度

高度适应，就是如果有多行文字时，不会因为默认高度而被隐藏掉。

5. 居中模式

居中显示模式，重点突出中间哪个图像。

6. Lazy Loading (延迟加载模式)

如 DEMO，首先前3张图是默认图片是加载完成的，后面第4张开始，需要切换的时候才加载，这样起到按需加载的优化效果。

7. 自动播放

可以设置第隔 xx 秒，自动切换。

8. 渐变切换效果

加入一些切的效果。

9. 缩略图模式

可以在大图下面加入缩略图，优点就是让用户预知下一张图的内容，有时真佩服创作这些幻灯片模式的前辈，想法很全面。

10.拖拽切换

用鼠标或手势都可以拖拽切换，这效果和 APP 一样啦，Cool~

下图有错字，该 S 的百度五笔（切的 ->切的）sorry…

今天就介绍到这里，转发、点赞随意……

3 栏演示       4 栏演示       Bootstrap 4 演示      Foundation 演示   

看了演示相信大家知道 Theia Sticky Sidebar 的用处了，如有需要，那就用在自己的项目中：

https://github.com/WeCodePixels/theia-sticky-sidebar

如果你的网站是基于WordPress搭建的，又不会自己折腾，那就可以试试已经开发好的WordPress插件：

Theia Sticky Sidebar for WordPress

倡萌今天推荐的 OkayNav 就是一个非常棒的项目，它是根据浏览器宽度自动隐藏多余菜单的响应式菜单，一起来看下演示效果：

OkayNav 支持 IE9+、Firefox 和 Chrome 等主流浏览器。过渡效果支持 IE10+。截止本文发布（2016年5月9日），OkayNav 还不支持多级菜单，不过这个已经在开发者的开发计划中，如果哪位朋友测试支持了，希望回复告知下哦！

作者的开发计划：

• 支持 AMD / CommonJS
• 多级导航菜单
• 添加选项设置​​某些导航项目优先
• 添加选项设置隐藏或显示所有导航项目，而不是逐步隐藏

你也可以自己在线测试下：http://codepen.io/VPenkov/full/wMZBOg/

下载地址：https://github.com/VPenkov/okayNav

下面的样例代码的功能就是，当设备宽度小于 420px 的时候，就加载小图片，否则加载大图片，同时，图片加载后移除加载器。

实际的演示效果请访问：http://dinbror.dk/blazy/

bLazy 下载及详细参数使用说明，请访问：http://dinbror.dk/blog/blazy/

$str=preg_replace("/\s+/", " ", $str); //过滤多余回车
$str=preg_replace("/<[ ]+/si","<",$str); //过滤<__("<"号后面带空格)
$str=preg_replace("/<\!–.*?–>/si","",$str); //注释
$str=preg_replace("/<(\!.*?)>/si","",$str); //过滤DOCTYPE
$str=preg_replace("/<(\/?html.*?)>/si","",$str); //过滤html标签
$str=preg_replace("/<(\/?head.*?)>/si","",$str); //过滤head标签
$str=preg_replace("/<(\/?meta.*?)>/si","",$str); //过滤meta标签
$str=preg_replace("/<(\/?body.*?)>/si","",$str); //过滤body标签
$str=preg_replace("/<(\/?link.*?)>/si","",$str); //过滤link标签
$str=preg_replace("/<(\/?form.*?)>/si","",$str); //过滤form标签
$str=preg_replace("/cookie/si","COOKIE",$str); //过滤COOKIE标签
$str=preg_replace("/<(applet.*?)>(.*?)<(\/applet.*?)>/si","",$str); //过滤applet标签
$str=preg_replace("/<(\/?applet.*?)>/si","",$str); //过滤applet标签
$str=preg_replace("/<(style.*?)>(.*?)<(\/style.*?)>/si","",$str); //过滤style标签
$str=preg_replace("/<(\/?style.*?)>/si","",$str); //过滤style标签
$str=preg_replace("/<(title.*?)>(.*?)<(\/title.*?)>/si","",$str); //过滤title标签
$str=preg_replace("/<(\/?title.*?)>/si","",$str); //过滤title标签
$str=preg_replace("/<(object.*?)>(.*?)<(\/object.*?)>/si","",$str); //过滤object标签
$str=preg_replace("/<(\/?objec.*?)>/si","",$str); //过滤object标签
$str=preg_replace("/<(noframes.*?)>(.*?)<(\/noframes.*?)>/si","",$str); //过滤noframes标签
$str=preg_replace("/<(\/?noframes.*?)>/si","",$str); //过滤noframes标签
$str=preg_replace("/<(i?frame.*?)>(.*?)<(\/i?frame.*?)>/si","",$str); //过滤frame标签
$str=preg_replace("/<(\/?i?frame.*?)>/si","",$str); //过滤frame标签
$str=preg_replace("/<(script.*?)>(.*?)<(\/script.*?)>/si","",$str); //过滤script标签
$str=preg_replace("/<(\/?script.*?)>/si","",$str); //过滤script标签
$str=preg_replace("/javascript/si","Javascript",$str); //过滤script标签
$str=preg_replace("/vbscript/si","Vbscript",$str); //过滤script标签
$str=preg_replace("/on([a-z]+)\s*=/si","On\\1=",$str); //过滤script标签
$str=preg_replace("/&#/si","&＃",$str); //过滤script标签

在网页的 </body> 前面添加下面的代码（请修改 12 行的 uid 为自己的）：

<div id="bdshareside">
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
<div class="shareLogo"></div>
<div class="shareIcon">
<a class="bds_qzone" title="分享到QQ空间" href="proxy.php?url=#"></a>
<a class="bds_tsina" title="分享到新浪微博" href="proxy.php?url=#"></a>
<a class="bds_tqq" title="分享到腾讯微博" href="proxy.php?url=#"></a>
</div>
<span class="bds_more"></span>
</div>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&mini=1&uid=11321" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>

然后在css文件添加下面的代码：

#bdshareside{width:38px;height:140px;border:1px solid #e6e6e6;background-color:#eee;position:fixed;top:270px;right:0;z-index:1024;*position:absolute}
#bdshareside .shareIcon a{padding:0;margin:0;width:25px;height:25px;margin-left:9px;margin-bottom:2px;_margin-left:4px}
#bdshareside .shareLogo{width:38px;height:32px;background:transparent url(https://www.cmhello.com/wp-content/uploads/2013/10/bdshare.png) -72px -24px no-repeat}
#bdshareside .bds_more{display:block;background:transparent url(https://www.cmhello.com/wp-content/uploads/2013/10/bdshare.png) -16px 5px no-repeat!important;width:38px;height:25px;padding:0}
#bdshareside .bds_more:hover{background:transparent url(https://www.cmhello.com/wp-content/uploads/2013/10/bdshare.png) -46px 5px no-repeat!important}

代码中用到的图片，请下载上传到自己的服务器（右键另存为），以防失效：

在线演示及下载

随着窗口变小（默认768px），自动切换为手风琴样式：

Easy Responsive Tabs to Accordion 支持同一个页面使用多个范例，跨浏览器支持（IE7 +，Chrome，火狐，Safari和Opera）以及移动、平板设备。

在线演示 | 下载地址

当然了，如果你使用WordPress，还可以直接下载安装 WP Easy Responsive Tabs to Accordion 插件。