记录bootstrap常用组件

记录自己做一些玩具项目时常用的组件。
因为是临时自己做得好玩,可以随意些。
但其中用的还是可以拿出来用用的。

这些就像积木,已经把积木搬运过来。
用积木拼建筑时,直接组合。
需要更精细的刻画时,再去查更详细的文档。

bootstrap 样式

我用的3.x版本

导航

上方

原生黑色主题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false"
data-target="#navbar" data-toggle="collapse"
class="navbar-toggle collapsed" type="button">
<span class="sr-only"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">TestPage</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">
<a href="${basePath}index">Home</a>
</li>
</ul>
</div>
</div>
</nav>

左方

1
2
3
4
5
6
7
8
9
10
11
<nav class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav">
<li class="active" >
<a href="#">Item1</a>
</li>
<li >
<a href="#">Item2</a>
</li>
</ul>
</nav>

加一些样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.navbar-fixed-left {
width: 240px;
position: fixed;
border-radius: 0;
height: 100%;
}

.navbar-fixed-left .navbar-nav > li {
float: none;
width: 239px;
}

.navbar-fixed-left + .container {
padding-left: 260px;
}

/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}

按钮

  • btn
  • btn-default
  • btn-primary
  • btn-success
  • btn-info
  • btn-danger
  • btn-warning

图标

1
<span class="glyphicon glyphicon-home" >

标签

1
<span class="label label-success">1.1</span>

tip

1
2


https://v3.bootcss.com/javascript/#popovers

面版

1
2
3
4
<div class="panel panel-default">
<div class="panel-body">
</div>
</div>

表格

1
2
3
4
5
6
7
8
9
10
11
12
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
</tr>
</thead>
<tbody>
<tr >
<td>xx</td>
</tr>
</tbody>
</table>

表单

1
2
3
4
5
6
7
8
9
10
11
<form class="form-horizontal" id="form" method="post" action="/xx">
<fieldset>
<legend>xx表单</legend>
<div class="form-group">
<label for="textinput" class="control-label col-sm-2">xx字段</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="xxx" />
</div>
</div>
</fieldset>
</form>

日期控件

引用js与css

1
2
3
<script src="${basePath}js/bootstrap-datetimepicker.min.js"></script>
<script src="${basePath}js/bootstrap-datetimepicker.zh-CN.js"></script>
<link href="${basePath}css/bootstrap-datetimepicker.min.css" rel="stylesheet">

使用

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$("input.date").datetimepicker({
minView : 2,
language : 'zh-CN',
autoclose : true,
format : 'yyyy-mm-dd',
todayBtn : true
});
</script>

在input 输入框中加入date的class就可以

1
<input class="form-control date" type="text" name="starttime" readonly>

JS 组件

JQuery填充表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(function() {
$("#filldata").click(function(){
$.get("/getReqXX",function(data,status){
Object.keys(data).map(function(key){
$('#form input').filter(function(){
return key == this.name;
}).val(data[key]);
});

});
});
});
</script>

JSTL

引入标签库

  • <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  • <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

c:set 标签

1
2
<c:set var="basePath" scope="request" value="<%=basePath%>" />
<c:set var="CURRENT_CATEGORY" value="home" />

c:if 标签

1
<c:if test="${CURRENT_CATEGORY == 'home'}">class="active"</c:if>
1
<c:if test="${not empty obj}">

c:forEach 标签

1
2
3
4
5
6
  <c:forEach items="${list}" var="i" varStatus="loop">
<tr >
<td>${loop.index+1}</td>
<td>${i.field}</td>
</tr>
</c:forEach>

fn:escapeXml 函数

1
<pre>${fn:escapeXml(msg)}</pre>

后端SpringMVC

maven依赖

1
2
3
4
5
6
7
8
9
10
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>4.0.2.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.0.2.RELEASE</version>
</dependency>

如果要返回Json数据,还要

1
2
3
4
5
6
<!-- Jackson JSON Mapper -->
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.10</version>
</dependency>

常用注解

  • @Controller
  • @RequestMapping
  • @ResponseBody
  • @PathVariable
  • @RequestParam
  • @Autowired

ModelAndView

xml 常用配置

1
2
3
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:annotation-driven />
<context:component-scan base-package="xxx" />

web.xml

1
2
3
4
5
6
7
8
9
10
11
<servlet>
<servlet-name>mvc-dispatcher</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>mvc-dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>

参考