Bootstrap学习笔记
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统。
Bootstrap把一个容器或整个网页平均分成了12列。
栅格系统必须放在.container或container-fluid中
| 样式名称 | 含义 | 分辨率 | .container最大宽度 | 列间隔 |
|---|---|---|---|---|
| col-xs-* | 超小屏幕、手机 | <768px | 自动 | 30px |
| col-sm-* | 小屏幕、平板 | ≥768px | 750px | 30px |
| col-md-* | 中等屏幕、桌面显示器 | ≥992px | 970px | 30px |
| col-lg-* | 大屏幕、大桌面显示器 | ≥1200px | 1170px | 30px |
栅格系统
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<!-- 栅格系统 -->
<div class="row">
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8" style="border:1px solid red;height:50px;">.col-md-8</div>
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6" style="border:1px solid red;height:50px;">.col-md-6</div>
<div class="col-md-6" style="border:1px solid red;height:50px;">.col-md-6</div>
</div>
<div class="row">
<!-- 列偏移，向右偏移4列 -->
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
<div class="col-md-offset-4 col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4" style="border:1px solid red;height:100px;">.col-md-4</div>
<div class="col-md-8" style="border:1px solid red;height:100px;">
.col-md-8
<div class="row">
<div class="col-md-6" style="border:1px solid black;height:50px;">列嵌套.col-md-6</div>
<div class="col-md-6" style="border:1px solid black;height:50px;">列嵌套.col-md-6</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果如下
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- container：固定宽度 container-fluid：100%宽度 -->
<font class="h1">标题标题标题标题标题标题标题标题</font>
<!-- h1-h6样式重写 -->
<h1 class="text-center">标题标题标题标题标题标题标题标题</h1>
<!-- 文本对齐 -->
<h1 class="text-right">标题标题标题标题标题标题标题标题</h1>
<p>中共中央总书记、国家主席、中央军委主席***视察战略支援部队机关，代表党中央和中央军委，对战略支援部队第一次党代表大会的召开表示热烈的祝贺，向战略支援部队全体指战员致以诚挚的问候。他强调，要以党在新形势下的强军目标为引领，贯彻新形势下军事战略方针，坚持政治建军、改革强军、依法治军，把握部队建设特点和规律，担负历史重任，瞄准世界一流，勇于创新超越，努力建设一支强大的现代化战略支援部队。</p>
<!-- 无符号列表 -->
<ul class="list-unstyled">
<li>ASP</li>
<li>PHP</li>
<li>JSP</li>
</ul>
<!-- 行内块 -->
<ul class="list-inline">
<li>ASP</li>
<li>PHP</li>
<li>JSP</li>
</ul>
<!-- table-striped 隔行换色 -->
<!-- table-hover 鼠标经过变色 -->
<!-- style="background-color:#CCC;padding:50px;" -->
<!-- table-condensed 紧凑的表格 -->
<!-- 行或单元格的背景色：active success info warning danger 只能给tr td添加 -->
<!-- table-responsive 响应式布局，当屏幕宽度小于768px出现滚动条 -->
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<tr>
<td class="active"> </td>
<td class="info"> </td>
<td> </td>
</tr>
<tr class="warning">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="danger">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="success">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<!-- form-inline 内联表单样式（用于form元素），可使元素一行排列 -->
<!-- radio-inline 使一组单选按钮在同一行 -->
<!-- checkbox-inline 使一组复选框排在同一行 -->
<form class="form-inline">
<!-- form-group 表单组，将label和表单元素包含其中，可以更好排列 -->
<div class="form-group">
<!-- sr-only 隐藏元素 -->
<label for="username" class="sr-only">用户名</label>
<!-- form-control 表单元素样式，常用语input textarea select元素 -->
<input type="text" name="" class="form-control" id="username" placeholder="用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" name="" class="form-control" id="password" placeholder="密码">
</div>
</form>
</div>
</body>
</html>
效果图如下
表单栅格系统
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="padding:50px;background-color:#CCC;">
<!-- 表单栅格系统 -->
<div class="container" style="padding:50px;background-color:#FFF;">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-md-2 control-label">用户名</label>
<div class="col-md-10">
<input type="text" name="username" class="form-control" id="username" placeholder="用户名"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-2 control-label">密码</label>
<div class="col-md-10">
<input type="text" name="password" class="form-control" id="password" placeholder="密码"/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">上传图片</label>
<div class="col-md-10">
<input type="file" name=""/>
<p class="help-block">上传图片类型只能是png、jpg、gif</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">兴趣爱好</label>
<div class="col-md-10">
<!--
<div class="checkbox">
-->
<label class="checkbox-inline"><input type="checkbox" name="">篮球</label>
<label class="checkbox-inline"><input type="checkbox" name="">羽毛球</label>
<label class="checkbox-inline"><input type="checkbox" name="">乒乓球</label>
<label class="checkbox-inline"><input type="checkbox" name="">足球</label>
<!--
</div>
-->
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">学历</label>
<div class="col-md-10">
<!-- class="radio" -->
<label class="radio-inline"><input type="radio" name="degree">本科</label>
<label class="radio-inline"><input type="radio" name="degree">硕士</label>
<label class="radio-inline"><input type="radio" name="degree">博士</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">个人简介</label>
<div class="col-md-10">
<textarea rows="5" class="form-control" placeholder="请输入个人简介"></textarea>
</div>
</div>
<!-- 列偏移 -->
<div class="col-md-10 col-md-offset-2">
<button class="btn btn-primary btn-lg disabled">提交</button>
</div>
</form>
</div>
</body>
</html>
效果图如下
图片样式
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">图片样式</h2>
<div>
<!-- img-responsive响应式图片 img-rounded圆角 img-circle圆形 img-thumbnail 带边框 center-block居中对齐 -->
<img src="QQ20160831-0.png" width="400" class="img-responsive img-thumbnail center-block">
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</div>
</body>
效果图如下：
浮动和清除的应用
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">浮动和清除的应用</h2>
<!-- 文本颜色类：text-muted柔和的 text-primary text-success text-info text-warning text-danger -->
<!-- 背景颜色类：bg-primary bg-info bg-warning bg-danger -->
<!-- 三角符号：<span class="caret"></span> -->
<!-- 快速浮动类：pull-left左浮动 pull-right右浮动 -->
<!-- 清除浮动：为父元素添加 clearfix可以清除浮动 -->
<!-- 让内容块网页居中：<div class="center-block"></div> -->
<div class="clearfix bg-warning" style="width:330px;border:1px sold red;">
<ul class="list-unstyled">
<li class="pull-left" style="padding:10px">
<a href="#"><img src="../QQ20160831-2.png" width="142" height="88"></a><br/>
<a href="#">链接文字链接文字</a>
</li>
<li class="pull-left" style="padding:10px">
<a href="#"><img src="../QQ20160831-2.png" width="142" height="88"></a><br/>
<a href="#">链接文字链接文字</a>
</li>
<li class="pull-left" style="padding:10px">
<a href="#"><img src="../QQ20160831-2.png" width="142" height="88"></a><br/>
<a href="#">链接文字链接文字</a>
</li>
<li class="pull-left" style="padding:10px">
<a href="#"><img src="../QQ20160831-2.png" width="142" height="88"></a><br/>
<a href="#">链接文字链接文字</a>
</li>
</ul>
</div>
</div>
</body>
效果图如下：
下拉菜单
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">下拉菜单的应用</h2>
<!-- dropdown将下拉菜单触发器和下拉菜单包含在其中（下来菜单父元素） -->
<div class="dropdown">
<!-- data-toglge：下拉菜单触发器，取值为dropdown -->
<button type="button" class="btn btn-default" data-toggle="dropdown">
编程语言<span class="caret"></span>
</button>
<!-- dropdown-menu给<ul>指定下拉菜单的样式 -->
<!-- dropup 向上弹出的菜单 -->
<!-- 下拉菜单对其方式：dropdown-menu-left dropdown-menu-right -->
<ul class="dropdown-menu">
<li><a href="#">JAVA</a></li>
<li><a href="#">C</a></li>
<li class="divider"></li><!-- 分割线 -->
<li><a href="#">C++</a></li>
<!-- 禁用的菜单项 -->
<li class="disabled"><a href="#">PHP</a></li>
</ul>
</div>
</div>
</body>
效果图如下：
按钮组
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">按钮组的应用</h2>
<!-- 按钮组工具栏，将一组按钮放在同一行 -->
<div class="btn-toolbar">
<!-- btn-group 按钮组，将一组按钮放在同一行 -->
<!-- 按钮组尺寸：btn-group-lg btn-group-sm btn-group-xs -->
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">left</button>
<button type="button" class="btn btn-primary">center</button>
<button type="button" class="btn btn-primary">right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">1</button>
<button type="button" class="btn btn-success">2</button>
<button type="button" class="btn btn-success">3</button>
</div>
<!-- btn-group-vertical按钮组垂直排列 -->
<div class="btn-group btn-group-sm btn-group-vertical">
<button type="button" class="btn btn-warning">top</button>
<button type="button" class="btn btn-warning">middle</button>
<button type="button" class="btn btn-warning">bottom</button>
</div>
</div>
</div>
</body>
效果图如下：
按钮下拉菜单
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">按钮下拉菜单应用</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action1</a></li>
<li><a href="#">Action2</a></li>
<li><a href="#">Action3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Action4</a></li>
<li><a href="#">Action5</a></li>
</ul>
</div>
<h2 class="page-header">分裂式按钮下拉菜单应用</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action1</a></li>
<li><a href="#">Action2</a></li>
<li><a href="#">Action3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Action4</a></li>
<li><a href="#">Action5</a></li>
</ul>
</div>
</div>
</body>
效果图如下：
输入框组&标签页&胶囊式标签页&路径导航
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">输入框组的应用</h2>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">$</span>
<input type="text" name="" class="form-control" placeholder="金额" aria-describedby="basic-addon3">
<span class="input-group-addon" id="basic-addon3">.00</span>
</div>
<h2 class="page-header">标签页应用</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class=""><a href="#">Message</a></li>
<li class=""><a href="#">Profile</a></li>
</ul>
<h2 class="page-header">胶囊式标签页应用</h2>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li class=""><a href="#">Message</a></li>
<li class=""><a href="#">Profile</a></li>
</ul>
<h2 class="page-header">路径导航应用</h2>
<ol class="breadcrumb">
<li class=""><a href="#">Home</a></li>
<li class=""><a href="#">Message</a></li>
<li class="">Profile</li>
</ul>
</div>
</body>
效果图如下：
缩略图
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">缩略图的应用</h2>
<div class="row">
<div class="col-md-4">
<!-- thumbnail赋给<a>标签，可以实现缩略图样式 -->
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<!-- caption缩略图的标题及描述 -->
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
</div>
</div>
</body>
效果图如下：
分页栏
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<div class="row text-center">
<!-- pagination 实现分页效果 -->
<!-- agination-sm小尺寸 agination-lg大尺寸 -->
<ul class="pagination pagination-sm">
<!-- « 上一页 -->
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<!-- active当前页 -->
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<!-- disabled禁用 -->
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<!-- » 下一页 -->
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</body>
效果图如下：
导航栏
<body style="background-color:#EEE;padding-top:70px">
<!-- navbar-default导航栏默认样式，用于nav元素 -->
<!-- container是nav的子元素，导航栏内容放入其中 -->
<!-- navbar-inverse反色导航栏，用于nav元素 -->
<!-- navbar-fixed-top导航栏固定在顶部，用于nav元素,需要设置body为padding-top:70px -->
<!-- navbar-fixed-bottom导航栏固定在底部，用于nav元素,需要设置body为padding-bottom:70px -->
<!-- navbar-static-top导航栏静止在顶部，用于nav元素，会随着滚动条移动而消失 -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<!-- 导航栏 -->
<div class="container">
<!-- 导航栏头部 -->
<!-- navbar-header导航栏头部样式 -->
<div class="navbar-header">
<!-- navbar-brand品牌图标样式 -->
<a href="#" class="navbar-brand">品牌</a>
<!-- navbar-text导航栏普通文本有行距和颜色，用于p元素 -->
<p class="navbar-text">欢迎光临</p>
</div>
<!-- 导航条主链接 -->
<!-- collapse折叠导航栏的样式的基类 -->
<!-- navbar-collapse折叠导航栏样式 -->
<div class="collapse navbar-collapse">
<!-- nav导航栏链接基类 -->
<!-- navbar-nav导航栏链接样式 -->
<ul class="nav navbar-nav navbar-left">
<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>
</ul>
<!-- navbar-form导航栏表单，可以使表单元素排列在同一行 -->
<!-- navbar-right navbar-left组件排列 ,导航栏链接、表单、按钮或文本对齐-->
<form class="navbar-form navbar-right">
<input type="text" name="" class="form-control" placeholder="搜索">
<button type="button" class="btn btn-primary">搜索</button>
</form>
</div>
</div>
</nav>
</body>
效果图如下：
Bootstrap学习笔记的更多相关文章
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
- bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
- bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
- bootstrap 学习笔记
bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...
随机推荐
- [bootstrap]bootstrap2如何引导div垂直居中
参考网址:http://www.4byte.cn/question/138712/bootstrap-how-to-center-vertical.html 部分参考自上面网页中的方法.用过boots ...
- Java基础知识笔记（三：文件与数据流）
一.输入流与输出流 输入流将数据从文件.标准输入或其他外部输入设备中加载到内存.输出流的作用则刚好相反,即将在内存中的数据保存到文件中,或传输给输出设备.输入流在Java语言中对应于抽象类java.i ...
- 关于Composer——好久不动手了。。。
六月第一“血” 看书,发现喜欢从尾开始读起,然后 php经典实例 中,最后一章是PEAR内容,知乎上一查,完,过时了,完全都是Composer,那就学一下吧 一.啥东西 一句话:依赖管理工具: 解释: ...
- MMORPG大型游戏设计与开发（服务器 游戏场景 事件）
今天第星期天,知识是永远是学习不完的,所以今天这部分算比较轻松,同时也希望大家会有一个好的周末.场景事件即场景的回调,和别的事件一样是在特定的条件下产生的,前面也介绍过场景的各种事件,今天详细的说一说 ...
- [C#] 逆袭——自制日刷千题的AC自动机攻克HDU OJ
前言 做过杭电.浙大或是北大等ACM题库的人一定对“刷题”不陌生,以杭电OJ为例:首先打开首页(http://acm.hdu.edu.cn/),然后登陆,接着找到“Online Exercise”下的 ...
- CF733C Epidemic in Monstropolis[模拟 构造 贪心]
C. Epidemic in Monstropolis time limit per test 1 second memory limit per test 256 megabytes input s ...
- Vijos1881闪烁的繁星 [线段树]
P1881闪烁的繁星 背景 繁星闪烁着--深蓝的太空何曾听得见他们对语沉默中微光里他们深深的互相颂赞了 描述 繁星, 漫天的繁星.繁星排成一列, 我数一数呀, 一共有N只小星星呢. 星星们是听话的好 ...
- U3D-页游-检测机制-webplayer-调试方法
前言 页游目前有两个客户端入口: 网页端 (unity webplayer) 游戏微端 (unity standalone) 关于微端的技术,可参考我之前的文章: dotNet开发游戏微端 游戏微端的 ...
- pcl曲面重建模块-贪婪三角形投影算法实例
贪婪三角形投影算法 在pcl-1.8测试 #include <pcl/point_types.h> #include <pcl/io/pcd_io.h> #include &l ...
- Android 图文数据JSON解析，金山词霸每日一句API的调用
金山词霸开发的免费API http://open.iciba.com/dsapi/ 数据格式为 {","name":"\u7535\u5f71\u7ecf\u5 ...