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-width:300px) and (max-width: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>

全局css样式、组件、插件等见官网。。。

Python全栈开发之路【第十九篇】：Bootstrap的更多相关文章

Python全栈开发之路【第七篇】：面向对象编程设计与开发（1）
本节内容一.编程范式编程指的是写程序.敲代码,就是指程序员用特定的语法.数据结构和算法编写的代码,目的是来告诉计算机如何执行任务的. 在编程的世界里最常见的两大流派是:面向过程与面向对象.“功夫的 ...
Python全栈开发之路【第四篇】：Python基础之函数
本节内容函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...
Python全栈开发之路【第六篇】：Python基础之常用模块
本节内容模块分类: 好处: 标准库: help("modules") 查看所有python自带模块列表第三方开源模块: 自定义模块: 模块调用: import module f ...
Python全栈开发之路【第八篇】：面向对象编程设计与开发（2）
一.继承与派生什么是继承? 继承指的是类与类之间的关系,是一种什么是什么的关系,继承的功能之一就是用来解决代码重用问题. 继承是一种创建新的类的方式,在python中,新建的类可以继承一个或多个父类 ...
Python全栈开发之路【第三篇】：Python基础之字符编码和文件操作
本节内容一.三元运算三元运算又称三目运算,是对简单的条件语句的简写,如: 简单条件语句: if 条件成立: val = 1 else: val = 2 改成三元运算: val = 1 if 条件成 ...
Python全栈开发之路【第五篇】：Python基础之函数进阶(装饰器、生成器&迭代器)
本节内容一.名称空间又名name space,就是存放名字的地方.举例说明,若变量x=1,1存放于内存中,那名字x存放在哪里呢?名称空间正是存放名字x与1绑定关系的地方. 名称空间共3种,分别如下 ...
Python全栈开发之路【第十七篇】：jQuery的位置属性、事件及案例
位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容计算机发展介绍计算机硬件组成计算机基本原理计算机计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...
Python全栈开发之路【第一篇】：Python 介绍
本节内容一.Python介绍 python的创始人为荷兰人——吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本 ...

随机推荐

[20190324]奇怪的GV$FILESPACE_USAGE视图.txt
[20190324]奇怪的GV$FILESPACE_USAGE视图.txt--//发现GV$FILESPACE_USAGE定义很奇怪,做一个记录.1.环境:SCOTT@book> @ ver1P ...
Android Studio插件GsonFormat
GsonFormat插件用于在androidStudio 根据json自动生成class的字段和方法,极大提高了开发效率一.安装GsonFormat插件二.重启Android Studio,新建一 ...
LeetCode算法题-Move Zeroes（Java实现-三种解法）
这是悦乐书的第201次更新,第211篇原创 01 看题和准备今天介绍的是LeetCode算法题中Easy级别的第67题(顺位题号是283).给定一个数组nums,写一个函数将所有0移动到它的末尾,同 ...
LeetCode算法题-Excel Sheet Column Number（Java实现）
这是悦乐书的第182次更新,第184篇原创 01 看题和准备今天介绍的是LeetCode算法题中Easy级别的第41题(顺位题号是171).给定Excel工作表中显示的列标题,返回其对应的列号.例如 ...
文件下载中使用inputStream流获取文件大小
inputStream.available()获取的是文件的字节大小 InputStream inputStream = new FileInputStream(new File(path)); re ...
一台电脑安装两个JDK
起因:由于嫌自己电脑东西太乱,在上个学期重新格式化整理了一下.下载的jdk也为当时最新的10版本,上次在买jsp的虚拟主机时候也遇到了这个问题,对方提供的jdk只有7版本的,我是10版本的,所以当时打 ...
《Java大学教程》—第4章方法的实现
4.2~3 声明.实现.调用4.4 数据传递:实参.形参.返回值4.6 变量作用域:局部变量(区域内访问).全局变量4.7 重载:运算符重载.方法重载-->多态 1.答:P67方法(method ...
比MR至少快5倍的神器，竟然是它
Hive简介 Hive是一个基于 Hadoop 的开源数据仓库工具,用于存储和处理海量结构化数据.它最初是应Facebook对每天产生的海量新兴社会网络数据进行管理和机器学习的需求而产生和发展的,Hi ...
「APIO2017」商旅
「APIO2017」商旅题目描述在广阔的澳大利亚内陆地区长途跋涉后,你孤身一人带着一个背包来到了科巴.你被这个城市发达而美丽的市场所深深吸引,决定定居于此,做一个商人.科巴有 $N$ 个集市, ...
2883 -- 【TJOI2018】游园会
Description 小豆参加了$NOI$的游园会,会场上每完成一个项目就会获得一个奖章,奖章只会是$N,O,I$的字样.在会场.上他收集到了$K$个奖章组成的串.兑奖规则是奖章串和兑奖 ...

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