使用bootstrap

发布时间：2020-12-17 20:52:02 所属栏目：安全来源：网络整理

导读：官网：http://www.bootcss.com/，table文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 引入css,js文件 link rel ="stylesheet" href ="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css" link rel ="styleshee

官网：http://www.bootcss.com/，table文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

引入css,js文件

<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

使用table表格时，还要引用

<link rel="stylesheet" href="/ttest/src/bootstrap-table.css">
<script src="/ttest/src/bootstrap-table.js"></script>
<script src="/ttest/src/locale/bootstrap-table-zh-CN.js"></script>

新建一个bootstraps3的文件夹，把从官网下载的bootstraps3三个文件夹拖入新建的bootstraps3文件夹内，并在js文件夹内放入jQuery文件

<%@ 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">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="/ttest/src/bootstrap-table.css">
<script src="/ttest/src/bootstrap-table.js"></script>
<script src="/ttest/src/locale/bootstrap-table-zh-CN.js"></script>
<script>
var pd=[];
    $(function(){
    
        $(‘#table‘).bootstrapTable({
                columns: [{
                    field: ‘id‘,title: ‘Item ID‘
                },{
                    field: ‘name‘,title: ‘Item Name‘
                },{
                    field: ‘price‘,title: ‘Item Price‘
                },{
                    field: ‘id‘,title: ‘操作‘,formatter:function(value,row,index){
                    pd.push(row)
                    
                     return ‘<div class="rows">‘+
                         ‘<div class="col-md-4" style="blackground-color:blue;color:red" onclick="f1(‘+index+‘)">修改</div>‘+
                         ‘<div class="col-md-4" style="blackground-color:blue;color:red">删除</div>‘+
                         ‘</div>‘
                    }
                    
                }],data: [{
                    id: 1,name: ‘Item 1‘,price: ‘$1‘,},{
                    id: 2,name: ‘Item 2‘,price: ‘$2‘,{
                    id: 3,}]
            });
    
    
    })
    
    f1=function (index){
    $(‘#tb_1‘).val(pd[index].id);
    $(‘#tb_2‘).val(pd[index].name);
    $(‘#tb_3‘).val(pd[index].price);
    $(‘#tb_4‘).val(pd[index].id);
    }
    
    function f2(){
    $("input").val(‘‘);
    }
</script>
</head>
<body>
<div class="container-fluid">
<div class="rows">
    <table id="table"></table>
</div>    
<div class="rows">
    <form action="">
        <div class="row">
            <div class="col-md-3">
            <div class="form-group">
                    <label for="exampleInputName2">参数1</label>
                   <input type="text" class="form-control" id="tb_1"  placeholder="参数1">
             </div>
             </div>
             <div class="col-md-3">
            <div class="form-group">
                    <label for="exampleInputName2">参数2</label>
                   <input type="text" class="form-control"  id="tb_2" placeholder="参数2">
             </div>
             </div>
             <div class="col-md-3">
            <div class="form-group">
                    <label for="exampleInputName2">参数3</label>
                   <input type="text" class="form-control" id="tb_3"  placeholder="参数1">
             </div>
             </div>
             <div class="col-md-3">
            <div class="form-group">
                    <label for="exampleInputName2">参数4</label>
                   <input type="text" class="form-control"  id="tb_4" placeholder="参数2">
             </div>
             </div>
        </div>
        <div class="row">
            <div class="col-md-6">
            <button type="submit" class="btn btn-default">提交</button>
            </div>
            <div class="col-md-6">
            <button type="button" class="btn btn-default" onclick="f2()">重置</button>
            </div>
        </div>
    </form>
</div>
</div>    
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!