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的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...
随机推荐
- java强引用、软引用、弱引用、虚引用
前言概述 在JDK1.2以前的版本中,当一个对象不被任何变量引用,那么程序就无法再使用这个对象.这就像在日常生活中,从商店购买了某样物品后,如果有用,就一直保留它,否则就把它扔到垃圾箱,由清洁工人收走 ...
- spring security oauth2.0 实现
oauth应该属于security的一部分.关于oauth的的相关知识可以查看阮一峰的文章:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html ...
- Python学习记录day5
title: Python学习记录day5 tags: python author: Chinge Yang date: 2016-11-26 --- 1.多层装饰器 多层装饰器的原理是,装饰器装饰函 ...
- DNS查找域名的过程
当我们在浏览器输入一个url地址时,需要获取到这个url的域名,本篇文章主要介绍了关于DNS查找解析域名的过程的一些东西. 关于DNS 不清楚DNS的小伙伴可以点这里:关于域名系统DNS解析IP地址的 ...
- JavaScript 基础回顾——数组
JavaScript是无类型语言,数组元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同类型.数组的元素设置可以包含其他数组,便于模拟创建多维数组. 1.创建数组 在JavaScript中, ...
- 多个不同的app应用间应该如何进行消息推送呢？
现在很多公司做app应用都会用到推送,推送这个不多说了,怎么做网上一堆,用的比较多的还数极光推送(Jpush)以及百度推送,目前我们使用Jpush,文档方面质量是差了点..这个先不吐槽,主要现在的ap ...
- [bzoj1597][usaco2008 mar]土地购买 (动态规划+斜率优化)
Description 农夫John准备扩大他的农场,他正在考虑N (1 <= N <= 50,000) 块长方形的土地. 每块土地的长宽满足(1 <= 宽 <= 1,000, ...
- ssh远程执行目标机器上的命令
一句话: ssh -t -p 端口号 用户名@远程机器IP '远程机器上的命令完整路径' 例如: ssh -t -p 22 yangjunming@dev '/opt/app/deploy.sh' 注 ...
- 【跟着子迟品 underscore】for ... in 存在的浏览器兼容问题你造吗
Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...
- 序列化效率比拼——谁是最后的赢家Newtonsoft.Json
前言:作为开发人员,对象的序列化恐怕难以避免.楼主也是很早以前就接触过序列化,可是理解都不太深刻,对于用哪种方式去做序列化更是随波逐流——项目中原来用的什么方式照着用就好了.可是这么多年自己对于这东西 ...