SpringBoot+FreeMaker+Bootstrap3

愚愚是个大笨蛋

已于 2024-05-03 09:30:47 修改

阅读量431

点赞数 3

文章标签： spring boot 后端 java

于 2024-04-14 22:42:20 首次发布

本文链接：https://blog.csdn.net/qq_29698805/article/details/137749829

版权

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}&nbsp;
            </#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}&nbsp;
        </#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标签的代码需要适应字符实体  
            小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代 
        -->
        <pre>
            <h2>Hello World</h2>
        </pre>
        <pre>
            &lt;h2&gt;Hello World&lt;/h2&gt;
        </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="#">&laquo;</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="#">&raquo;</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">&times;</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">&times;</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>