基于Bootstrap的UI扩展 StyleBootstrap

StyleBootstrap

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

StyleBootstrap的特点

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

StyleBootstrap相关组件实例及代码一、导航条

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

核心CSS代码：

.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: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,#0044cc);
background-image: -webkit-gradient(linear,from(#0088cc),to(#0044cc));
background-image: -webkit-linear-gradient(top,#0044cc);
background-image: -o-linear-gradient(top,#0044cc);
background-image: linear-gradient(top,#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,#f89406);
background-image: -webkit-gradient(linear,from(#fbb450),to(#f89406));
background-image: -webkit-linear-gradient(top,#f89406);
background-image: -o-linear-gradient(top,#f89406);
background-image: linear-gradient(top,#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,#bd362f);
background-image: -webkit-gradient(linear,from(#ee5f5b),to(#bd362f));
background-image: -webkit-linear-gradient(top,#bd362f);
background-image: -o-linear-gradient(top,#bd362f);
background-image: linear-gradient(top,#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,#51a351);
background-image: -webkit-gradient(linear,from(#62c462),to(#51a351));
background-image: -webkit-linear-gradient(top,#51a351);
background-image: -o-linear-gradient(top,#51a351);
background-image: linear-gradient(top,#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,#2f96b4);
background-image: -webkit-gradient(linear,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#2f96b4);
background-image: -o-linear-gradient(top,#2f96b4);
background-image: linear-gradient(top,#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代码调用：

总结

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

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

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