下载LXUI
LXUI基于Boostrap V3.1改造而来，主要为了减少设计和编码的难度，提供丰富的样式组件。
LXUI依赖jQuery
在引入LXUI之前请先引入jQuery，如果你的项目为ie6+设计，请选择jQuery 1.x的版本，如果基于html5开发，可以选择更轻量的jQuery 2.x开发。下载jQuery
下载LXUI
良心UI插件版包含推荐的第三方插件文件，根据需求选择下载
Github
从GitHub直接下载LXUI的源码
包含了哪些文件
LXUI下载后可以看到目录和文件，这些文件按照类别放到了不同类别的目录中，并且提供了源码和压缩两种版本。
LXUI目录结构如下：
LXUI/
├── image/ (图片目录)
├── css/
│ ├── lxui.css
│ ├── lxui.min.css
│ ├── lxui-ie6.css (兼容IE6+)
│ └── lxui-ie6.min.css (兼容IE6+)
├── js/
│ ├── lxui.js
│ ├── lxui.min.js
│ ├── lxui-ie.js (兼容IE6+)
│ └── html5shiv.min.js
├── fonts/
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
└── plugins/ (第三方插件，可删除)
HTML模板
复制下面html代码粘贴到页面，简单无比。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LXUI -->
<link rel="stylesheet" href="css/lxui.min.css">
<!-- HTML5 Shiv 和 Respond.js 为了在 IE8 下支持响应式布局 -->
<!-- 注意: Hhtml5shiv.min.js 不能用本地路径 file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- LXUI -->
<script src="js/lxui.min.js"></script>
</body>
</html>
上例中出现的2个插件 html5shiv.min.js 和 respond.min.js 是为了在ie8下能够继续支持响应式布局。提供单独下载
注意: html5shiv.min.js 不能用本地路径，例如 file://
下载 html5shiv.min.js 下载 respond.min.js
禁用响应式布局
针对不同屏幕尺寸调整页面布局，使其在各个尺寸的屏幕上表现良好。（在没有引用 html5shiv.min.js 的情况下是兼容到最低IE9，如果引用则兼容最低IE8浏览器）
如果在开发前不打算使用响应式布局，只需要自己单独写布局即可。如开发期间准备禁用响应式布局，则按照以下步骤执行。
禁用响应式布局的步骤
- 移除
<meta> viewport标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 通过为
.container 设置一个width值从而覆盖框架的默认width设置，例如 width: 970px !important;。请确保这些设置全部放在默认的LXUI CSS后面。注意，你也可以略去 !important。
- 如果使用了导航条，需要移除所有导航条的折叠和展开行为。
- 对于栅格布局，额外增加
.col-xs-* classe或替换掉 .col-md-* 和 .col-lg-*。不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
全局概览
HTML5文档类型
LXUI使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
<!DOCTYPE html>
<html lang="zh-cn">
...
</html>
移动设备优先
为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在移动设备浏览器上，通过为viewport meta标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要根据项目需求而定。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
响应式图片
通过添加 .img-responsive class可以让图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸。
<img src="..." class="img-responsive" alt="Responsive image">
响应式容器
用 .container 包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了 width，用以匹配栅格系统。
<div class="container">
...
</div>
栅格系统
简介
通俗来讲，栅格系统就是将页面宽度平均分成12等份，不管什么布局，你行内的宽度加起来以一共是12个列。
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
列偏移
使用 .col-md-offset-* 可以将列偏移到右侧。这些class通过使用 * 选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4 将 .col-md-4 向右移动了4个列的宽度。
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
嵌套列
为了使用内置的栅格将内容嵌套，通过添加一个新的 .row 和一系列 .col-md-* 列到已经存在的 .col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。
Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 就可以很容易的改变列的顺序。
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
工具class
设置浮动
通过这两个class让页面元素左右浮动。 !important 被用来避免某些问题。
<div class="pull-left">...</div>
<div class="pull-right">...</div>
设置浮动的源码
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
不要用于导航条
如果是用于对齐导航条上的组件，请务必使用.navbar-left 或 .navbar-right。
清除浮动
使用 .clearfix 清除任意页面元素的浮动。
<!-- 清除浮动 -->
<div class="clearfix">...</div>
内容区域居中
将页面元素设置为 display: block 并通过设置 margin 使其居中。
<!-- 清除浮动 -->
<div class="clearfix">...</div>
显示隐藏内容
通过 .show 和 .hidden 可以强制显示或隐藏任一页面元素（包括在屏幕阅读器上）。这两个class使用了!important以避免冲突，原因和快速浮动类似。
<div class="show">...</div>
<div class="hidden">...</div>
|
