基于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 { .navbar .nav > li > a { .navbar .nav > .active > a,.navbar .nav > .active > a:hover,.navbar .nav > .active > a:focus { 二、按钮同样的,StyleBootstrap的按钮不仅可以设置丰富的色彩,而且同样支持下拉,外观非常不错。核心CSS代码: .btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] {
color: #333333; background-color: #e6e6e6; } .btn-primary { .btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] { .btn-warning { .btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled] { .btn-danger { .btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled] { .btn-success { .btn-info { 三、取色器StyleBootstrap的取色器功能很强大,你可以从色版上选择一种颜色,也可以输入颜色的十六进制值,同时你可以拖动色块区域快速定位你需要的颜色。运用了jPicker插件,关于jPicker插件的CSS代码,你可以在这里下载,并引用到项目中,然后通过以下CSS代码调用: 总结总的来说,StyleBootstrap作为一款CSS框架还是不错的,更多关于StyleBootstrap的使用,你也可以直接前往其官方网站进行查看。如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |