bootstrap的使用

一 前言

   前一篇在后台代码已经完成的情况下,如何在前端显示员工部门的信息,个人更倾向于第二种的ajax的显示,这里为了前端更美化所以引进bootcss框架.

分两部分来说说bootcss跟ajax的使用.

二.bootcss的使用流程

(一) 首先你要去官网下载它的包,官网地址是

Bootstrap中文网 http://www.bootcss.com/

进去下载的两个:

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。

 Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

Bootstrap 包的内容

• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
• CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
• 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。。
• JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

• 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

(2)在前端页面引入

我们需要引入以下三个东西

<!-- 引入jquery -->
<script type="text/javascript" src='<c:url value="/static/jquery/jquery-3.2.1.min.js"/>'></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src='<c:url value="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"/>'></script>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" type="text/css" href='<c:url value="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>' />

(3)如何快速学会使用这些布局

作为一个程序员,有时候学会查文档是最实用的技能,比把他死命记住要好很多,也没必要记那么多东西.所以接下来如何使用.

还是之前那个下载文档的官网,我们找到最上面一排的显示,如下图所示:

1.点进去第三个,里面会有一系列的布局信息.里面都是一系列css样式之类的

在右边你会看到一系列的设置根据所需进行配置一下

2.点击组件你会看到以下设置,

这里面有分页的设置,可以根据个人的喜好结合之前使用的pagehelper进行点击分页的设置

3.点击javaScript插件以下设置,增对于通过添加,修改之类的,