本文主要是介绍Bootstrap：简洁、直观、强悍的前端开发框架，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
打开Bootsrap的官网，你会看到这样一句英文：
Bootstrapis the most popular HTML, CSS, and JS framework for developing responsive,mobile first projects on the web.
什么意思呢？有点英文基础的人都能看懂，但是为了准确起见，我们看去Bootstrap中文网看较为准确的翻译：
Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的Web项目。
为何今天要说这个呢？因为最近在做的项目——接口管理系统，需要使用这个非常棒的前端框架，因此才抽出时间去了解和使用。可能你在没接触之前会有一种高大上的感觉，同时也有一种什么都不懂的感觉，我也一样，但是这不妨碍我们去使用它。
下面给出关于Bootstrap的两个网址，方便大家去学习：
Bootstrap官方网站：http://getbootstrap.com/
Bootstrap中文网站：http://www.bootcss.com/
赶脚自己英文水平不错的，就去查询英文网站，顺便也把英语练练，看英文文档有困难的就麻溜的去看翻译好的中文网站吧，学习起来更爽。下面我就简单说一下如何在自己的项目中去使用Bootstrap框架。
Bootstrap环境安装
打开Bootstrap的官方网站：http://getbootstrap.com/ 你会看到如下页面：
在上图中有个两个按钮，分别是Download Bootstrap和Download source，这两个按钮所代表的意识如下：
DownloadBootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
为了方便起见，我就使用Bootstrap的预编译版本为大家演示如何使用Bootstrap。
首先我们需要新建一个jsp页面或者是html页面，然后在这个页面编写代码如下，需要注意的是你必须将你下载好的css和js文件放在你项目路径里面，方便添加引用。
<span style="font-size:18px;"><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap实例</title><!-- 引用的Css样式文件和js文件 -->
<link href="${pageContext.request.contextPath}/style/hmcss/index/index.css" rel="stylesheet"><script src="${pageContext.request.contextPath}/script/headjs/index.js"></script><!-- Bootstrap及JQuery的必要引用 -->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="${pageContext.request.contextPath}/style/css/bootstrap-table.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/script/bootstrap-table.js"></script><!-- 引用结束==========================================-->
</head>
<body><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">我的网站</a></div><div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#about">关于我们</a></li><li><a href="#contact">联系我们</a></li><li><a href="#contact">帮助</a></li></ul></div><!--/.nav-collapse --></div></nav><div class="container"><div class="starter-template" style="padding:40px 15px;text-align:center"><h1>Bootstrap 是一款非常好用的前端框架</h1><p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p></div></div><!-- /.container -->
</body>
</html></span>编写完毕之后，运行代码，效果如下：
是不是使用了Bootstrap之后的的页面代码更加简洁和直观了呢？至于强悍的感觉，可能你还不会有什么共鸣，但是我相信随着你的学习深入，在实践中熟练使用，相信会有一天你会感慨道:我的妈呀，Bootstrap简直太强悍了。
小结一下：
之前一直使用的EasyUI的前端框架，当时用的觉得还不错，可是当我接触了Bootstrap之后，突然觉得EasyUI不怎么好看了，而且写起来也特别的麻烦，而Bootstrap的封装性更胜一筹，很多的代码不用我们自己去写，都是现成的。举个例子，我们经常在项目中使用table，EasyUI需要我们自己动手去写分页的样式以及查询等功能，而Bootstrap的表格仅仅使用一个属性就可以控制十分分页，是服务器端分页还是客户端分页，都可以控制，而且查询框也自带，这得省去了多少的js代码啊，简直爽歪歪啊。
因此，将这个个人觉得比较好的前台框架分享给没有接触过的小伙伴，我也是刚接触不久，所有权当是给大家抛砖引玉吧，我们共同学习，共同交流。这篇关于Bootstrap：简洁、直观、强悍的前端开发框架的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
