基于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 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
javascript简单链式调用案例分析
May 10 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
解析原生JS getComputedStyle
May 25 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
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP中的cookie
2006/11/26 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python队列Queue的详解
2019/05/10 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
班主任个人工作反思
2014/04/28 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
小学优秀班主任材料
2014/12/17 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
创业计划书之农家乐
2019/10/09 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android