BOOTSTRAP 代码 技术教程文章
BootStrap fileinput.js文件上传组件实例代码【图】
1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript" src="fileinput/js/fileinput.js"></script> <script type="text/javascript" src="fileinput/js/fileinput_locale_zh.js"></script></span> 2.html设置： <span style="font-size:14px;"><form enctype="multipar...
bootstrap 下拉多选框进行多选传值问题代码分析【图】
项目开发遇到个问题，就是引入bootstrap下拉多选框进行多选的时候，用form表单提交到后台，获取不到多选的值，只能获取的选择的第一个值。 纠结了会。 jsp页面需要引入这东东~ <link rel="stylesheet" href="${ctx}/js/selectbootstrap/dist/css/bootstrap-select.min.css" rel="external nofollow" > <script src="${ctx}/js/selectbootstrap/dist/js/bootstrap-select.min.js"></script>直接上代码~<head> <script type="text/Ja...
bootstrap table 数据表格行内修改的实现代码
js中设置列的属性 editable : { type : text,//数据显示在文本框内 emptytext : "--",//数据为空时显示 validate : function(value) { if ($.trim(value) == ) { return 不能为空;//修改是数据为空 显示 } } }js中设置bootstrop-table加载数据时属性 onEditableSave : function(field, row, oldValue, $el) { $(#id).bootstrapTable(resetView); row = dataWarp(row, field);// 编辑时重新包装数据 可写可不写 $.ajax({ type : "po...
BootStrap Datetimepicker 汉化的实现代码
页面引用： $(input[name=date-range]).daterangepicker({applyClass : btn-sm btn-success,cancelClass : btn-sm btn-default,locale: Config.daterangepicker_locale.zh_CN });daterangepicker汉化 /*** daterangepicker locale*/daterangepicker_locale: {zh_CN: {applyLabel: 确定,cancelLabel: 取消,daysOfWeek: ["日","一","二","三","四","五","六"],monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月"...
BootStrap 弹出层代码【图】
废话不多说了，直接给大家贴代码了，具体代码如下所示： <!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"><title>Bootstrap</title><link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" /> </head> <body><!--注意：1.弹出层必须放在body里2.弹出层里面不能再嵌套别的层3....
bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享
1.bootstrap-table 单击单行选中 $(#gzrwTable).on(click-row.bs.table, function(e, row, $element) { $(.success).removeClass(success);// 清除前一次操作已选中行的选中状态 $($element).addClass(success);// 选中行添加选中状态 });2.bootstrap-table 获取选中行信息function getSelectedRow() { var index = $(#gzrwTable).find(tr.success).data(index); return $(#gzrwTable).bootstrapTable(getData)[index]; }3.时间控件...
Bootstrap 手风琴菜单的实现代码
好了，废话不多说了，直接给大家贴代码了，具体代码如下所示： <!DOCTYPE html> <html> <head><title></title><meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="js/jquery-1.11.1.min.js"></script> <!-- 最新的...
Bootstrap 填充Json数据的实例代码【图】
本文介绍Bootstrap 填充Json数据，具体如下： 一、如图： 二、html代码：<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <div class="content"><div class="table-responsive"> <div class="container-fluid" > <div class="row-fluid"> <form class="form-inline well well-sm" id="monitor_form" role="form"><div class="form-group pdate"><label for="date">起日期：</label><inpu...
bootstrap提示标签、提示框实现代码【图】
首先聊一聊提示标签： <body> <div class="container"><div class="row"><div class="col-lg-6"><p><a href="#" class="tool" data-toggle="tooltip" data-placement="top" title="用来开发网站的">java</a>一种语言</p><p><a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="用来开发网站的">java</a>一种语言</p></div><div class="col-lg-6"><p><a href="#" class="tool" data-toggle="tooltip" d...
bootstrap导航、选项卡实现代码【图】
本文实例为大家分享了bootstrap导航和选项卡的具体代码，供大家参考，具体内容如下 导航： <!--nav 导航的基础样式--> <div class="container"><div class="row"><ul class="nav nav-tabs"><li><a href="#">雪碧图</a></li><li class="active"><a href="#">可乐</a></li><li><a href="#">coffee</a></li></ul></div><!-- 胶囊式 nav-pills--><div class="row" style="margin-top:20px"><ul class="nav nav-pills"><li><a href="...
bootstrap导航条实现代码【图】
本文实例为大家分享了bootstrap导航条的具体代码，供大家参考，具体内容如下 <body style="padding-top:50px"> <!--navbar 导航条的基础样式nav navbar-nav 导航条里菜单的固定样式组合classnavbar-default 导航条的默认样式navbar-static-top 导航条为直角navbar-fixed-top 导航条固定在上面,一般这时候要给body设置padding值或marginnavbar-fixed-bottom 导航条固定在下面--> <div class="container"><!-- 默认样式的导航条 -->...
Bootstrap select多选下拉框实现代码【图】
前言 项目中要实现多选，就想到用插件，选择了bootstrap-select。 附上官网api链接，http://silviomoreto.github.io/bootstrap-select/. 没有中文的。对付看吧。有机会每个方法实践一下，会总结的。我自己也等着呢。 需要引用的它们<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"><!-- Latest compiled ...
Bootstrap 模态框(Modal)插件代码解析【图】
Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。下面通过代码给大家介绍bootstrap 模态框插件，先给大家展示下效果图： 页面效果：html+js： <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>my love-用户登录</title><link rel="stylesheet" href="css/bootstrap.css"><link re...
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码【图】
很久没有更新博客了，再不写点东西都烂了。 这次更新一个小内容，是两个插件的组合使用，实现头像上传功能。 业务需求： 头像上传功能，要对上传的文件进行剪切，且保证头像到服务器时必须是正方形的。优化<input type="file">的显示样式，基础的样式实在太难看了。上传的头像需要进行质量压缩跟大小裁剪，以减缓浏览器的压力。成果预览：使用到的技术插件 Jcrop：用于前端“裁剪”图片bootstrap-fileinput：用于前端优化上传控件样...
Bootstrap Modal遮罩弹出层代码分享
下面这段代码并非是Bootstrap的遮罩，只是简单版的遮罩效果，Bootstrap那个太啰嗦了。如果你钟情Bootstrap的那个遮罩，来看看这篇文章“完全版：Bootstrap弹出层遮罩”。 <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:void(0);" title="关闭" class="close"></a> <h3>登录 是一种态度</h3> </div> <div class="theme-popbod dform"> <form class="theme-signin" name="loginform" action="" metho...
基于KO+BootStrap+MVC实现的分页控件代码分享
JS： /// <reference path="../knockout-3.2.0.js" /> var ViewModel = function (data) { var self = this; self.ObjectList = ko.observableArray(data.ObjectList) self.TotalCount = ko.observable(data.TotalCount); self.PerCount = ko.observable(data.PerCount); self.pageIndex = ko.observable(data.Index); self.btns = ko.observableArray(); var getData = function (wantIndex) { $.getJSON("/BaseInfor/GetList", {...
bootstrap table复杂操作代码【图】
本文实例为大家分享了bootstrap table复杂操作，如何生成外层表格，如何填充表格内容，供大家参考，具体内容如下 1、先生成外层表格： $(#tableActivity).bootstrapTable(destroy).bootstrapTable({url:,detailView:true,detailFormatter:"detailFormatter",//点击展开预先执行事件cache: false,height: 550,showExport: true,exportDataType: "all", pagination: true,pageSize: 10,pageList: [10, 25, 50, 100],search: true,sea...
BootStrap网页中代码显示<code><pre>用法详解【图】
网页中代码的显示，包括行中代码显示；成段的代码显示，效果图如下<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <head> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" hr...
bootstrap中使用google prettify让代码高亮的方法【图】
利用google prettify 让代码高亮，好看。 下载地址： http://code.google.com/p/google-code-prettify/ http://www.bootcdn.cn/prettify/ 网络引入地址： //cdn.bootcss.com/prettify/r298/prettify.min.js 效果图如下<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <% String path = request.getContextPath(); String basePath = request.getScheme()+":...
BootStrap轻松实现微信页面开发代码分享
1. 行长度： <div class="col-md-12"> </div> 2.modal <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h4 class="modal-title" id="myModalLabel">出库信息</h4><br> </di...