LXUI基于Boostrap V3.1改造而来，主要为了减少设计和编码的难度，提供丰富的样式组件。

 

　　LXUI依赖jQuery

 

　　在引入LXUI之前请先引入jQuery，如果你的项目为ie6+设计，请选择jQuery 1.x的版本，如果基于html5开发，可以选择更轻量的jQuery 2.x开发。下载jQuery

 

　　下载LXUI

 

　　良心UI插件版包含推荐的第三方插件文件，根据需求选择下载

 

　　Github

 

　　从GitHub直接下载LXUI的源码

 

　　LXUI下载后可以看到目录和文件，这些文件按照类别放到了不同类别的目录中，并且提供了源码和压缩两种版本。

 

　　LXUI目录结构如下：

 

　　复制下面html代码粘贴到页面，简单无比。

 

　　上例中出现的2个插件  和  是为了在ie8下能够继续支持响应式布局。提供单独下载

 

　　注意: html5shiv.min.js 不能用本地路径，例如 file://

 

　　下载 html5shiv.min.js 下载 respond.min.js

 

　　针对不同屏幕尺寸调整页面布局，使其在各个尺寸的屏幕上表现良好。（在没有引用  的情况下是兼容到最低IE9，如果引用则兼容最低IE8浏览器）

 

　　如果在开发前不打算使用响应式布局，只需要自己单独写布局即可。如开发期间准备禁用响应式布局，则按照以下步骤执行。

 

　　移除  viewport标签

 

　　通过为 设置一个width值从而覆盖框架的默认width设置，例如 。请确保这些设置全部放在默认的LXUI CSS后面。注意，你也可以略去 。

 

　　如果使用了导航条，需要移除所有导航条的折叠和展开行为。

 

　　对于栅格布局，额外增加  classe或替换掉  和 。不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。

 

　　LXUI使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

 

　　为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据标签。

 

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

 

　　通过添加  class可以让图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸。

 

　　用  包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了 ，用以匹配栅格系统。

 

　　通俗来讲，栅格系统就是将页面宽度平均分成12等份，不管什么布局，你行内的宽度加起来以一共是12个列。