目录
1.FreeMarker说明
FreeMarker中文文档:http://freemarker.foofun.cn/index.html
学习视频:https://www.bilibili.com/video/BV1vq4y1p718
https://www.bilibili.com/video/BV1do4y1m7Pp
找到的别人的笔记及demo:
https://gitee.com/hhgs_admin/Freemarker_readme/blob/master/Freemarker%E7%AC%94%E8%AE%B0.md
https://gitee.com/mumasi/freemarker-demo
BootStrap学习文档:https://blog.csdn.net/Augenstern_QXL/article/details/119748650
2.SpringBoot+FreeMarker快速搭建
参考文章:
(1)https://blog.csdn.net/xhf852963/article/details/116233053
(2)https://www.cnblogs.com/dw3306/p/9602139.html
(3)https://www.cnblogs.com/rainbowbridge/p/11410286.html
(4)https://blog.csdn.net/qq_46921028/article/details/130493378
Pom文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.asta</groupId>
<artifactId>freemaker-hello</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>1.5.4.RELEASE</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 添加freemarker的maven依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
</plugins>
</build>
</project>
application.properties文件
server.port=8080
#HttpServletRequest 的属性是否可以覆盖controller中model 的同名项
spring.freemarker.allow-request-override=false
#H ttp Session 的属性是否可以覆盖 controller model 的同名项
spring.freemarker.allow-session-override=false
#是否开启缓存
spring.freemarker.cache=false
#模板文件编码
spring.freemarker.charset=UTF-8
#是否检查模板位置
spring.freemarker.check-template-location=true
#Content-Type的值
spring.freemarker.content-type=text/html
#是否将HttpServletRequest中的属性添加到Model中
spring.freemarker.expose-request-attributes=false
#是否将HttpSession中的属性添加到Model
spring.freemarker.expose-session-attributes=false
#模板文件后缀
spring.freemarker.suffix=.ftl
#模板文件位置
spring.freemarker.template-loader-path=classpath:/templates/
Controller文件
package com.asta.controller;
import com.asta.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import java.util.*;
/**
* @Author:cs.cao
* @Date:2024/4/14 15:42
*/
@Controller
@RequestMapping("/freemarker")
public class HelloController {
@RequestMapping("/type")
public ModelAndView hello() {
String[] stars = new String[]{"周杰伦", "林俊杰", "陈奕迅", "五月天"};
List<String> cities = Arrays.asList("北京", "上海", "南京", "杭州");
List<User> userList = new ArrayList<>();
userList.add(new User(1, "zhangsan", 22));
userList.add(new User(2, "lisi", 23));
userList.add(new User(3, "wangwu", 18));
Map<String, Object> cityMap = new HashMap<>();
cityMap.put("BJ", "北京");
cityMap.put("SH", "上海");
cityMap.put("HZ", "杭州");
ModelAndView mv = new ModelAndView();
// boolean类型
mv.addObject("flag", true);
// 数值类型
mv.addObject("age", 18);
mv.addObject("salary", 100000);
mv.addObject("avg", 0.545);
// 字符串类型
mv.addObject("name", "cs.cao");
// 日期类型
mv.addObject("now", new Date());
// 空值类型
mv.addObject("nullValue", null);
// sequence类型
mv.addObject("stars", stars);
mv.addObject("cities", cities);
mv.addObject("userList", userList);
// hash类型
mv.addObject("cityMap", cityMap);
mv.setViewName("hello");
return mv;
}
}
目录结构
3.FreeMarker数据类型
FreeMarker模板中的数据类型有如下几种:
- 布尔型:等价于java中的Boolean类型,不同的是不能直接输出,可转换为字符串再输出。
- 日期型:等价于java中的Date类型,不同的是不能直接输出,需要转换成字符串再输出。
- 数值型:等价于java中的int,float,double等数值类型。有三种显示形式:数值型(默认)、货币型、百分比型。
- 字符型:等价于java中的字符串,有很多内置函数
- sequence类型:等价于java中的数组,list,set等集合类型。
- hash类型:等价于java中的Map类型。
3.1.布尔类型
<#--
boolean类型,需要转为字符串:
${flag?c}
${flag?string}
${flag?string("yes","no")}
-->
<h3>boolean类型:</h3>
${flag?c}<br/>
${flag?string}<br/>
${flag?string("yes","no")}<br/>
3.2.数值类型
<#--
数值类型,直接输出或转成字符串
1.转字符串
普通字符串:${num?c}
货币型字符串:${num?string.currency}
百分比型字符串:${num?string.percent}
2.保留浮点型数值指定小数位数(#表示一个小数位)
${num?string["0.##"]}
-->
<h3>数值类型:</h3>
${age}<br/>
${salary}<br/>
${salary?c}<br/>
${salary?string.currency}<br/>
${avg?string.percent}<br/>
${avg?string["0.##"]}<br/>
3.3.字符串类型
<#--
字符串类型:
1.截取字符串(左闭右开):${text?substring(start,end)}
2.首字母小写输出:${text?uncap_first}
3.首字母大写输出:${text?cap_first}
4.字母转小写输出:${text?lower_case}
5.字母转大写输出:${text?upper_case}
6.获取字符串长度:${text?length}
7.是否以指定字符开头(boolean类型):${text?starts_with("xx")?string}
8.是否以指定字符结尾(boolean类型):${text?ends_with("xx")?string}
9.获取指定字符的索引:${text?index_of("xx")}
10.去除字符串前后空格:${text?trim}
11.替换指定字符串:${text?replace("xx","xxx")}
-->
<h3>字符串类型:</h3>
${name?substring(1,4)}<br/>
${name?uncap_first}<br/>
${name?cap_first}<br/>
${name?lower_case}<br/>
${name?upper_case}<br/>
${name?length}<br/>
${name?starts_with("c")?string}<br/>
${name?ends_with("o")?string}<br/>
${name?index_of("cao")}<br/>
${name?trim}<br/>
${name?replace(".","-")}<br/>
3.4.日期类型
<#--
日期类型,需要先转成日期型或字符串:
1.年月日:${now?date}
2.时分秒:${now?time}
3.年月日时分秒:${now?datetime}
4.指定格式:${now?string("自定义格式")}
-->
<h3>日期类型:</h3>
${now?date}<br/>
${now?time}<br/>
${now?datetime}<br/>
${now?string("yyyy年MM月dd日 HH:mm:ss")}<br/>
3.5.空值类型
Freemarker的变量必须赋值,否则就会抛出异常。对于FreeMarker来说,null值和不存在的变量是完全一样的,因为FreeMarker无法理解null值。
<#--
空值类型:
Freemarker的变量必须赋值,否则就会抛出异常。对于FreeMarker来说,null值和不存在的变量是完全一样的,因为FreeMarker无法理解null值。
FreeMarker提供两个运算符来避免空值:
1.!:指定缺失变量的默认值
${value!}:如果value值为空,则默认值为空字符串。
$(value!"默认值"):如果value值为空,则默认值为字符串"默认值"。
2.??:判断变量是否存在
如果变量存在返回true,否则返回false。
${(value??)?string}
-->
<h3>空值类型:</h3>
${nullValue!}<br/>
${nullValue!"空"}<br/>
${(nullValue??)?string}<br/>
3.6.sequence类型
<#--
sequence类型:序列类型(数组、List、Set)
1.通过list执行输出序列:<#list 序列名 as 元素名>${名称}</#list>
2.获取序列的长度:${序列名?size}
3.获取序列元素的下标:${序列名?index}
4.获取第一个元素:${序列名?first}
5.获取最后一个元素:${序列名?last}
6.倒序输出:序列名?reverse
7.升序输出:序列名?sort
9.降序输出:序列名?sort?reverse
10.指定字段名排序:序列名?sort_by("字段名")
注:一般是JavaBean集合,对应的字段名需要提供get方法。
-->
<h3>sequence序列类型:</h3>
<#list stars as star>
下标:${star?index}--名字:${star}<br/>
</#list>
数组的长度:${stars?size}<br/>
第一个元素:${stars?first}<br/>
最后一个元素:${stars?last}<br/>
<#list cities?reverse as city>
下标:${city?index}--城市:${city}<br/>
</#list>
<#list cities?sort as city>
下标:${city?index}--城市:${city}<br/>
</#list>
<#list cities?sort?reverse as city>
下标:${city?index}--城市:${city}<br/>
</#list>
<#list userList?sort_by("age") as user>
序号:${user.index}--名称:${user.name}--年龄:${user.age}<br/>
</#list>
3.7.hash类型
<#--
hash类型(Map):
1.key遍历输出:
<#list hash?keys as key>
${key} -- ${hash[key]}
</#list>
2.value遍历输出:
<#list hash?values as value>
${value}
</#list>
-->
<h3>hash类型:</h3>
<#list cityMap?keys as key>
key:${key}--城市:${cityMap[key]}<br/>
</#list>
<#list cityMap?values as value>
城市:${value}<br/>
</#list>
4.FreeMarker指令
assign自定义变量指令
使用assign
指令可以创建一个新的变量,或者替换一个已经存在的变量。
<#--
assign自定义变量指令
语法:
<#assign 变量名=值>
<#assign 变量名=值 变量名=值> (定义多个变量)
-->
<h3>assign自定义变量指令:</h3>
<#assign num=1 names=["zhangsan","lisi","wangwu"]>
${num} -- ${names?join(",")}
if/elseif/else逻辑判断指令
可以使用if-elseif-else
指令来判断是否满足某些条件
<#--
if/elseif/else逻辑判断指令:
语法:
<#if condition>
...
<#elseif condition2>
...
<#elseif condition3>
...
<#else>
...
</#if>
注意:
1.condition、condition2等:将被计算成布尔值的表达式
2.elseif和else指令是可选的。
-->
<h3>if/elseif/else逻辑判断指令:</h3>
<#assign score=80>
<#if score < 60 >
加油
<#elseif score = 60 >
及格万岁
<#elseif score gt 60 && score lt 80 >
小伙子还不错
<#else>
厉害
</#if>
<br/>
<#assign list="">
<#if list?? >
数据存在
<#else>
数据不存在
</#if>
<br/>
list遍历指令
可以使用list
指令对序列进行遍历
<#--
list遍历指令:
格式1:
<#list sequence as item>
...
</#list>
格式2:
<#list sequence as item>
...
<#else>
当没有选项时执行else指令
</#list>
注:
1.else部分是可选的
2.sequence:想要迭代的项,可以是序列或集合的表达式
3.item:循环变量的名称
4.当没有迭代项时,才使用else指令,可以输出一些特殊的内容而不只是空在那里。
-->
<#assign nameList=[]>
<#--判断数据部位空,再执行遍历(如果序列不存在时直接遍历会报错)-->
<#if nameList??>
<#list nameList?sort?reverse as name>
下标:${name?index}--名称:${name}<br/>
<#else>
哈哈空的
</#list>
</#if>
<br/>
macro自定义指令(宏)
可以使用macro
指令自定义一些指令
<#--
macro自定义指令(宏):
1.基本使用
格式:
<#macro 指令名>
指令内容
</#macro>
使用:
<@指令名></@指令名>
2.有参数的自定义指令
格式:
<#macro 指令名 参数名1 参数名2>
指令内容
</#macro>
使用:
<@指令名 参数名1=参数值1 参数名2=参数值2></@指令名>
注:
1.指令可以被多次使用
2.自定义指令中可以包含字符串,也可以包含内置指令
-->
<h3>macro自定义指令:</h3>
<#--自定义指令-->
<#macro address>
@1995-2024 The FreeMarker Project.
</#macro>
<#--使用指令-->
<@address></@address><br/>
<@address></@address><br/>
<#--自定义指令(含参数)-->
<#macro queryUserByParams uname uage>
通过多个餐宿查询用户信息 - ${uname} - ${uage}
</#macro>
<@queryUserByParams uname="zhangsan" uage="18"></@queryUserByParams><br/>
<#--自定义指令(其中包含内置指令)-->
<#macro cfg>
<#list 1..9 as i>
<#list 1..i as j>
${i}*${j}=${i*j}
</#list>
<br/>
</#list>
<br/>
</#macro>
<@cfg></@cfg><br/>
nested占位指令
nested
指令执行自定义指令开始和结束标签中间的模板片段。嵌套的片段可以包含模板中任意合法的内容。
<#--
nested占位指令:
nested相当于占位符,一般结合macro指令一起使用。
可以将自定义指令中的内容通过nested指令占位,当使用自定义指令时会将占位内容显示。
-->
<h3>nested占位指令:</h3>
<#macro testNested>
测试nested:
<#nested>
<#nested>
</#macro>
<#--使用指令-->
<@testNested><p>占位的内容</p></@testNested><br/>
import导入指令
import
指令可以引入一个库。也就是说,它创建一个新的命名空间,然后在那个命名空间中执行给定路径的模板。可以使用引入的空间中的指令。
commons.ftl文件
<#macro cfg>
<#list 1..9 as i>
<#list 1..i as j>
${i}*${j}=${i*j}
</#list>
<br/>
</#list>
<br/>
</#macro>
在其他ftl页面中通过import导入commons.ftl的命名空间,使用该命名空间的指令。
<#--
import导入指令:
导入命名空间:<#import "ftl文件" as 命名空间>
使用命名空间中的指令:<@命名空间.指令></@命名空间.指令>
-->
<h3>import导入指令:</h3>
<#import "commons.ftl" as common>
<@common.cfg></@common.cfg><br/>
include包含指令
可以使用include
指令在你的模板中插入另一个FreeMarker模板文件。被包含模板的输出格式是在include标签出现的位置插入的。被包含的文件和包含它的模板共享变量,就像是被复制粘贴进去的一样。
<#--
include包含指令:
用来引入其他页面文件(如txt、ftl、html等)
-->
<h3>include包含指令:</h3>
<#include "test.txt">
<#include "test.ftl">
<#include "test.html">
5.Bootstrap样式
Bootstrap框架快速上手:Bootstrap快速上手
视频讲解地址:乐字节念安老师B站直达
菜鸟教程Bootstrap3:菜鸟教程Bootstrap3直达
<!DOCTYPE html>
<html lang="en">
<!-- 文档:https://blog.csdn.net/Augenstern_QXL/article/details/119748650 -->
<head>
<meta charset="utf-8">
<!--使⽤X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示⽤户是否可以缩放⻚⾯;
width指定视区的逻辑宽度;
device-width指示视区宽度应为设备的屏幕宽度;
initial-scale指令⽤于设置Web⻚⾯的初始缩放⽐例
initial-scale=1则将显示未经缩放的Web⽂档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!--载入 Bootstrap 的css-->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 如果要使⽤Bootstrap的js插件,必须先调⼊jQuery -->
<script src="lib/js/jquery-3.7.1.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使⽤的js插件调⽤ -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background-color: aqua;height: 200px;">
container类用于固定宽度并支持响应式布局的容器
</div>
<div class="container-fluid" style="background-color:aquamarine;height: 200px;">
container-fluid类用于100%宽度,占据全部视口(viewport)的容器
<!-- 列组合 -->
<div class="row">
<!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值-->
<div class="col-md-4 col-lg-4" style="background-color: red;">4列</div>
<div class="col-md-8 col-lg-8" style="background-color: pink;">8列</div>
</div>
<!-- 列偏移 -->
<div class="row">
<div class="col-md-2" style="background-color: red;">2列</div>
<div class="col-md-2 col-md-offset-3" style="background-color: pink;">列偏移3列</div>
</div>
<!-- 列排序 -->
<div class="row">
<div class="col-md-2" style="background-color:antiquewhite;">2列</div>
<div class="col-md-2 col-md-push-3" style="background-color:aqua;">列排序后移3列</div>
<div class="col-md-1 col-md-pull-1" style="background-color:brown;">列排序前移1列</div>
</div>
<!-- 列嵌套 -->
<div class="row">
<div class="col-md-4 col-lg-4" style="background-color: red;">4列</div>
<div class="col-md-8 col-lg-8" style="background-color: pink;">
<div class="row">
<div class="col-md-3 col-lg-3" style="background-color:bisque;">3列</div>
<div class="col-md-7 col-lg-7" style="background-color:blue;">7列</div>
</div>
</div>
</div>
</div>
<!-- 标题 -->
<h1>Bootstrap Heading<small>副标题</small></h1>
<div class="h1">
Bootstrap 标题1
<span class="small"> 副标题 </span>
</div>
<!-- 段落 -->
<p>以后的你会感谢现在努力的你</p>
<p class="lead">以后的你会感谢现在努力的你</p>
<p class="lead">
<small>以后的</small><!-- 小号字 -->
<b>你</b>会 <!-- 加粗 -->
<i>感谢</i>现在 <!-- 斜体 -->
<em>努力</em>的 <!-- 斜体 -->
<strong>你</strong><!-- 加粗 -->
</p>
<!-- 强调 -->
<div class="container">
<div class="text-muted">.text-muted:提示效果</div>
<div class="text-primary">.text-primary:主要效果</div>
<div class="text-success">.text-success:成功效果</div>
<div class="text-info">.text-info:信息效果</div>
<div class="text-warning">.text-warning:警告效果</div>
<div class="text-danger">.text-danger:危险效果</div>
</div>
<!-- 对齐方式 -->
<div class="container">
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">
网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
</p>
</div>
<div class="container">
<!-- 无序列表,使用class="list-unstyled"去除前面的项目符号 -->
<ul class="list-unstyled">
<li>...</li>
</ul>
<!-- 无序列表,使用class="list-inline"去除前面的项目符号,保持水平显示 -->
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>
<!-- 自定义列表,使用样式class="dl-horizontal" 制作水平定义列表,当标题宽度超过 160px 时,将会显示三个省略号。 -->
<dl class="dl-horizontal">
<dt>HTML 超文本标记语言</dt>
<dd>HTML称为超文本标记语言,是一种标识性的语言。</dd>
<dt>测试标题不能超过160px的宽度,否则2个点</dt>
<dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果。</dd>
</dl>
</div>
<div>
<!-- 单行代码 -->
<code>this is a simple code</code>
<!-- 快捷键 -->
<p>
使用<kbd>ctrl+s</kbd>保存
</p>
<!-- 1.显示代码原本格式,包括空格和换行 -->
<pre>
public class HelloWorld {
public static void main(String[] args){
System.out.println("helloworld...");
}
}
</pre>
<!--
2.显示html标签的代码需要适应字符实体
小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代
-->
<pre>
<h2>Hello World</h2>
</pre>
<pre>
<h2>Hello World</h2>
</pre>
<!-- 3.当高度超过,会存在滚动条 -->
<pre class="pre-scrollable">
<ol>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
</ol>
</pre>
</div>
<div>
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="info">
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr class="active">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="danger">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
<tr class="warning">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr>
<td class="success">数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
</div>
<div class="container">
<!-- 文本框 -->
<div class="row">
<div class="col-sm-3">
<!--原格式文本域-->
<input type="text" name="" id="" />
<!--表单样式文本域-->
<input type="text" name="" id="" class="form-control" />
<!--较大文本域-->
<input type="text" name="" id="" class="form-control input-lg" />
<!--较小文本域-->
<input type="text" name="" id="" class="form-control input-sm" />
</div>
</div>
<!-- 原格式下拉框 -->
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<hr>
<!-- 表单样式下拉框 -->
<select class="form-control">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<hr>
<!-- 表单样式下拉框提供多个选择 -->
<select class="form-control" multiple="multuple">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<!-- 占3列的原格式文本域 -->
<div class="row">
<div class="col-sm-3">
<textarea rows="3"></textarea>
</div>
<!-- 占6列的文本域 -->
<div class="col-sm-6">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</div>
<div class="container">
<!-- 垂直显示,class="checkbox",写法1 -->
<div>
<div class="checkbox">
<label><input type="checkbox" name="hobby">游戏</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="hobby">学习</label>
</div>
</div>
<!-- 水平显示,class="checkbox-inline",写法2 -->
<div>
<label class="checkbox-inline"><input type="checkbox">游戏</label>
<label class="checkbox-inline"><input type="checkbox">学习</label>
</div>
</div>
<div class="container">
<div class="row">
<!-- 垂直显示,class="radio" -->
<div>
<div class="radio">
<label><input type="radio" name="sex">男</label>
</div>
<div class="radio">
<label><input type="radio" name="sex">女</label>
</div>
</div>
<!-- 水平显示,class="radio-inline",定义name="sex"使radio识别为同一组 -->
<div>
<label class="radio-inline">
<input type="radio" name="sex">男
</label>
<label class="radio-inline">
<input type="radio" name="sex">女
</label>
</div>
</div>
</div>
<div class="container">
<button type="button">原生按钮</button>
<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
<br />
<!-- 其他标签也可以转换成按钮样式 -->
<a class="btn btn-default" href="#" role="button">a标签</a>
<span class="btn btn-default">span标签</span>
<input class="btn btn-default" type="button" value="Input标签" />
<div class="btn btn-info">div标签</div>
<br />
<!-- 按钮大小 -->
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
<br />
<!-- 按钮禁用 -->
<!-- 在标签中添加disabled属性 -->
<button type="button" class="btn btn-primary" disabled="disabled">Primary button</button>
<!-- 在class中添加disabled只是样式上禁用了,并不是真正禁用了此按钮 -->
<button type="button" class="btn btn-default disabled">Button</button>
</div>
<!--
表单
1.向父元素<form> 元素 添加 role="form"
2.把标签和控件放在一个带有 class="form-group" 的<div> 中。这是获取最佳间距所必需的
3.向所有的文本元素 <input> 、<textarea> 、select 添加 class="form-control"
-->
<div class="container">
<form role="form" class="form-horizontal" action="#">
<h2 class="text-center">用户信息表</h2>
<!-- 表单中的表单元素组 -->
<!-- 输入框 -->
<div class="form-group">
<label for="uname" class="control-label col-md-2">姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
</div>
</div>
<!-- 输入框 -->
<div class="form-group">
<label for="upwd" class="control-label col-md-2">密码</label>
<div class="col-md-8">
<input type="password" id="upwd" class="form-control" placeholder="请输入密码" />
</div>
</div>
<!-- 多选框 -->
<div class="form-group">
<label class="control-label col-md-2">爱好</label>
<div class="col-md-8">
<label class="checkbox-inline">
<input type="checkbox" />敲代码
</label>
<label class="checkbox-inline">
<input type="checkbox" />跳舞
</label>
</div>
</div>
<!-- 下拉选择框 -->
<div class="form-group">
<label class="control-label col-md-2">城市</label>
<div class="col-md-8">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
</div>
</div>
<!-- 文本框 -->
<div class="form-group">
<label for="remark" class="control-label col-md-2">简介</label>
<div class="col-md-8">
<textarea id="remark" class="form-control"></textarea>
</div>
</div>
<!-- 按钮 -->
<div class="form-group">
<div class="col-md-2 col-md-offset-5">
<button class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
<div class="container">
<!-- 内联表单 -->
<form role="form" class="form-inline" action="#">
<div class="form-group">
<label for="userName">姓名</label>
<input type="text" id="userName" class="form-control" placeholder="请输入姓名" />
</div>
<div class="form-group">
<label for="userPwd">密码</label>
<input type="text" id="userPwd" class="form-control" placeholder="请输入姓名" />
</div>
<div class="form-group">
<label for="userName">姓名</label>
<input type="text" id="userName" class="form-control" placeholder="请输入密码" />
</div>
<div class="form-group">
<button class="btn btn-warning">提交</button>
</div>
</form>
</div>
<!-- 缩略图:class="thumbnail" -->
<div class="container">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="lib/img/1.jpg" alt="通用的占位符缩略图">
</a>
</div>
</div>
<!-- 自定义缩略图 -->
<div class="container">
<!-- 面板 -->
<div class="panel panel-default">
<div class="panel-heading">
<h3>明星合集</h3>
</div>
<div class="panel-body">
<!-- 第一个缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="lib/img/1.jpg" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市,中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<!-- 第二个缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="lib/img/1.jpg" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市,中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<!-- 第三个缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="lib/img/1.jpg" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市,中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
....
....
</div>
</div>
</div>
<div class="container">
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li> <a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="active"><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<div class="container">
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="active"><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<div class="container">
<p>基本的垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="active"><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<!-- 分页 -->
<div class="container">
<p>分页导航</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
<div class="container">
<!-- 1.使用一个类名为dropdown 或 btn-group 的div包裹整个下拉框
<div class="dropdown"></div>
默认下拉框向上为 dropup ,向下为 dropdown
-->
<div class="dropdown">
<!--
使用 button 作为父菜单,使用类名: dropdown-toggle 和自定义 data-toggle属性
-->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢的频道
<!-- 设置下拉箭头 -->
<span class="caret"></span>
</button>
<!-- 下拉菜单项使用一个 ul 列表,并且定义一个类名为 dropdown-menu -->
<ul class="dropdown-menu">
<!-- 分组标题: li 添加类名 dropdown-header 来实现分组的功能-->
<li class="dropdown-header">科普</li>
<li><a href="#">人与自然</a></li>
<!-- 分割线: li 添加类名 driver 来实现下拉分割线的功能 -->
<li class="driver"></li>
<li class="dropdown-header">影视</li>
<li class="active"><a href="#">快乐大本营</a></li>
<li class="disabled"><a href="#">暴走大事件</a></li>
<li><a href="#">木鱼水心</a></li>
</ul>
</div>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body">
myModal:在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button class="btn btn-primary btn-lg" id="btn_open_dialog">开始演示模态框(JS操作)</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_2"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel_2">模态框(Modal)标题</h4>
</div>
<div class="modal-body">
myModal_2:在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
// 绑定按钮的点击事件
$("#btn_open_dialog").click(function () {
//手动打开模态框
$('#myModal_2').modal('show');
})
//关闭模态框
$("#submit_btn").click(function () {
//手动关闭模态框
$('#myModal_2').modal('hide');
})
</script>
</html>