<!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; 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; 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- 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>