可视化布局以及常用UI

可视化布局

http://www.bootcss.com/p/layoutit/

实用的快速布局网站

Flat UI 一个基于bootstrap的主题，界面非常之漂亮
http://www.bootcss.com/p/flat-ui/

jQuery UI

http://www.jqueryui.org.cn/

 

EASY UI

http://www.jeasyui.net/

 

 bootstrap移动端适应

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

width 属性控制设备的宽度。假设网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，添加 user-scalable=no 可以禁用其缩放（zooming）功能
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉

 

bootstrap常用类总结

文本设置

强调相关类

.text-muted   ：提示，使用浅灰色（#999）
.text-primary ：主要，使用蓝色（#428bca）
.text-success ：成功，使用浅绿色(#3c763d)
.text-info    ：通知信息，使用浅蓝色（#31708f）
.text-warning ：警告，使用黄色（#8a6d3b）
.text-danger  ：危险，使用褐色（##a94442）

对齐相关类

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

列表

无符号列表

<ul class = "list-unstyled"></ul>

无符号横向列表

<ul class = "list-inline"></ul>

代码段

单行内联代码

<code>单行内联代码</code>

多行代码

<pre>多行代码</pre>

用户输入代码

<kbd>用户输入代码</kbd>

滚动代码

class = "<b>.pre-scrollable</b>"

表格设置

.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格