初识BootStrap框架-阿南达文事网

初识BootStrap框架

文章目录

- 初识BootStrap框架
前言
感受
一、BootStrap是什么？
一、什么是 Bootstrap 网格系统（Grid System）？
二、使用步骤
- 1.引入库
- 2.表单控件
- 3.表单
- 4.常用样式
- 5.缩略图
- 6.导航
- 7.下拉菜单
- 8.模态框
总结

前言

提示：这里可以添加本文要记录的大概内容：
因为公司没有前端,所以把对后端特别友好的BootStrap框架进行封装成了EADP.但是由于之前从未听说过此框架.所以系统性的学习了一下.

感受

这个框架是基于jquery框架的前端框架,一般情况下要与jquery结合使用,使用方式也与其他的框架差不多.样式非常的简约,但是也非常好看.Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。这里的响应式就是随着窗口的大小而改变.

一、BootStrap是什么？

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

一、什么是 Bootstrap 网格系统（Grid System）？

BootStrap的官方文档是这样描述的:“Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。”
简单来说就是把屏幕分成十二列.可以根据自己的偏好来想要让自己的组件占有多大位置,如下图所示:

<div class="container"><h1>Hello, world!</h1><div class="row"><div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第一列</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第二列 - 分为四个盒子</h4><div class="row"><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.</p></div><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div><div class="row"><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p></div></div></div></div>
</div>

二、使用步骤

1.引入库

在使用之前需要下载BootStrap的压缩包.也要引入jquery.开发工具则不限制.eclipse,idea
都可.但是比较推荐HBuilder X这个IDE.界面简单,而且内置了服务器.默认端口号是8848,这个需要注意一下,防止端口号冲突.可以直接对页面效果预览,对初学者及其友好.在使用之前要在中引入css和js.如下图所示:

	<head><meta charset="utf-8"><title>模态框</title><link rel="stylesheet" href="bootStrap/css/bootstrap.min.css"/><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script src="bootStrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script></head>

2.表单控件

以下将代码粘贴出来:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单控件</title><link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css"/></head><body><!-- 表单布局,水平表单,设置样式,form-horizonal --><form action="#" class="form-horizontal" role="form"><h2 align="center">用户信息表</h2><!-- 表单中的表单元素zu --><div class="form-group"><label for="uname" class="control-label col-md-2">姓名:</label><div class="col-md-8"><input type="text" id="name" class="form-control" placeholder="请输入姓名"/></div></div><div class="form-group"><label for="pwd" class="control-label col-md-2">密码:</label><div class="col-md-8"><input type="text" id="name" class="form-control" placeholder="请输入密码"/></div></div><div class="form-group"><label  class="control-label col-md-2">爱好:</label><div class="col-md-8 col-lg-offset-1" ><label class="checkbox-inline"><input type="checkbox" name="hobby"/>唱歌</label><label class="checkbox-inline"><input type="checkbox" name="hobby"/>跳舞</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></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-8 col-lg-offset-5"><button class="btn btn-info">提交</button></div></div></form> <hr /><!-- 内联表单 --><form class="form-inline"><div class="form-group"><label for="userName">姓名:</label><input type="text" id="username" class="form-control" placeholder="请输入姓名"/></div><div class="form-group"><label for="pwd">密码:</label><input type="text" id="password" class="form-control" placeholder="请输入密码"/></div><div class="form-group"><button class="btn btn-info">提交</button></div></form></body>
</html>

效果如下:

3.表单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单</title><link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css"/></head><body><!-- 表单 1,文本框 .form-control表单控件的大小--><input type="text"/><br /><select><option>请选择城市</option><option>北京</option><option>上海</option></select><br /><textarea></textarea>	<br /><div class="row"><div class="col-md-3"><select class="form-control"><option>请选择城市</option><option>北京</option><option>上海</option></select><br /><select class="form-control" multiple="multiple"><option>请选择城市</option><option>北京</option><option>上海</option></select><br /></div></div><div class="row"><div class="col-md-3"><input class="form-control" type="text"/><br /><input class="form-control input-lg" type="text"/><br /><input class="form-control input-sm" type="text"/><br /><textarea class="form-control"></textarea></div></div><input type="checkbox" name="hobby"/>唱歌<input type="checkbox" name="hobby"/>跳舞<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<hr /><!-- 垂直显示 --><div class="row"><div class="col-md-3"><div class="checkbox""><label><input type="checkbox" name="hobby"/>唱歌</label></div><div class="checkbox""><label><input type="checkbox" name="hobby"/>跳舞</label></div></div></div><!-- 水平显示 --><div class="row"><div class="col-md-3"><label class="checkbox-inline"><input type="checkbox" name="hobby"/>唱歌</label><label class="checkbox-inline"><input type="checkbox" name="hobby"/>跳舞</label></div></div><!-- 单选框--><div class="row"><div class="col-md-3"><div class="radio"><label><input type="radio" name="sex"/>男</label></div><div class="radio""><label><input type="radio" name="sex"/>女</label></div></div></div><div class="row"><div class="col-md-3"><label class="radio-inline"><input type="radio" name="sex" value="男"/>男</label><label class="radio-inline"><input type="radio" name="sex" value="女"/>女</label></div></div><button class="btn">按钮</button><button class="btn btn-danger">按钮</button><button class="btn btn-info">按钮</button><button class="btn btn-default">按钮</button><button class="btn btn-link">按钮</button><button class="btn btn-warning">按钮</button><button class="btn btn-primary">按钮</button><br /><hr /><!-- 通过按钮样式设置其他元素为按钮效果 --><a href="#" class="btn btn-success">a标签</a><span class="btn btn-danger">span标签</span><!-- 设置按钮的大小 --><button class="btn btn-primary btn-lg">按钮</button><button class="btn btn-primary btn-sm">按钮</button><button class="btn btn-primary btn-xs">按钮</button><br /><hr /><!-- 按钮禁用,真正意义上的禁用 --><button class="btn btn-primary btn-xs" onclick="alert('点击事件')" disabled>按钮</button><!-- 样式上禁用,但并非真正的禁用 --><button class="btn btn-danger btn-xs disabled" onclick="alert('样式禁用')">按钮</button></body>
</html>

4.常用样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用样式</title><link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.css"/></head><body>1,列表<!-- 			无序列表<ul><li></li></ul>有序列表<ol><li></li></ol>定义列表<dl><dt><dd></dd></dt></dl> --><ul><li>无序列表1</li><li>无序列表2</li></ul><ol><li>有序列表1</li><li>有序列表2</li></ol><dl><dt>第一</dt><dd>定义列表1</dd><dt>第二</dt><dd>定义列表3</dd></dl> 	<hr/><!-- 去点列表 --><ul class="list-unstyled"><li>去点列表1</li><li>去点列表2</li></ul><!-- 内联列表--><ul class="list-inline"><li>首页</li><li>java</li><li>python</li></ul><div class="container"><div class="row"><div class="col-md-4">4列</div><div class="col-md-8">8列</div></div></div><hr/><!-- 单行代码 -->this is a simple code<br /><code>this is a simple code</code><br/><code>this is a simple codethis is a simple code</code><!-- 快捷键 --><p>使用<kbd>ctrl</kbd>+<kbd>s</kbd>进行保存</p><!-- 多行代码 --><pre class="pre-scrollable">
public void recordItem(BizEntity e, String belongUserId) throws Exception {Assert.notNull(e, "对象不能为空。");String unitId = null;if (e instanceof IUnit) {unitId = ((IUnit)e).getUnitId();}CheckWorkflowLog checkWorkFlowLog = new CheckWorkflowLog();checkWorkFlowLog.setBeanId("paper");checkWorkFlowLog.setDataId(e.getId());checkWorkFlowLog.setCreateTime(DateUtil.getSysDateTimestamp());// checkWorkFlowLog.setCreateUserId(e.getCreateUserID());checkWorkFlowLog.setCreateUserId("后台线程");checkWorkFlowLog.setUnitId(unitId);checkWorkFlowLog.setBelongUserId(belongUserId);if (e instanceof BizCheckEntity) {checkWorkFlowLog.setPrevRoleId("2");checkWorkFlowLog.setRoldId("3,4");// checkWorkFlowLog.setRoleIded(vo.getRoleIded());// checkWorkFlowLog.setSignState(vo.getSignState());// checkWorkFlowLog.setSignType(vo.getSignType());checkWorkFlowLog.setCheckStatus(CHECK_STATUS_TEACHER_SUBMIT);}SessionFactory sessionFactory = applicationContext.getBean("sessionFactory", SessionFactory.class);Session        session        = sessionFactory.openSession();// session.evict(checkWorkFlowLog);session.save(checkWorkFlowLog);session.flush();}</pre><!-- 当长度过长时,可以添加滚动条 -->
<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>
<hr />
<br />
<table class="table table-bordered table-striped table-hover table-condensed"><tr class="info"><th>java</th><th>数据库</th><th>javaScript</th></tr><tr class="success"><th>面向对象</th><th>oracle</th><th>json</th></tr><tr class="active"><th>数组</th><th>mysql</th><th>ajax</th></tr><tr class="danger"><th>java</th><th>数据库</th><th>javaScript</th></tr><tr><th>面向对象</th><th>oracle</th><th>json</th></tr><tr><th>数组</th><th>mysql</th><th>ajax</th></tr>
</table></body>
</html>

5.缩略图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>缩略图</title><link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css"/></head><body><div class="container"><div class="row"><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img  src="img/1.png" style="width: 240 ;height: 360;" alt="..."/><h3>高圆圆</h3><p>高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。2003年，凭借古装武侠爱情剧《倚天屠龙记》受到广泛关注</p><button class="btn btn-info"><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="img/2.png" style="width: 240 ;height: 360;" alt="..."/><h3>图灵</h3><p>计算机之父</p><button class="btn btn-info"><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="img/1.png" style="width: 240 ;height: 360;" alt="..."/><h3>高圆圆</h3><p>高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。2003年，凭借古装武侠爱情剧《倚天屠龙记》受到广泛关注</p><button class="btn btn-info"><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="img/2.png" style="width: 240 ;height: 360;" alt="..."/><h3>图灵</h3><p>计算机之父</p><button class="btn btn-info"><span class="glyphicon glyphicon-heart"></span>喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span>评论</button>	</div>	</div></div><div class="row"><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img  src="img/1.png" style="width: 240 ;height: 360;" alt="..."/><h3>高圆圆</h3><p>高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。2003年，凭借古装武侠爱情剧《倚天屠龙记》受到广泛关注</p><button class="btn btn-info"><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="img/2.png" style="width: 240 ;height: 360;" alt="..."/><h3>图灵</h3><p>计算机之父</p><button class="btn btn-info"><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="img/1.png" style="width: 240 ;height: 360;" alt="..."/><h3>高圆圆</h3><p>高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。2003年，凭借古装武侠爱情剧《倚天屠龙记》受到广泛关注</p><button class="btn btn-info"><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="img/2.png" style="width: 240 ;height: 360;" alt="..."/><h3>图灵</h3><p>计算机之父</p><button class="btn btn-info"><span class="glyphicon glyphicon-heart"></span>喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span>评论</button>	</div>	</div></div></div></body>
</html>

6.导航

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>导航</title><link  rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css"/></head><body><p>标签式的导航菜单</p><ul class=" nav nav-tabs"><li class="active"> <a href="05-常用样式.html">常用样式</a></li><li><a href="05-常用样式.html">常用样式</a></li><li><a href="08-缩略图.html">缩略图</a></li><li><a href="09-面板.html">面板</a></li><li><a href="表单.html">表单</a></li><li><a href="表单控件.html">表单控件</a></li></ul><hr /><p>标签式的导航菜单</p><ul class=" nav nav-pills"><li class="active"> <a href="05-常用样式.html">常用样式</a></li><li><a href="05-常用样式.html">常用样式</a></li><li><a href="08-缩略图.html">缩略图</a></li><li><a href="09-面板.html">面板</a></li><li><a href="表单.html">表单</a></li><li><a href="表单控件.html">表单控件</a></li></ul><hr/><p>面包屑式导航栏<p><ul class="breadcrumb"><li class="active"> <a href="05-常用样式.html">常用样式</a></li><li><a href="05-常用样式.html">常用样式</a></li><li><a href="08-缩略图.html">缩略图</a></li><li><a href="09-面板.html">面板</a></li><li><a href="表单.html">表单</a></li><li><a href="表单控件.html">表单控件</a></li></ul><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></body>
</html>

7.下拉菜单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>下拉菜单</title><link rel="stylesheet" href="bootStrap/css/bootstrap.min.css"/><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script src="bootStrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script></head><body><div class="dropdown"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">喜欢的频道<!-- 设置下拉箭头 --><span class="caret"></span></button><!-- 准备的下来菜单 --><ul class="dropdown-menu"><li class="dropdown-header">科普</li><li><a href="05-常用样式.html" target="_blank">人与自然</a></li><!-- 分割线 --><li class="divider"></li><li class="dropdown-header">搞笑</li><li class="active"><a href="05-常用样式.html" target="_blank">人与自然</a></li><li class="disabled"><a href="05-常用样式.html" target="_blank">人与自然</a></li><li><a href="05-常用样式.html" target="_blank">人与自然</a></li></ul></div></body>
</html>

8.模态框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模态框</title><link rel="stylesheet" href="bootStrap/css/bootstrap.min.css"/><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script src="bootStrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script></head><body><!-- 操作模态框 -->
<!-- 		打开模态框:	$('#identifier').modal('show')关闭模态框:	$('#identifier').modal('hide') --><!-- 1,通过date属性 --><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button><button class="btn btn-primary"  id="btn">打开模态框</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"><form class="form-horizontal" role="form"><div class="form-group"><label class="uname" class="col-md-2 control-label" >姓名</label><div class="col-md-8"><input type="text" id="uname" class="form-control" placeholder="请输入姓名"/></div></div><div class="form-group"><label class="pwd" class="col-md-2 control-label" >密码</label><div class="col-md-8"><input type="text" id="uname" class="form-control" placeholder="请输入密码"/></div></div></form></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><!-- /.modal-content --></div><!-- /.modal --></div><script type="text/javascript">//绑定按钮的点击事件$("#btn").click(function(){//手动打开模态框$("#myModal").modal("show");});$("#submit_btn").click(function(){$("#myModal").modal("hide");});</script></body>
</html>

总结

这些只是最常用的组件,BootStrap还提供了许多样式.可以参阅BootStrap的菜鸟文档:.html.