标签：bootstrap 样式 http 图片 demo 包括 lib web ice
@(目录)
让我们的 Web 开发更简单，更快捷；
减轻维护成本（统一了代码风格）
目录结构
|——css // 自己定义的css文件
|——js // 自己写的js文件
|——font // 自己制作的字体文件
|——img // 项目中用到的图片目录
|——lib // 引入的第三方代码
index.html // 入口文件
css
除了公共级别样式，其余样式全部加上作用域。避免出现样式冲突的问题。
尽量使用 直接子代选择器， 少用间接子代 避免错杀。
我们约定所有的分割线使用下边框的方式实现。
<!DOCTYPE html>
<!-- 指定了我们的页面语言 -->
<html lang="zh-CN">
<head>
<!-- 界面的字符编码 -->
<meta charset="utf-8">
<!-- 指定了IE的编译版本，edge用最新的ie解释器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 在移动端开发中，当界面宽度大于设备容器，会生成一个虚拟的容器，这个容器就是视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>demo</title>
<!--图标-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap -->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!-- 条件注释 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="lib/jquery/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
</body>
</html><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。注意row需要放在一个版心中。
通过浮动实现的。row会进行浮动的清除。
缺点：
缺乏复用性
[class*=" icon-"]选择 class 属性值包含 " icon-" 的元素
data-
使用 data-* 属性来嵌入自定义数据：
data-如何取值？
不足
自已创作图标字体费时费力，后期维护成本偏高。
图表字体只能被渲染为单色的，或者CSS3的渐变色。
简单理解：所谓的雪碧图是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分;简单说就是在一整张图片中分割出自己想要的部分，也可理解为图片截取显示（坐标的移动)
不足
维护麻烦，如果修改其中的一张图，你需要修改整张图。
高清失真，为了适应不同的分辨率，可能要准备多个规格的图片。
滚动条
子元素宽度/高度超过父元素宽度/高度，并且父元素设置overflow:scroll的时候出现滚动条。
注意检查我们的条件。
为什么这么设计？
对通用的样式进行封装，同时对不同的主题增加一些拓展的样式。可以让我们的样式设计更加灵活，减少我们的维护成本。设计的时候注意降低耦合度，保证我们样式的独立性
css计算宽度的方法
使用calc()函数，注意两个参数与符号之间存在空格
触摸开始事件
触摸移动事件
触摸结束事件
vw、vh、vmin、vmax 的含义
vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
vw、vh 与 % 百分比的区别
% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
移动设备
Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月*）
标签：bootstrap 样式 http 图片 demo 包括 lib web ice
原文地址：https://www.cnblogs.com/iamzhiyudong/p/11454962.html
