基于Bootstrap的UI扩展 StyleBootstrap


Posted in Javascript onJune 17, 2016

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

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

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

基于Bootstrap的UI扩展 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的按钮不仅可以设置丰富的色彩,而且同样支持下拉,外观非常不错。 

基于Bootstrap的UI扩展 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的取色器功能很强大,你可以从色版上选择一种颜色,也可以输入颜色的十六进制值,同时你可以拖动色块区域快速定位你需要的颜色。 

基于Bootstrap的UI扩展 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个精彩的专题:

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

Javascript 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
Bootstrap前端开发案例二
Jun 17 #Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 #Javascript
Bootstrap前端开发案例一
Jun 17 #Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 #Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 #Javascript
基于JS实现导航条flash导航条
Jun 17 #Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 #Javascript
You might like
最小化数据传输――在客户端存储数据
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python基于twisted框架编写简单聊天室
2018/01/02 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
Python远程linux执行命令实现
2020/11/11 Python
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
求职意向书
2014/04/01 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
大班下学期个人总结
2015/02/13 职场文书
大学生村官个人总结
2015/02/15 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
交通事故被告答辩状
2015/05/22 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书