基于Bootstrap的UI扩展 StyleBootstrap

站长资源 2024/11/16 佚名

11 1538 11

相思资源网 Design By www.200059.com

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的使用，你也可以直接前往其官方网站进行查看。

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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

Bootstrap,UI,StyleBootstrap

标签：

Bootstrap,UI,StyleBootstrap

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“基于Bootstrap的UI扩展 StyleBootstrap”

暂无基于Bootstrap的UI扩展 StyleBootstrap的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

基于Bootstrap的UI扩展 StyleBootstrap

Bootstrap,UI,StyleBootstrap

基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

Bootstrap前端开发案例二

评论“基于Bootstrap的UI扩展 StyleBootstrap”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

基于Bootstrap的UI扩展 StyleBootstrap

Bootstrap,UI,StyleBootstrap

基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

Bootstrap前端开发案例二

评论“基于Bootstrap的UI扩展 StyleBootstrap”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存