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的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...
随机推荐
- 使用 python 实现 wc 命令程序的基本功能
这里使用了 python 的基本代码实现了 Linux 系统下 wc 命令程序的基本功能. #!/usr/bin/env python #encoding: utf-8 # Author: liwei ...
- Android应用源码基于安卓的个人隐私监控项目
本系统借鉴了现有安全软件的优点,设计了权限访问监控.流量监控.应用程序危险度监控和签名验证四个功能模块,同时针对现有安全软件的不足之处,对系统进行改进,让权限访问.流量监控.危险值等以图形化的方式呈现 ...
- 4412开发板搭建Uboot、Kernel和Android4.0的编译环境方法
本文转自迅为4412开发板实战教程书籍:http://www.topeetboard.com 迅为是基于Ubuntu12.04.2平台做开发,所有的配置和编译脚本也是基于此平台,没有在其它平台上测试过 ...
- Django 1.9 支持中文(转)
昨天Django1.9发布了,今天我才刚开始学习Django,然后有一个问题就卡住了——如何支持中文?上网上查了好多资料都不好使,最后我搜索Django文件夹才发现,在1.9版本里,简体中文代码是zh ...
- es6学习笔记1 --let以及const
let语句的基本用法: 1.let声明的变量为块级作用域,只在最近的{}里面有效,如果在外部引用就会报错. { let a = 10; var b = "hello" } ale ...
- vi快捷键
/** * eclipse内置快捷: * * * 导入包:Ctrl+Shift+O * Ctrl+T 查看一个类的继承关系树,是自顶向下的,再多按一次Ctrl+T, 会换成自底向上的显示结构. 提示: ...
- 第1章 Linux系统简介
第1节 UNIX发展历史和发行版本 1. UNIX与Linux发展史 1.1 UNIX发展历史 (1)1965年,美国麻省理工学院(MIT).通用电气公司(GE)及AT&T的贝尔实验室联合开发 ...
- Oracle数据库
一.数据库表空间和数据文件 解析:一个数据库下可以开N个表空间,一个表空间可以包含N个数据文件.表空间是逻辑概念. 二.关于listener.ora位置 修改该界面上的数据,会影响指定路径的监听配置文 ...
- python高级之函数
python高级之函数 本节内容 函数的介绍 函数的创建 函数参数及返回值 LEGB作用域 特殊函数 函数式编程 1.函数的介绍 为什么要有函数?因为在平时写代码时,如果没有函数的话,那么将会出现很多 ...
- ubuntu 14.04 以root权限启动chrome
chrome版本 51.0.2704.103 How to run google chrome as root in linux - Unix & Linux Stack Exchange提示 ...