基于Bootstrap的UI扩展 StyleBootstrap

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插件使用教程

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

时间: 2016-06-15

全面解析Bootstrap中tooltip、popover的使用方法

一.tooltip(提示框)  源码文件:  Tooltip.js Tooltip.scss 实现原理:  1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.width.height等) 2.计算tooltip的位置,是top.left.bottom.right其中一个 3.然后根据计算的位置值,运算出坐标值 4.给tooltip应用坐标值  源码分析:  1.ownerDocument:文档:包含两个对象:<DocType>.documentEle

Bootstrap Paginator分页插件使用方法详解

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件 首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator

Bootstrap每天必学之工具提示(Tooltip)插件

当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发.工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息. 如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js.或者,正如Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min

jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

类似的文章已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jquery.validate.unobtrusive.requirejs.Bootstrap,都是当前最/较新版本.jquery.validate就不用说了,目前比较流行的前端校验组件:jquery.validate.unobtrusive基于jquery.validate,是为了配合Asp.net mvc

BootStrap tooltip提示框使用小结

提示框 提示框的基本使用方式为: 复制代码 代码如下: <span data-toggle="tooltip" data-original-title="this is alert content">test message</span> data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title 提示框不提供HTML触发方式只能通过JS来进行触发: $("[dat

Bootstrap每天必学之模态框(Modal)插件

本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一.基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l

基于bootstrap3和jquery的分页插件

自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般.拿出来献丑了. /** * 基于bootstrap3的jquery分页插件 * 调用方式分两种 * 1.直接调用法 * 普通大小 * $.mypage(id,now,max,fn); * 大尺寸 * $.mypagelg(id,now,max,fn); * 小尺寸 * $.mypagesm(id,now,max,fn); * * 参数说明:id为放置分页容器的ID,now为当前页,max为最大页,

扩展Bootstrap Tooltip插件使其可交互的方法

本文实例讲述了扩展Bootstrap Tooltip插件使其可交互的方法.分享给大家供大家参考,具体如下: 最近在公司某项目开发中遇见一特殊需求,请笔者帮助,因此有了本文的插件.在前端开发中tooltip是一个极其常用的插件,它能更好向使用者展示更多的文档等帮助信息.它们通常都是一些静态文本信息.但同事他们的需求是需要动态交互,在文本信息中存在帮助网页的链接.如果使用常规tooltip,则在用户移出tooltip依赖DOM节点后,tooltip panel则将被隐藏.所以用户没有办法点击到这些交

基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

JS组件Bootstrap dropdown组件扩展hover事件

bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看 下面是完整的js插件代码

封装的dialog插件 基于bootstrap模态对话框的简单扩展

在使用bootstrap 模态对话框时需要在页面写对话框html,如果一个页面有许多地方需要对话框,那意味着需要写多个,感觉很麻烦,平时不太习惯bootstrap 模态对话框这种方式,所以做了个简单封装及扩展,增加了自定义标题,宽度和高度,并根据宽高居中显示. 默认属性: id:"modal",//弹窗id title:"dialog",//弹窗标题 width:"600",//弹窗宽度,暂时不支持% height:"500"

基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. 1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="moda

Bootstrap模态对话框用法简单示例

本文实例讲述了Bootstrap模态对话框用法.分享给大家供大家参考,具体如下: 环境:bootstrap-3.3.5,jquery-3.0.0 代码: <!DOCTYPE html> <html> <head> <title>www.jb51.net bootstrap模态对话框</title> <meta http-equiv="Content-type" content="text/html; chars

Bootstrap模态对话框的简单使用

模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 1.用法 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-tog

Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. 1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="moda

Bootstrap模态对话框中显示动态内容的方法

首先引入bootstrap的js和css,在引入对应版本的jquery: 添加按钮,点击弹出模态窗体: <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal" href="/Home/Test" rel="external nofollow" ></button> 创建模态对话框:

基于Bootstrap使用jQuery实现简单可编辑表格

editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括 编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu

浅析BootStrap模态框的使用(经典)

BootStrap模态框简单概述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 1,Bootstrap 模态对话框和简单使用 div id="myModal" class="modal hide fade"> <div class="modal-he

Bootstrap基本插件学习笔记之模态对话框(16)

Bootstrap自带了很多JQuery插件,给用户做前端开发提供了很大的方便.对于每一个插件,有2种引用方式:一是单独引用,即使用Bootstrap的单独*.js文件,这种方式需要注意的是一些插件和CSS组件可能依赖其他插件,所以单独引用的时候,需要弄清楚这种包含关系一并引用:二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js,需要注意的是不能同时引用这2个文件. Bootstrap自带了很多基本的插件,包括模态对话框.标签切换.Tooltip提示工具等.首

基于Bootstrap的网页设计实例

废话不多说了,直接给大家贴代码了,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content=&qu