Python全栈开发之路【第十九篇】：Bootstrap

一、下载和基本使用

　　官方地址：www.bootcss.com

二、响应式介绍

1.@meida 媒体查询

（1）响应式页面

　　为了页面能够适应不同工具的屏幕大小的限制，而开发的一种自适应页面，即一次开发，处处处显示。

（2）CSS的@media查询

　　使用@media查询，可以针对不同的屏幕大小定义不同的样式。

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

常用的媒体类型(mediaType)

　　all：用于所有的设备。

　　print：用于打印机和打印预览。

　　screen：用于电脑屏幕，平板电脑，智能手机等。

　　speen：应用于屏幕阅读器等发声设备

常用的媒体功能(media feature)

　　max-width：定义输出设备中的页面最大可见区域宽度。

　　min-width：定义输出设备中的页面最小可见区域宽度。

2.写响应式页面的准备工作

（1）设置media标签

用于兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

解释：

　　width = device-width：宽度等于当前设备的宽度。

　　initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）。

　　user-scalable：用户是否可以手动缩放（默认设置为no)。

（2）加载兼容文件js

为了兼容IE8以下的浏览器，需要加载的js文件。

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

（3）设置IE渲染方式认为最高

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

//当文档宽度大于等于 300px 并且小于等于500px （ width >=300 && width <=500）的时候显示的样式

@media screen and (min-300px) and (max-500px) {
    /* CSS 代码 */
}

举例

三、Bootstrap介绍

1.基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet type="text/css"">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Python全栈开发之路 【第十九篇】：Bootstrap