标签：block char 布局 ade max 一起 user 加载 header
移动设备优先是 Bootstrap 3 的最显著的变化。
基础的页面：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告诉IE浏览器用最新的引擎--> <meta name="viewport" content="width=device-width, initial-scale=1"><!--响应式布局--> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /><!--bootstrap样式--> <title></title> </head> <body> <div class="container"> <h1 class="page-header">主体</h1> <p>Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> </div> <script src="Script/jquery-1.8.3.js"></script><!--Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边--> <script src="bootstrap/js/bootstrap.min.js"></script><!--Bootstrap 的所有 JavaScript 插件--> </body> </html>
viewport meta 标签堆移动设备友好~
*width=device-width 确保网站能够正确呈现在不同设备上。
*initial-scale=1 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放.
*maximum-scale=1.0 与 user-scalable=no 一起使用，禁用缩放功能后，用户只能滚动屏幕
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<img src="..." class="img-responsive" alt="响应式图像">
css代码：
.img-responsive { display: block; height: auto; max-width: 100%; }
* .img-responsive 类的图片水平居中，请使用 .center-block 类
媒体查询 （基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。）
@media (min-width: 768px) { .container { width: 750px; }
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。
下表为 Bootstrap 支持最新版本的浏览器和平台：
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | 不适用 | 不适用 | 不适用 |
| iOS | YES | 不适用 | 不适用 | 不适用 | YES |
| Mac OS X | YES | YES | 不适用 | YES | YES |
| Windows | YES | YES | YES* | YES | 不适用 |
标签：block char 布局 ade max 一起 user 加载 header
原文地址：https://www.cnblogs.com/youguess/p/9083163.html
