分类： Bootstrap

在移动设备浏览器上利用Bootstrap禁用网页缩放

admin 评论

在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Unslider – 非常实用的超小JQuery轮播slider插件！

admin 评论
  1. 引入jQuery 和 Unslider
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>
  2. 准备HTML代码
    <div> 
  <ul> 
    <li><img src="slider_1.jpg" /></li> 
    <li><img src="slider_2.jpg" /></li> 
    <li><img src="slider_3.jpg" /></li> 
  </ul> 
</div>
  3. 添加CSS样式
    .banner { position: relative; overflow: auto; } 
  .banner li { list-style: none; } 
    .banner ul li { float: left; }
  4. 启动！
    $(function() { 
  $('.banner').unslider(); 
});

官方网站：http://www.bootcss.com/p/unslider/

Font Awesome：精心打造的 Twitter Boostrap 矢量字体图标

admin 评论

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标，除了包括 Twitter Boostrap 的默认图标外，还有社交网络图标、Web 应用程序图标和编辑器图标等等，可以免费用于商业项目。

主要特色：

  • ✓  一种字体，249个图标，是网页操作的象形语言；
  • ✓  纯 CSS 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果；
  • ✓  无限缩放，矢量图标在任何尺寸下都一模一样；
  • ✓  免费使用，包括商业和非商业项目；
  • ✓  支持 Internet Explorer 7 浏览器；
  • ✓  能够在 Retina 屏幕完美呈现；
  • ✓  完全兼容 Twitter Boostrap 最新版本；
  • ✓  对设计师友好，设计师能够轻松使用；
  • ✓  和其它图标字体不同，兼容屏幕阅读器；

使用方法

　　使用 CSS：

  1. 拷贝 Font Awesome 字体目录到项目中；
  2. 拷贝 font-awesome.min.css 文件到项目中；
  3. 修改 font-awesome.min.css 文件中的字体路径到正确的位置；
  4. 在页面的 head 里引入 font-awesome.min.css 文件：

<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />

　　使用 LESS：

  1. 拷贝 Font Awesome 字体目录到你的项目中；
  2. 拷贝 font-awesome.less 文件到 bootstrap/less 目录。
  3. 打开 bootstrap.less 文件并替换 @import “sprites.less”; 为 @import “font-awesome.less”;
  4. 编辑 elusive-webfont.less 文件的 @FontAwesomePath 变量为字体路径：

@FontAwesomePath: "../font";

然后重新进行 LESS 编译就可以了。

Github     官方主页     猛击下载

如何 GitHub 无法访问，可能需要配置 hosts 才能访问：

207.97.227.239 github.com
207.97.227.252 nodeload.github.com
207.97.227.243 raw.github.com
204.232.175.78 documentcloud.github.com