Bootstrap（1）

来源：互联网发布：mac safari缓存文件编辑：程序博客网时间：2024/06/08 14:04

屏幕分辨率(PX)：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。（这里的1像素值得是物理设备的1个像素点）

屏幕像素密度(PPI)：屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

DPI：dots per inch，最初用于衡量打印物上每英寸的点数密度，就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时，就称之为ppi。ppi和dpi是同一个概念，Android比较喜欢使用dpi，iOS比较喜欢使用ppi。

DP、DIP：dp和dip都是Density Independent Pixels的缩写，密度独立像素，可以想象成是一个物理尺寸，使同样的设置在不同手机上显示的效果看起来是一样的。

最明显的就是iPhone 3GS(non Retina,480*320px,163PPI)和iPhone 4(Retina,960*640px,326PPI)的区别。屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。

在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推。

Android和IOS都会通过转换系数让控件适应屏幕的尺寸。一个按钮给了44*44dp的大小，在160dpi密度的时候，按钮就是44*44px大小；在320dpi密度的时候，按钮就是88*88px的大小。不需要我们去书写多套尺寸。

http://www.chinaz.com/web/2015/1110/468774.shtml

1.入门准备

Bootstrap提供了如下重要特性：

1.一套完整基础CSS插件
2.丰富的预定义样式表
3.一组基于jQuery的JS插件集
4.一份灵活的响应式栅格系统，并且崇尚移动先行的思想

1.1 HTML标准模板

meta标签：
提供HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

属性：
charset –将对网页使用的字符集作出声明
http-equiv –是一个编译指令，即，由服务器提供的来指示页面应如何加载
name –把content属性关联到一个名称
content –定义用于翻译 content 属性值的格式

name="viewport" 是优先移动浏览器的显示,手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，窗口可大于或小于手机的可视区域，一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分。一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：```<meta name="viewport" content="width=device-width, initial-scale=1, maximun-scale=1">```width:控制viewport的大小height：控制viewport的高度initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例minimun-scale：允许用户缩放到的最小比例maximun-scale：允许用户缩放到的最大比例user-scalable：用户是否可以手动缩放content里多个属性的设置一定要用分号和空格来隔开，如果不规范则不起作用

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗旨 -->    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Bootstrap 101 Template</title>    <!-- Bootstrap -->    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">  </head>  <body>    <h1>Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!</h1>    <!-- bootstrap是基于jQuery-->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>  </body></html>

0 0