Bootstrap3基础教程 01 概述

移动设备优先是 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 可以在最新的桌面系统和移动端浏览器中很好的工作。

下表为 Bootstrap 支持最新版本的浏览器和平台：

	Chrome	Firefox	IE	Opera	Safari
Android	YES	YES	不适用	不适用	不适用
iOS	YES	不适用	不适用	不适用	YES
Mac OS X	YES	YES	不适用	YES	YES
Windows	YES	YES	YES*	YES	不适用

巴特西

Bootstrap3基础教程 01 概述

响应式图像

Bootstrap 浏览器/设备支持

最新文章

热门文章