jQuery UI Bootstrap是什么?

jQuery UI Bootstrap是一个将jQuery UI集成到Bootstrap上的CSS框架，jQuery UI Bootstrap不仅可以利用jQuery UI强大的控件库，同时还可以享受Bootstrap那种清新自然的主题风格，所以越来越多的前端开发者都在使用jQuery UI Bootstrap。
 jQuery UI Bootstrap的特点
----- 基于jQuery UI，因此控件功能非常强大，可以使用全部的jQuery UI控件。
----- 基于Bootstrap，不同控件有了统一的外观。
----- 免费开源，你可以很方便地下载和使用。

jQuery UI Bootstrap常用控件的使用
下面我们来介绍几个最常用的jQuery UI Bootstrap控件，使用方法都非常简单。

jQuery UI Bootstrap 按钮

// Button
$('button').button();
// Anchors, Submit
$('.button').button();

jQuery UI Bootstrap 对话框

// Dialog Link
$('#dialog_link').click(function () {
 $('#dialog_simple').dialog('open');
 return false;
});

// Modal Link
$('#modal_link').click(function () {
 $('#dialog-message').dialog('open');
 return false;
});

// Dialog Simple
$('#dialog_simple').dialog({
 autoOpen: false,
 width: 600,
 buttons: {
  "Ok": function () {
   $(this).dialog("close");
  },
  "Cancel": function () {
   $(this).dialog("close");
  }
 }
});

// Dialog message
$("#dialog-message").dialog({
 autoOpen: false,
 modal: true,
 buttons: {
  Ok: function () {
   $(this).dialog("close");
  }
 }
});

jQuery UI Bootstrap 日期选择器

// Datepicker
$('#datepicker').datepicker({
 inline: true
});

jQuery UI Bootstrap 菜单

//####### Menu
$("#menu").menu();

jQuery UI Bootstrap还有很多控件，这里就不一一列举了，大家可以前往其官方网站下载使用。

本文链接：http://www.codeceo.com/article/jquery-ui-bootstrap.html
本文作者：码农网 – 小峰

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

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

赞 (0)

相关推荐

  • WebApi+Bootstrap+KnockoutJs打造单页面程序

    WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处 在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web App

  • JS表格组件神器bootstrap table详解（基础版）

    JS表格组件神器bootstrap table详解（基础版）

    一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

  • 基于Bootstrap的UI扩展 StyleBootstrap

    基于Bootstrap的UI扩展 StyleBootstrap

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

  • BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

    BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4的语法,虽然没有完全掌握,但是算是有了一个大致的了解.于是乎有了今天的这篇文章:通过T4模板快速生成页面. KnockoutJS系列文章: BootstrapTable与KnockoutJS相结合实现增删改查功能[一] BootstrapTable与KnockoutJS相结合实现增删改查功能[二]

  • 使用BootStrap实现用户登录界面UI

    使用BootStrap实现用户登录界面UI

    先给大家展示下效果图,如果大家感觉还不错,请继续参考实现思路详解. 布局 1.左右各一半(col-md-6) 2.左侧登录框占左侧一半的10/12 3.右侧是登录系统的注意事项 使用到的HTML元素 well 输入框组(input-group) 按钮(btn-success) HTML代码 <div class="row" style="margin-top:30px;"> <div class="col-md-6" style

  • 基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

  • jquery ui bootstrap 实现自定义风格

    jquery ui bootstrap 实现自定义风格

    首先看一下自定义提示框的效果图 alert 普通的提示当然可以自定义样式 confrim 确认框 支持callback 复制代码 代码如下: //message 提示的信息 ,callback(true/false)回调函数  window.shconfirm = function (message, callback) 回调函数参数为 true/false prompt 邀请用户输入框 复制代码 代码如下: //message 提示的信息 ,callback(msg)回调函数(用户输入的消息)

  • Knockout结合Bootstrap创建动态UI实现产品列表管理

    本篇文章结合Bootstrap创建一个比较完整的应用,对产品列表进行管理,包括产品的增加.删除.修改. 需要的引用  <script type='text/javascript' src='http://www.see-source.com/js/knockout-2.2.0.js'></script> <script type='text/javascript' src='http://www.see-source.com/js/jquery-1.6.2.min.js'&g

  • 通过Tabs方法基于easyUI+bootstrap制作工作站

    通过Tabs方法基于easyUI+bootstrap制作工作站

    登陆页如下所示: 下面给大家展示下具体实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <title>网络医院登陆</title> <st

  • Bootstrap与KnockoutJs相结合实现分页效果实例详解

    Bootstrap与KnockoutJs相结合实现分页效果实例详解

    KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端.在做的过程中,遇到一个问题--如何使用KnockoutJs来完成分页的功能.在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用Knockou

随机推荐