[关闭]
@xiaoxiaowang 2017-09-14T06:53:41.000000Z 字数 8984 阅读 1206

注：以下基于bootstrap3.1.1

引入样式

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

水平导航

  1. <nav class="navbar navbar-default navbar-fixed-top">
  2.     <div class="container">
  3.         <div class="navbar-header">
  4.             <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
  5.                 <span class="sr-only">Toggle navigation</span>
  6.                 <span class="icon-bar"></span>
  7.                 <span class="icon-bar"></span>
  8.                 <span class="icon-bar"></span>
  9.             </button>
  10.             <a class="navbar-brand" href="#">LOGO</a>
  11.         </div>
  12.         <div id="navbar" class="navbar-collapse collapse">
  13.             <ul class="nav navbar-nav">
  14.                 <li class="active">
  15.                     <a href="home.html">首    页</a>
  16.                 </li>
  17.                 <li>
  18.                     <a href="#" data-toggle="modal" data-target="#myModal">下载</a>
  19.                 </li>
  20.                 <li>
  21.                     <a href="investment.html">投资顾问</a>
  22.                 </li>
  23.                 <li>
  24.                     <a href="help.html">帮助</a>
  25.                 </li>
  26.                 <li>
  27.                     <a href="about.html">关于</a>
  28.                 </li>
  29.             </ul>
  30.             <!--
  31.                 应该能看懂navbar-right的用法吧
  32.             -->
  33.             <form class="navbar-form navbar-right">
  34.                 <a class="btn" id='btnCtrl' href="#">登录</a>
  35.                 <a class="btn btn-primary" href="#">注册</a>
  36.             </form>
  37.         </div>
  38.     </div>
  39. </nav>

水平导航

bootstrap轮播

  1. <div id="myCarousel" class="carousel slide">
  2.             <!-- 轮播（Carousel）指标 -->
  3.             <ol class="carousel-indicators">
  4.                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  5.                 <li data-target="#myCarousel" data-slide-to="1"></li>
  6.                 <li data-target="#myCarousel" data-slide-to="2"></li>
  7.                 <li data-target="#myCarousel" data-slide-to="3"></li>
  8.             </ol>
  9.             <!-- 轮播（Carousel）项目 -->
  11.             <div class="carousel-inner" style="position: relative;">
  12.                 <div class="item active">
  13.                     ![](img/mm_02.jpg)
  14.                 </div>
  15.                 <div class="item">
  16.                     ![](img/mm_02.jpg)
  17.                 </div>
  18.                 <div class="item">
  19.                     ![](img/mm_02.jpg)
  20.                 </div>
  21.                 <div class="item">
  22.                     ![](img/mm_02.jpg)
  23.                 </div>
  24.             </div>
  25.             <!-- 轮播（Carousel）导航 -->
  26.             <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  27.             <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
  28.         </div>
  29.         <script>
  30.             $('#myCarousel').carousel({
  31. 				interval: 5000
  32. 			});
  33. 			$('#myCarousel').on('slide.bs.carousel', function() {
  34.                 console.log('start');
  35.             });
  36.             $('#myCarousel').on('slid.bs.carousel', function() {
  37.                 console.log('end');
  38.             });
  39.         </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 居中

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

点击文字折叠

  1. <div class="panel panel-default">
  2.                         <div class="panel-heading">
  3.                             <h4 class="panel-title">
  4.                                 <a data-toggle="collapse" data-parent="#accordion" 
  5.                                    href="#collapse1">
  6.                                     标题一
  7.                                 </a>
  8.                             </h4>
  9.                         </div>
  10.                         <div id="collapse1" class="panel-collapse collapse in">
  11.                             <div class="panel-body">
  12.                                 内容一
  13.                             </div>
  14.                         </div>
  15.                     </div>
  16.                     <div class="panel panel-default">
  17.                         <div class="panel-heading">
  18.                             <h4 class="panel-title">
  19.                                 <a data-toggle="collapse" data-parent="#accordion" 
  20.                                    href="#collapse2">
  21.                                     标题二
  22.                                 </a>
  23.                             </h4>
  24.                         </div>
  25.                         <div id="collapse2" class="panel-collapse collapse">
  26.                             <div class="panel-body">
  27.                                 内容二
  28.                             </div>
  29.                         </div>
  30.                     </div>

文字折叠面板

左侧折叠菜单

  1. <div  class="container-fluid">
  2.                 <div class="row">
  3.                 <div class="col-lg-2">
  4.                     <ul id="main-nav" class="main-nav nav nav-tabs nav-stacked text-center
  5.                         " style="">
  6.                         <li>
  7.                             <a href="#applyAccount" class="nav-header" data-toggle="collapse">
  8.                                 一级菜单
  9.                             </a>
  10.                             <ul id="applyAccount" class="nav nav-list secondmenu collapse" style="">
  11.                                 <li>
  12.                                     <a href="#1_1">    二级菜单</a>
  13.                                 </li>
  14.                                 <li>
  15.                                     <a href="#1_2">    二级菜单</a>
  16.                                 </li>
  17.                             </ul>
  18.                         </li>
  19.                         <li>
  20.                             <a href="#" class="nav-header" data-toggle="collapse">
  21.                                 一级菜单
  22.                             </a>
  23.                         </li>
  24.                     </ul>
  25.                 </div>
  26.                 <div class="col-lg-10">
  27.                     右侧内容
  28.                 </div>
  29.             </div>
  30. </div>

左侧菜单效果

返回顶部

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

  1. $.goup({
  2.     trigger:100,
  3.     bottomOffset:150,
  4.     locationOffset:100,
  5.     title:'返回顶部',
  6.     titleAsText:true
  7. });

鼠标进入div 颜色改变

  1. <!--第一种-->
  2. <div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"></div >   
  3. <!--第二种-->
  4. <style> 
  5. .d_over{
  6.     background-color:#307172;
  7. }  
  8. .d_out{
  9.     background-color:#EFEFEF;
  10. }  
  11. </style>  
  12. <div class="d_out" onmouseover="this. className='d_over'"  onmouseout="this. className='d_out'">div 背景颜色</div >

css3 过渡 div 变大

  1. * {
  2.     transition:All 0.4s ease-in-out;
  3.     -webkit-transition:All 0.4s ease-in-out;
  4.     -moz-transition:All 0.4s ease-in-out;
  5.     -o-transition:All 0.4s ease-in-out;
  6. }
  7. *:hover {
  8.     transform:scale(1.2);
  9.     -webkit-transform:scale(1.2);
  10.     -moz-transform:scale(1.2);
  11.     -o-transform:scale(1.2);
  12.     -ms-transform:scale(1.2);
  13. }

div onclick 新的窗口打开页面

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

回车键 触发方法

  1. document.onkeypress = function(event) {
  2.     if(event.keyCode == 13) {
  3.         console.log(123)
  4.         return false;
  5.     }
  6. }

验证码倒计时

  1. var wait = 60;
  2. function timer() {
  3.     console.log("timer");
  4.     var codediv  = $('#codediv ');
  5.     if(wait == 0) {
  6.         codediv .text('获取验证码');
  7.         codediv .removeAttr('disabled');
  8.         wait = 60;
  9.     } else {
  10.         codediv .attr('disabled','disabled');
  11.         codediv .text(wait + "秒后可重新发送");
  12.         wait--;
  13.         setTimeout(function() {
  14.                 timer();
  15.             },
  16.             1000)
  17.     }
  18. }

验证码倒计时效果

用户注册步骤效果

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

注册步骤效果图

下载地址

bootstrap table 相关

初始化table

  1. init: function () {
  2.     var tableDiv = $('#table');
  3.     tableDiv.bootstrapTable({
  4.         url: 'datas',
  5.         toolbar: '#toolbar',
  6.         striped: true,
  7.         contentType: "application/x-www-form-urlencoded",
  8.         dataField: "data",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
  9.         search: false,
  10.         showColumns: true,
  11.         showExport: true,
  12.         striped: true,//条纹
  13.         exportDataType: 'all',
  14.         showRefresh: true,
  15.         clickToSelect: true,
  16.         sortable: true,
  17.         pagination: true,
  18.         clickToSelect: true,
  19.         cardView: false,
  20.         detailView: true,
  21.         detailFormatter: detailFormatter,
  22.         sidePagination: "server",
  23.         pageNumber: 1,
  24.         pageSize: 10,
  25.         pageList: [10, 25, 50, 100, 'All'],
  26.         smartDisplay: false,//智能显示分页按钮
  27.         paginationPreText: "上一页",
  28.         paginationNextText: "下一页",
  29.         queryParams: queryParams,//请求服务器时所传的参数,
  30.         responseHandler: responseHandler,
  31.         columns: [[
  32.             {field: 'state', checkbox: true},
  33.             {field: 'uniqueUrl', title: '链接', visible: true,width: 150},
  34.             {field: 'address', title: '地区', visible: true, width: 150},
  35.             {field: 'company', title: '公司', visible: true, width: 150},
  36.             {
  37.                 field: 'username', title: '姓名', width: 100, formatter: function (value, row, index) {
  38.                 return row.firstName + row.lastName;
  39.             }
  40.             },
  41.             {field: 'industryName', title: '行业', width: 150},
  42.             {field: 'headline', title: '头衔', visible: true, width: 200},
  43.             {field: 'yearOfExperience', title: '工作年限', visible: true},
  44.             {field: 'educations', title: '教育经历', visible: true},
  45.             {field: 'experiences', title: '工作经历', visible: true},
  46.             {field: 'skills', title: '技能', visible: true},
  47.             {field: 'mobile', title: '联系方式', visible: true},
  48.             {field: 'remark', title: '备注', visible: true},
  49.             {
  50.                 field: 'insertTime', title: '抓取时间', visible: true, formatter: function (value, row, index) {
  51.                 return changeDateFormat(value)
  52.             }
  53.             },
  54.             {
  55.                 field: 'updateTime', title: '修改时间', visible: true, formatter: function (value, row, index) {
  56.                 return changeDateFormat(value)
  57.             }
  58.             },
  59.             {
  60.                 title: '操作',
  61.                 align: 'center',
  62.                 valign: 'middle',
  63.                 field: 'operation',
  64.                 formatter: function (value, row, index) {
  65.                     return "<button type='button' class='btn btn-xs btn-primary' onclick='ViewService.updateRemark(" + row.id + ",\"" + row.yearOfExperience + "\",\"" + row.mobile + "\",\"" + row.remark + "\")'>修改备注</button>";
  66.                 }
  67.             }
  68.         ]]
  69.     });
  70. }
  72. // 一些方法
  73. function changeDateFormat(cellval) {
  74.     if (cellval != null) {
  75.         var date = new Date(cellval);
  76.         var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  77.         var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  78.         return date.getFullYear() + "-" + month + "-" + currentDate + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getMilliseconds();
  79.     }
  80. }
  82. function detailFormatter(index, row) {
  83.     var html = [];
  84.     $.each(row, function (key, value) {
  85.         html.push('<p><b>' + key + ':</b> ' + value + '</p>');
  86.     });
  87.     return html.join('');
  88. }
  90. //请求服务数据时所传参数
  91. function queryParams(params) {
  92.     return {
  93.         pageSize: params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
  94.         pageIndex: params.offset / params.limit + 1, //当前页面,默认是上面设置的1(pageNumber)
  95.         param: "haha" //这里是其他的参数，根据自己的需求定义，可以是多个
  96.     }
  97. }
  99. //请求成功方法
  100. function responseHandler(result) {
  101.     var errcode = result.code;//在此做了错误代码的判断
  102.     if (errcode != 0) {
  103.         alert("错误代码" + errcode);
  104.         return;
  105.     }
  106.     //如果没有错误则返回数据，渲染表格
  107.     return {
  108.         total: result.data.total, //总页数,前面的key必须为"total"
  109.         data: result.data.linkedIns //行数据，前面的key要与之前设置的dataField的值一致.
  110.     };
  111. };

ajax文件导出写法

  1. export: function () {
  2.     var selectArray = $('#table').bootstrapTable('getSelections');
  3. 	if (selectArray.length <= 0) {
  4. 		alert("请选择您要导出的记录!")
  5. 		return;
  6. 	}
  7. 	var idArry = new Array();
  8. 	selectArray.forEach(function (value, index) {
  9. 		idArry.push(value.id);
  10. 	});
  11. 	if (confirm("确定导出？")) {
  12. 		var form = $("<form>");//定义一个form表单
  13. 		form.attr("style", "display:none");
  14. 		form.attr("target", "");
  15. 		form.attr("method", "post");
  16. 		form.attr("action", "export");
  17. 		var input1 = $("<input>");
  18. 		input1.attr("type", "hidden");
  19. 		input1.attr("name", "ids");
  20. 		input1.attr("value", idArry.join(','));
  21. 		$("body").append(form);//将表单放置在web中
  22.         form.append(input1);
  23.         form.submit();//表单提交
  24.     } else {
  25.         console.log("取消导出")
  26.     }
  27. }

对应后台

  1. @RequestMapping("/export")
  2. public ResponseEntity<InputStreamResource> export(@RequestParam("ids") String ids) throws IOException {
  3.     String filepath = linkedInService.export(ids);
  4.     File file = new File(filepath);
  5.     HttpHeaders headers = new HttpHeaders();
  6.     headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
  7.     headers.add("Content-Disposition", String.format("attachment; filename=\"%s\"", file.getName()));
  8.     headers.add("Pragma", "no-cache");
  9.     headers.add("Expires", "0");
  10.     return ResponseEntity
  11.             .ok()
  12.             .headers(headers)
  13.             .contentLength(file.length())
  14.             .contentType(MediaType.parseMediaType("application/octet-stream"))
  15.             .body(new InputStreamResource(new FileInputStream(file)));
  16. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注