记录bootstrap常用组件

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

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

bootstrap 样式

我用的3.x版本

导航

上方

原生黑色主题

<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>

左方

<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>

加一些样式

.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

图标

<span class="glyphicon glyphicon-home" > 

标签

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

tip

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

面版

<div class="panel panel-default">
	<div class="panel-body">
	</div>
</div>

表格

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      </tr>
  </thead>
  <tbody>
  	<tr >
      <td>xx</td>
  </tr>
</tbody>
</table>

表单

<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

<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">

使用

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

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

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

JS 组件

JQuery填充表单

<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 标签

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

c:if 标签

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

<c:if test="${not empty obj}">

c:forEach 标签

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

fn:escapeXml 函数

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

后端SpringMVC

maven依赖

<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数据，还要

<!-- 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 常用配置

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

web.xml

<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>

参考

• bootstrap 组件