使用Bootstrap的后台猿人可能会用到的功能

写在前面

本人主要做服务器端这块，对前端页面了解不是很深，最近公司要求做一个门户网站，我就使用bootstrap样式框架来写，我把中间用到的小模块收集起来做个记录，下次直接复制使用
注：以下基于bootstrap3.1.1

引入样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="//cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="//cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
        <script src="//cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    </body>
</html>

水平导航

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">LOGO</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="home.html">首    页</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#myModal">下载</a>
                </li>
                <li>
                    <a href="investment.html">投资顾问</a>
                </li>
                <li>
                    <a href="help.html">帮助</a>
                </li>
                <li>
                    <a href="about.html">关于</a>
                </li>
            </ul>
            <!--
                应该能看懂navbar-right的用法吧
            -->
            <form class="navbar-form navbar-right">
                <a class="btn" id='btnCtrl' href="#">登录</a>
                <a class="btn btn-primary" href="#">注册</a>
            </form>
        </div>
    </div>
</nav>

水平导航

bootstrap轮播

<div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->

            <div class="carousel-inner" style="position: relative;">
                <div class="item active">
                    ![](img/mm_02.jpg)
                </div>
                <div class="item">
                    ![](img/mm_02.jpg)
                </div>
                <div class="item">
                    ![](img/mm_02.jpg)
                </div>
                <div class="item">
                    ![](img/mm_02.jpg)
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
        </div>
        <script>
            $('#myCarousel').carousel({
                interval: 5000
            });
            $('#myCarousel').on('slide.bs.carousel', function() {
                console.log('start');
            });
            $('#myCarousel').on('slid.bs.carousel', function() {
                console.log('end');
            });
        </script>

轮播效果

图片自适应

页头加上
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
图片加上img-responsive类名

清除浮动

<div class="clearfix" style="margin-top:49px;"></div>

让div 居中

.help-box{
    width:65%;
    height:100px;
    border:1pxsolid#2A70C8;
    border-radius:10px;
    margin-bottom:10px;
    /*width:auto;*/
    margin-left:auto;
    margin-right:auto;
}

点击文字折叠

<div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" 
                                   href="#collapse1">
                                    标题一
                                </a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                                内容一
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" 
                                   href="#collapse2">
                                    标题二
                                </a>
                            </h4>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">
                                内容二
                            </div>
                        </div>
                    </div>

文字折叠面板

左侧折叠菜单

<div  class="container-fluid">
                <div class="row">
                <div class="col-lg-2">
                    <ul id="main-nav" class="main-nav nav nav-tabs nav-stacked text-center
                        " style="">
                        <li>
                            <a href="#applyAccount" class="nav-header" data-toggle="collapse">
                                一级菜单
                            </a>
                            <ul id="applyAccount" class="nav nav-list secondmenu collapse" style="">
                                <li>
                                    <a href="#1_1">    二级菜单</a>
                                </li>
                                <li>
                                    <a href="#1_2">    二级菜单</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="nav-header" data-toggle="collapse">
                                一级菜单
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-10">
                    右侧内容
                </div>
            </div>
</div>

左侧菜单效果

返回顶部

这里使用的是jquery的一个插件，引入js，只需几句js代码，很好用jquery.goup.min.js

$.goup({
    trigger:100,
    bottomOffset:150,
    locationOffset:100,
    title:'返回顶部',
    titleAsText:true
});

鼠标进入div 颜色改变

<!--第一种-->
<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"></div >   
<!--第二种-->
<style> 
.d_over{
    background-color:#307172;
}  
.d_out{
    background-color:#EFEFEF;
}  
</style>  
<div class="d_out" onmouseover="this. className='d_over'"  onmouseout="this. className='d_out'">div 背景颜色</div >

css3 过渡 div 变大

* {
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
*:hover {
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -o-transform:scale(1.2);
    -ms-transform:scale(1.2);
}

div onclick 新的窗口打开页面

<div  onclick="window.opemn('url')"></div >

回车键触发方法

document.onkeypress = function(event) {
    if(event.keyCode == 13) {
        console.log(123)
        return false;
    }
}

验证码倒计时

var wait = 60;
function timer() {
    console.log("timer");
    var codediv  = $('#codediv ');
    if(wait == 0) {
        codediv .text('获取验证码');
        codediv .removeAttr('disabled');
        wait = 60;
    } else {
        codediv .attr('disabled','disabled');
        codediv .text(wait + "秒后可重新发送");
        wait--;
        setTimeout(function() {
                timer();
            },
            1000)
    }
}

验证码倒计时效果

用户注册步骤效果

本来我是打算用图片做，通过jquery来控制其是否显示，后来在网上找到了这个感觉很棒，自己也用到了。

注册步骤效果图

下载地址

bootstrap table 相关

初始化table

var $table = $('#table');
$(function () {
    $table.bootstrapTable({

    });
});

init: function () {
    var tableDiv = $('#table');
    tableDiv.bootstrapTable({
        url: 'datas',
        toolbar: '#toolbar',
        striped: true,
        contentType: "application/x-www-form-urlencoded",
        dataField: "data",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
        search: false,
        showColumns: true,
        showExport: true,
        striped: true,//条纹
        exportDataType: 'all',
        showRefresh: true,
        clickToSelect: true,
        sortable: true,
        pagination: true,
        clickToSelect: true,
        cardView: false,
        detailView: true,
        detailFormatter: detailFormatter,
        sidePagination: "server",
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 25, 50, 100, 'All'],
        smartDisplay: false,//智能显示分页按钮
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        queryParams: queryParams,//请求服务器时所传的参数,
        responseHandler: responseHandler,
        columns: [[
            {field: 'state', checkbox: true},
            {field: 'uniqueUrl', title: '链接', visible: true,width: 150},
            {field: 'address', title: '地区', visible: true, width: 150},
            {field: 'company', title: '公司', visible: true, width: 150},
            {
                field: 'username', title: '姓名', width: 100, formatter: function (value, row, index) {
                return row.firstName + row.lastName;
            }
            },
            {field: 'industryName', title: '行业', width: 150},
            {field: 'headline', title: '头衔', visible: true, width: 200},
            {field: 'yearOfExperience', title: '工作年限', visible: true},
            {field: 'educations', title: '教育经历', visible: true},
            {field: 'experiences', title: '工作经历', visible: true},
            {field: 'skills', title: '技能', visible: true},
            {field: 'mobile', title: '联系方式', visible: true},
            {field: 'remark', title: '备注', visible: true},
            {
                field: 'insertTime', title: '抓取时间', visible: true, formatter: function (value, row, index) {
                return changeDateFormat(value)
            }
            },
            {
                field: 'updateTime', title: '修改时间', visible: true, formatter: function (value, row, index) {
                return changeDateFormat(value)
            }
            },
            {
                title: '操作',
                align: 'center',
                valign: 'middle',
                field: 'operation',
                formatter: function (value, row, index) {
                    return "<button type='button' class='btn btn-xs btn-primary' onclick='ViewService.updateRemark(" + row.id + ",\"" + row.yearOfExperience + "\",\"" + row.mobile + "\",\"" + row.remark + "\")'>修改备注</button>";
                }
            }
        ]]
    });
}

// 一些方法
function changeDateFormat(cellval) {
    if (cellval != null) {
        var date = new Date(cellval);
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return date.getFullYear() + "-" + month + "-" + currentDate + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getMilliseconds();
    }
}

function detailFormatter(index, row) {
    var html = [];
    $.each(row, function (key, value) {
        html.push('<p><b>' + key + ':</b> ' + value + '</p>');
    });
    return html.join('');
}

//请求服务数据时所传参数
function queryParams(params) {
    return {
        pageSize: params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
        pageIndex: params.offset / params.limit + 1, //当前页面,默认是上面设置的1(pageNumber)
        param: "haha" //这里是其他的参数，根据自己的需求定义，可以是多个
    }
}

//请求成功方法
function responseHandler(result) {
    var errcode = result.code;//在此做了错误代码的判断
    if (errcode != 0) {
        alert("错误代码" + errcode);
        return;
    }
    //如果没有错误则返回数据，渲染表格
    return {
        total: result.data.total, //总页数,前面的key必须为"total"
        data: result.data.linkedIns //行数据，前面的key要与之前设置的dataField的值一致.
    };
};

toolbar

<div id="toolbar">
    <div class="form-inline" role="form">
        <div class="form-group">
            <span>公司名: </span>
            <input id="companyNameParam" class="form-control" type="text" value="">
        </div>
        <div class="form-group">
            <span>职位名: </span>
            <input id="jobNameParam" class="form-control" type="text" value="">
        </div>
        <div class="form-group">
            <span>地点：</span>
            <input id="addressParam" class="form-control" type="text" value="">
        </div>
        <button type="button" id="searchBtn" class="btn btn-default btn-sm">
            <span class="glyphicon glyphicon-search"></span> 搜索（支持回车）
        </button>
    </div>
</div>

ajax文件导出写法

export: function () {
    var selectArray = $('#table').bootstrapTable('getSelections');
    if (selectArray.length <= 0) {
        alert("请选择您要导出的记录!")
        return;
    }
    var idArry = new Array();
    selectArray.forEach(function (value, index) {
        idArry.push(value.id);
    });
    if (confirm("确定导出？")) {
        var form = $("<form>");//定义一个form表单
        form.attr("style", "display:none");
        form.attr("target", "");
        form.attr("method", "post");
        form.attr("action", "export");
        var input1 = $("<input>");
        input1.attr("type", "hidden");
        input1.attr("name", "ids");
        input1.attr("value", idArry.join(','));
        $("body").append(form);//将表单放置在web中
        form.append(input1);
        form.submit();//表单提交
    } else {
        console.log("取消导出")
    }
}

对应后台

@RequestMapping("/export")
public ResponseEntity<InputStreamResource> export(@RequestParam("ids") String ids) throws IOException {
    String filepath = linkedInService.export(ids);
    File file = new File(filepath);
    HttpHeaders headers = new HttpHeaders();
    headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
    headers.add("Content-Disposition", String.format("attachment; filename=\"%s\"", file.getName()));
    headers.add("Pragma", "no-cache");
    headers.add("Expires", "0");
    return ResponseEntity
            .ok()
            .headers(headers)
            .contentLength(file.length())
            .contentType(MediaType.parseMediaType("application/octet-stream"))
            .body(new InputStreamResource(new FileInputStream(file)));
}

最后编辑于：2018.03.01 09:05:45

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,284评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,115评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,614评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,671评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,699评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,562评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,309评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,223评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,668评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,859评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,981评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,705评论 5赞 347
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,310评论 3赞 330
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,904评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,023评论 1赞 270
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,146评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,933评论 2赞 355

使用Bootstrap的后台猿人可能会用到的功能

写在前面

引入样式

水平导航

bootstrap轮播

图片自适应

清除浮动

让div 居中

点击文字折叠

左侧折叠菜单

返回顶部

鼠标进入div 颜色改变

css3 过渡 div 变大

div onclick 新的窗口打开页面

回车键 触发方法

验证码倒计时

用户注册步骤效果

bootstrap table 相关

推荐阅读更多精彩内容

回车键触发方法