Bootstrap增删改查，应用treeview，addTabs，table，bootbox，datatimepicker，fileinput

最新推荐文章于 2022-04-20 22:30:53 发布
VIP文章 最新推荐文章于 2022-04-20 22:30:53 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： jsp 文章标签： Bootstrap增删改查 应用treeview addTabs table bootbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lenux2017/article/details/78057462
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 移动设备优先 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 禁用缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="/js/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="/js/bootstrap3/css/bootstrap-theme.css">
<script type="text/javascript" src="/js/bootstrap3/js/bootstrap.js"></script>
<!-- bootstrap-table -->
<link rel="stylesheet" href="/js/bootstrap-table/bootstrap-table.css">
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

<!-- bootstrap-time -->
<script src="/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="/js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<link rel="stylesheet" href="/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">

<!-- bootstrap-box -->
<script src="/js/bootstrap-bootbox/bootbox.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div class="container-fluid">
<!-- 		panel row -->
		<div class="rows">
			<div class="panel panel-default">
			  <div class="panel-heading">面板标题</div>
				  <div class="panel-body">
					<!-- 水平排列表单 -->
				  	<form class="form-horizontal" id="form1">
						<!-- 表单组 -->
				  		<div class="form-group">
				  		
							<!--	这里lable中的for参数与id一致 -->
						    <label for="goodsName" class="col-sm-1 control-label">商品名称</label>
						    <div class="col-sm-5">
						      <input type="text" class="form-control" id="goodsName" placeholder="请输入商品名称">
						    </div>
						    
						    <label for="goodsPrice" class="col-sm-1 control-label">商品价格</label>
						    <div class="col-sm-5">
						      <input type="text" class="form-control" id="goodsPrice" placeholder="请输入商品价格">
						    </div>
						 </div>
						 
				  		<div class="form-group">
							<!--这里lable中的for参数与id一致 -->
						    <label for="goodsType" class="col-sm-1 control-label">商品类型</label>
						    <div class="col-sm-5">
						        <select class="form-control">
								  <option>1</option>
								  <option>2</option>
								  <option>3</option>
								  <option>4</option>
								  <option>5</option>
								</select>
						    </div>
						    <label for="goodsPrice" class="col-sm-1 control-label">生产时间</label>
						    <div class="col-sm-5">
								<!-- 组合两个输入框，一个图标 -->
							    <div class="input-group">
							      <input type="text" class="form-control date" id="timeStart" placeholder="开始时间">
								     	<span class="input-group-addon">
								     		<i class="glyphicon glyphicon-calendar"></i>
								     	</span>
							      <input type="text" class="form-control date" id="timeEnd" placeholder="结束时间">
							    </div>
						    </div>
						 </div>
						 
						 <div class="form-group">
						 	<div class="col-sm-12">
								<!--按钮的其他样式btn-default primary success info warning danger link等样式 -->
								<div class="text-center">
							 		<button class="btn btn-primary" type="button" οnclick="search()">
							 			<i class="glyphicon glyphicon-search"></i>
							 		搜索
最低0.47元/天 解锁文章
Lenux2017
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap分页css样式,修改bootstrap-table中的分页样式
weixin_27014595的博客
08-03 1767
使用bootstrap-table时，使用$("")选择器没办法选中下方的分页button按钮，可能跟它是动态生成的有关吧。最终找到与之对应的js(bootstrap-table.js中搜索了data-toggle)，将class类更换成自己定义的一个class，完成了期望的效果var pageNumber = [Utils.sprintf('', this.options.paginationV...
bootstrap table detailView
u010934312的博客
11-22 3067
        最近在研究bootstrap table的使用，过程中查询了许多资料，在给table做点击下拉详情时发现网上的资料大部分是基础应用的资料，只有很少的一部分关于这部分的资料，而且并不完全。这里记录一下昨天遇到的问题。         在数据绑定上用了$('#table').bootstrapTable({...})的方式，在参数中添加了 detailView:true， d...
修改 bootstrap table 默认detailRow样式的实例代码
08-29
主要介绍了修改 bootstrap table 默认detailRow样式的实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下
bootstrap——简介
weixin_30315723的博客
08-31 66
boostrap——了解 bootstrap是基于html+css+js的前端框架 他的响应式css既适用于pc端，也可用于各个规格的移动端 常用于移动端以及网站类项目的开发 他是一个开源框架，提供了丰富的组件以及插件 bootstrap——常用插件 Bootstrap-treeView 树形菜单 Bootstrap-addTabs 选项卡 Bootstrap-t...
为 Bootstrap 添加更多自定义图标
fendou4533的专栏
06-25 2224
转  http://www.lovelucy.info/custom-icons-for-twitter-bootstrap.html
bootstrap调整Glyphicons图标大小
热门推荐
筱进GG
04-27 1万+
今天发现一个很有意思的事情。bootstrap3中的图标，是用字体的形式表示的。即你去看glyphicon glyphicon-xxx的css定义，会找到类似content:”\xxx”的定义，而找不到img的定义。所以，当你需要更改你的图标的大小的时候就很方便了，只需要设置它的font-size就行了。而且这样的好处是，不管你设多大或者多小，它都能正常展示。而不像图片会拉伸或者压缩。 刚好今天...
BootStrapTable实现增删改查
03-07
如有使用不清楚的地方，请留言，我看到会回复。
BootStrap实现带有增删改查功能的表格(DEMO详解)
09-01
主要介绍了BootStrap实现带有增删改查功能的表格，表格封装了3个版本，接下来通过本文给大家展示下样式及代码，对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧
asp.net MVC5 + Bootstrap 增删改查分页(最新)
12-02
asp.net MVC5 + Bootstrap 增删改查分页(重点是里面的table及分页用法)。另外说一下项目用到了bootstrap-table,bootstrap-dialog,bootstrap-daterangepicker组件，很不错的几个组件
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查 适用于学习ssm框架 jQuery 和 Bootstrap的案例
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
10-21
主要介绍了BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面 的相关资料,需要的朋友可以参考下
bootstrap-table toolbar图标换文字_利兄PPT教程 | 文字多的幻灯片如何优化？可以看看这个案例？...
weixin_32334251的博客
01-14 181
Hello，大家好，我是利兄~最近我开了一个新栏目叫《PPT精修》。顾名思义，就是像修图一样去精修一页幻灯片。通过一步一步的操作，还原一页PPT修改的过程，带着大家一起思考。废话不多说，进入今天的正题原稿如下：这页原稿的问题很多：1、配图很差，不仅不清晰，而且很乱；2、标题太靠近边缘了，缺乏呼吸感；3、内容有些拥挤，行间距太小；4、灰色不要作为背景，显得很脏；一、整理信息我们先整理信息，去掉无关的...
更改exe程序图标_自定义瓷块图标，让你的 Windows 10 开始菜单更养眼
weixin_39533307的博客
12-09 282
Windows 开始菜单是我们大多数 Windows 用户使用 Windows 的起点。最近 Windows 10 除了在逐步更新一些 Windows 图标，使之匹配 Fluent Design 设计风格，还给我们提前看了一眼未来可能出现在正式版 Windows 系统中的开始菜单新设计。1新开始菜单将经典的自定义 Windows 强调色剔除，统一了暗色和亮色的设计风格，确实令人眼前一新。不过，其实...
bootstrap table表格 设置背景颜色 设置字体颜色cellStyle 显示隐藏列(更换工具栏图标) 固定列 导出(兼容全部导出时(all)) 调整列宽 日期格式化1970-01-01bug
tanzongbiao的专栏
12-15 6741
cellStyle: function (value, row, index){ return {css:{'background-color':'#F3F3F4'}}; }
bootstrap-table修改排序图标，自定义排序图标
qq_29897263的博客
07-29 444
默认 修改后 代码 .fixed-table-container thead th .both{ background-image: url(../img/px.png); } .fixed-table-container thead th .desc{ background-image: url(../img/z.png); } .fixed-table-container thead th .asc{ background-image: url(../img/s
html表格添加排序图标,bootstrap-table 自定义排序图标
weixin_29200741的博客
06-04 1220
bootstrap-table 修改排序图标一、修改bootstrap-table.js 1、在表头插入span元素，根据是否启用表格排序添加class=‘both’(为排序箭头做准备) 2、将removeClass(‘desc asc’)改为removeClass(‘both desc asc’)(为后面写样式准备) 二、修改bootstrap-table.css1、去掉以图片作为排序...
bootstrap实战（四）- 图标显示及样式改变
鲸鱼姐的专栏
11-16 1602
技术要点： 1. 图标的增加<spanclass="glyphiconglyphicon-grain">，同时需要bootstrap的fonts文件 2.图标样式的改变，增加圆形边框，绿色背景，图标内容居中 .tubiao-icon{ background:rgb(64,210,177); color:#fff; border-radius: 50%;...
bootstrap页面增删改查
qq_41611829的博客
04-20 1180
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>账号管理</title> <#assign static_url="${base}/media" /> <link rel="stylesheet" type="text/css" href="${static_url}/bootstrap-3.4.1-dist/css/boo.
bootstrap之增删改查
weixin_34128534的博客
06-07 974
后台使用spring boot和spring cloud等。前端使用bootstrap框架进行基本操作，项目采用前后端分离。 1、查询 <!-- HTML中代码 此中是简写--> <script src="....js"></script> <div class="table-responsive"> <table id="...
bootstrap 增删改查模板
最新发布
09-02
在使用Bootstrap进行增删改查模板的开发时，可以根据具体需求合理运用其提供的类、样式和组件。 首先，增加数据的模板可以使用Bootstrap的表单组件，例如表单输入框、下拉菜单、单选按钮等等，利用这些组件可以快速...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值