基于Bootstrap的UI扩展 StyleBootstrap


StyleBootstrap是一款基于Bootstrap的开源UI框架,目前基于Bootstrap风格的扩展插件很多,比如Bootswatch、BootMetro等,这些之前我们都有做过介绍。StyleBootstrap应该说是对Bootstrap样式风格的一种扩展,除了一些基本的按钮、表单、菜单之外,StyleBootstrap还设计了功能全面的颜色拾取器,非常不错。 

StyleBootstrap的特点
 拥有Bootstrap简洁高效的特点,配置灵活。
 兼容任一版本的Bootstrap。
 功能强大的调色板是其最大的特色。 

StyleBootstrap相关组件实例及代码
 一、导航条
 StyleBootstrap的导航条功能比较强大,除了普通的菜单项,还可以有下拉菜单和表单的各种组合,其更大的亮点是可以自定义调节菜单的样式,包括上下边距、背景色等参数。 

核心CSS代码:

 .navbar-inner {
 background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
 background-image: -ms-linear-gradient(top, #ffffff, #f2f2f2);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
 background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
 background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
 background-image: linear-gradient(top, #ffffff, #f2f2f2);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'ffffff, endColorstr='#'f2f2f2, GradientType=0);
}

.navbar .brand {
 padding: 8px 20px 12px;
 font-size: 20px;
 color: #727272;
}

.navbar .divider-vertical {
 height: 41px;
 background-color: #ffffff;
 border-right: 1px solid #c6c6c6;
}

.navbar .nav > li > a {
 padding: 10px 10px 11px;
 font-size: 14px;
 color: #666666;
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
 color: #424242;
} 

二、按钮
 同样的,StyleBootstrap的按钮不仅可以设置丰富的色彩,而且同样支持下拉,外观非常不错。 

核心CSS代码:

 .btn {
 color: #333333;
 background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
 background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: linear-gradient(top, #ffffff, #e6e6e6);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'ffffff, endColorstr='#'e6e6e6, GradientType=0);
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
 color: #333333;
 background-color: #e6e6e6;
}

.btn-primary {
 background-color: #006dcc;
 color: #ffffff;
 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
 background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
 background-image: -o-linear-gradient(top, #0088cc, #0044cc);
 background-image: linear-gradient(top, #0088cc, #0044cc);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'0088cc, endColorstr='#'0044cc, GradientType=0);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
 background-color: #0044cc;
}

.btn-warning {
 color: #ffffff;
 background-image: -moz-linear-gradient(top, #fbb450, #f89406);
 background-image: -ms-linear-gradient(top, #fbb450, #f89406);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
 background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
 background-image: -o-linear-gradient(top, #fbb450, #f89406);
 background-image: linear-gradient(top, #fbb450, #f89406);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'fbb450, endColorstr='#'f89406, GradientType=0);
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
 background-color: #f89406;
}

.btn-danger {
 color: #ffffff;
 background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
 background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
 background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
 background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
 background-image: linear-gradient(top, #ee5f5b, #bd362f);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'ee5f5b, endColorstr='#'bd362f, GradientType=0);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
 background-color: #bd362f}

.btn-success {
 color: #ffffff;
 background-image: -moz-linear-gradient(top, #62c462, #51a351);
 background-image: -ms-linear-gradient(top, #62c462, #51a351);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
 background-image: -webkit-linear-gradient(top, #62c462, #51a351);
 background-image: -o-linear-gradient(top, #62c462, #51a351);
 background-image: linear-gradient(top, #62c462, #51a351);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'62c462, endColorstr='#'51a351, GradientType=0);
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
 background-color: #51a351;
}

.btn-info {
 color: #ffffff;
 background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
 background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
 background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
 background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
 background-image: linear-gradient(top, #5bc0de, #2f96b4);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'5bc0de, endColorstr='#'2f96b4, GradientType=0);
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
 background-color: #2f96b4;
} 

三、取色器
 StyleBootstrap的取色器功能很强大,你可以从色版上选择一种颜色,也可以输入颜色的十六进制值,同时你可以拖动色块区域快速定位你需要的颜色。 

运用了jPicker插件,关于jPicker插件的CSS代码,你可以在这里下载,并引用到项目中,然后通过以下CSS代码调用:

 @media all 
{
 #jPicker { margin: 0px 8px; text-align: left; }
 #jPicker ul { font-size: 15px; margin: 0px 0px 0px 15px; padding: 0px; }
 #jPicker ul li { list-style: disc; padding: 2px 0px; }
 #jPicker ul li ul { margin-bottom: 10px; }
 #jPicker ul li ul li { list-style: circle; }
 #jPicker p { font-size: 13px; padding: 0px 10px; }
 #jPicker hr { clear: both; }
 #jPicker h2.jPicker { font-size: 16px; padding: 20px 10px; }
 #jPicker code { color: #8bd; font-size: 14px; font-weight: bold; }
 #jPicker pre { background: #eee; border: 1px solid #000; color: #000; display: block; font-size: 11px; margin: 10px 5px; padding: 5px; }
 #jPicker span { font-size: 13px; text-align: center; }
 #jPicker a { color: #ff8050; }
 #jPicker input { font-size: 13px; padding: 2px 5px; }
 #jPicker h2 { font-size: 16px; margin: 10px 0px; }
} 

总结
 总的来说,StyleBootstrap作为一款CSS框架还是不错的,更多关于StyleBootstrap的使用,你也可以直接前往其官方网站进行查看。

本文链接:http://www.codeceo.com/article/stylebootstrap-base-bootstrap.html
本文作者:码农网 – 小峰

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持phpstudy。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3