<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<meta name="MobileOptimized" content="320"/>
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate,no-siteapp"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta name="copyright" content="Copyright © nail salon 2015 | All Rights Reserved."/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/styles.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<style>
html { font-size: 16px; }/*root fontsize is 16px,then 1rem is 16px*/
.greenb { border: 1px solid #00dd22; }
.redb { border: 1px solid #ff1111; }
</style>
</head>
<body style="background: #ccc; ">
<div class="container">
<!--Bootstrap HTML编码规范
语法
用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
<!–排列，注意要另起一个row，先写push再写pull。重新排列后原先的内容不受影响
HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
语言属性
根据 HTML5 规范：强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
<html lang="zh-CN">
IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head>
<meta charset="UTF-8">
</head>
JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
Bootstrap CSS编码规范
语法
用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning（position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;）
Box model（ display: block; float: right; width: 100px; height: 100px;）
Typographic（font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center;）
Visual（background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px;）
不要使用 @import
与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：
使用多个 <link> 元素
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
-->
<div class="row">
<div class="col-xs-3 greenb">left</div>
<div class="col-xs-9 redb">right</div>
</div>
<div class="row">
<div class="col-xs-3 greenb col-xs-push-9">left1</div>
<div class="col-xs-9 redb col-xs-pull-3">right1</div>
</div>-->
<!--排版-->
<!--如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本
为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本
<div class="row">
<h1>this li head <small>this is small head</small></h1>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>-->
<!--两个颜色条
<div class="row gap" style="height: 0.3rem; background: #f00;"></div>
<div class="row gap" style=" height: 0.3rem; background: #00f; width: 100%; margin-left: 0; "> </div>-->
<!--Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。-->
<!--<div class="row">
<div class="col-xs-9"><abbr class="initialism" title="text text etxt text text "> text</abbr></div>
</div>
<ul class="list-inline greenb">
<li><b>tesdgfasdgasgafgasgasdg 1</b></li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<div class="col-xs-12">
<dl class="dl-horizontal redb">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
</div>
<p> j jn j j j j j j j j j j j j j</p>
<em>text text text</em>倾斜
<strong>text text </strong>加粗
<i>text text</i>倾斜
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<p>
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行 尝试一下
.dl-horizontal 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中
.pre-scrollable 使 <pre> 元素可滚动 scrollable
</p>-->
<!--代码-->
<!--Bootstrap 允许您以两种方式显示代码：
第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。-->
<!--<p><code><header></code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>-->
<!--<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素（<tr>），用来标识表格列。
<tbody> 表格主体中的表格行的容器元素（<tr>）。
<tr> 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td> 默认的表格单元格。
<th> 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption> 关于表格存储内容的描述或总结。-->
<!--<h2>表格</h2>
<p> .table 为任意表格添加基本样式 (只有横向分隔线):</p>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>-->
<!--<h2>表格</h2>
<p> .table-striped 类在 tbody 内添加斑马线形式的条纹 ( IE8 不支持):</p>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>-->
<!--<h2>表格</h2>
<p> .table-bordered 类为所有表格的单元格添加边框:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>-->
<!--<h2>Table</h2>
<p> .table-hover 类启用表格中 tbody 上的行的悬停效果：</p>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>-->
<!-- 垂直或基本表单
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。-->
<!-- <form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>-->
<!--内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。-->
<!--<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>-->
<!--图片圆角
<div class="row">
<div class="col-xs-6">
<img src="../img/01131_1.jpg" style="border-radius: 50%;">
</div>
<div class="col-xs-6">
<img src="../img/01131_1.jpg" style="border-radius: 0.5rem;">
</div>
</div>
<div style="background: #d43f3a; border-radius: 0.3rem;">
<img src="../img/01131_1.jpg" style="padding: 2px;">
</div>-->
<!-- 原理display: block;max-width: 100%;height: auto;
<div class="container">
<h2>图片</h2>
<p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>
<img src="../img/01131_1.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>-->
</div>
<script type="text/javascript">
</script>
</body>
</html>
