1. 基础缩略图给a标签添加类class="thumbnail"如下： <div class="row"><div class="col-md-3 col-sm-6"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="thumbnail"><img src="img/01.png" alt="图片"></a></div><div class="col-md-3 col-sm-6"><a hre...
介绍 通过本文，你可以学习到如何封装或者开发一个前端组件，同时学习Bootstrap-fileinput组件的使用，封装后使用更加简单方便。BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持 支持多文件、在线预览、拖拽上传等功能，封装后BaseFile主要包括以下功能： 弹出窗口的附件上传当前界面的附件上传显示附件明细可编辑的附件明细（删除、预览、不可新增）关于Bootstrap-fileinput的API文档可参考http://plugin...
bootstrap PrintThis打印效果图：如图，这个是调用了谷歌的打印，使用很方便，可以自己調样式，需要的可以研究一下，这边贴出使用方法。 附上GitHub：https://github.com/jasonday/printThis jsp： <script src="<%=basePath %>bootstrap/js/printThis.js"></script> <!-- 二维码弹出框 --> <div class="modal fade" id="myModal_qrcode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialo...
一、表单布局Bootstrap 提供了下列类型的表单布局：--垂直表单（默认） --内联表单 --水平表单（1）垂直或基本表单基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：--向父 <form> 元素添加 role="form"。 --把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 --向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-co...
工作中有需要用到模态框的可以看看 <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnCancel"></button><h4 class="modal-title" id...
这里有两种展现方式 写在前面：首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js 1、通过html代码显示<!-- Button trigger modal 弹出框的触发器 --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal </button><!-- Modal 弹出框的结构 --> <div class="modal fade" id=...
bootstrap：能够增加兼容性的强大框架. 因为项目需要数据验证，看bootstrapValidator 还不错，就上手一直，完美兼容，话不多说。 bootstrapValidator的github地址 需要引用css： bootstrap.min.css bootstrapValidator.min.css js: jQuery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js 以上这些都是必须的。 先上个简单的例子,只要导入相应的文件可以直接运行： <!DOCTYPE html> <html> <head><title>Using Ajax to...
方法一：使用链接<a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打开</a>当点击该连接时，demo.jsp的内容就可以动态的加载到<div class="modal-content"></div>中。当然这里的连接也可以是controller方法二：使用脚本$("#myModal").modal({ remote: "page.jsp" }); 但是这样加载后，会有问题，modal数据只加载一次，如果要加载不同的数据，例如根据id查询详细信息，modal的数据是不能更新的，即使传的id值不...
Bootstrap框架安装使用简单介绍下载 Bootstrap 可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。 源代码需要编译 LESS 文件来生成可重用的 CSS 文...
首先把模板代码上上来: <!DOCTYPE html> <html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /><!--判断IE9 用来支持HTML5 html5shiv.min.js-没有那个元素，就创建那个元素respond.min.js支持响应式布局的--><!--[if lt IE 9]> <script sr...
本文实例为大家分享了bootstrap输入框组的具体使用方法，供大家参考，具体内容如下 1、基本用法 我们有时需要在输入框一侧或两侧添加额外的元素 这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以 但是每个输入框组只能有一个input<div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control" placeholder="Username"> </div><div class="input-group"><input t...
表单作为Bootstrap的核心内容，主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><!-- 使用最新的浏览器内核解析 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 移动设备优先 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS --><link rel="stylesheet" href="b...
手风琴（Collapse）效果展示Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题，可以让其对应的内容显示或隐藏 <div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4></div><div id="collapseOne" class="panel-collapse collapse i...
废话不多说了，直接给大家贴代码了，具体代码如下所示： <script type="text/javascript">var $table = $(#table);var columns = [];//获取表头信息function buildColumnsStyle(url, align, valign, ignore) {$.ajax({method: GET,url: url,async: false,success: function (data, status) {//此处设置columns}});}buildColumnsStyle(/api/v1/ArticleItem/info, center, null, []);//动态表格渲染$(function () {$table.bootstrapT...
在日常的网页开发过程中，日期组件已经成为不可或缺的组件之一。同时，随着广大杰出攻城狮的不懈努力，也出现了很多优秀的日期组件，其中我个人觉得 layDate 日期组件是一个非常不错的组件，简洁易用，样式清爽。 此文主要以贤心所作的 layDate 组件进行日期选择的演示，敬请各位小主们参阅，若有不足之处，敬请大神指正，不胜感激！ 闲不多言，直接上码。 演示文档的工程目录如下图所示：laydate-demo.html 对应的源代码为：<!DOC...