一、下载和基本使用

  官方地址: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的更多相关文章

  1. Python全栈开发之路 【第七篇】:面向对象编程设计与开发(1)

    本节内容 一.编程范式 编程指的是写程序.敲代码,就是指程序员用特定的语法.数据结构和算法编写的代码,目的是来告诉计算机如何执行任务的. 在编程的世界里最常见的两大流派是:面向过程与面向对象.“功夫的 ...

  2. Python全栈开发之路 【第四篇】:Python基础之函数

    本节内容 函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...

  3. Python全栈开发之路 【第六篇】:Python基础之常用模块

    本节内容 模块分类: 好处: 标准库: help("modules") 查看所有python自带模块列表 第三方开源模块: 自定义模块: 模块调用: import module f ...

  4. Python全栈开发之路 【第八篇】:面向对象编程设计与开发(2)

    一.继承与派生 什么是继承? 继承指的是类与类之间的关系,是一种什么是什么的关系,继承的功能之一就是用来解决代码重用问题. 继承是一种创建新的类的方式,在python中,新建的类可以继承一个或多个父类 ...

  5. Python全栈开发之路 【第三篇】:Python基础之字符编码和文件操作

    本节内容 一.三元运算 三元运算又称三目运算,是对简单的条件语句的简写,如: 简单条件语句: if 条件成立: val = 1 else: val = 2 改成三元运算: val = 1 if 条件成 ...

  6. Python全栈开发之路 【第五篇】:Python基础之函数进阶(装饰器、生成器&迭代器)

    本节内容 一.名称空间 又名name space,就是存放名字的地方.举例说明,若变量x=1,1存放于内存中,那名字x存放在哪里呢?名称空间正是存放名字x与1绑定关系的地方. 名称空间共3种,分别如下 ...

  7. Python全栈开发之路 【第十七篇】:jQuery的位置属性、事件及案例

    位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. python 全栈开发之路 day1

    python 全栈开发之路 day1   本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...

  9. Python全栈开发之路 【第一篇】:Python 介绍

    本节内容 一.Python介绍 python的创始人为荷兰人——吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本 ...

随机推荐

  1. 使用GDB调试gp(转载)

    使用 gdb 调试 postgres greenplum zalax3030人评论715人阅读2012-07-11 10:07:15   错误信息的获取途径有几种 :  1. 最简单的就是看Postg ...

  2. 使用SQL Developer生成Oracle数据库的关系模型(ER图)

    客户要一张数据库的关系模型图,于是用SQL Developer来做. 一.SQL Developer版本 我在官网下载的最新版本(现在已经到了18.1,Oracle更新的太勤快): 2.如下图所示选择 ...

  3. powershell脚本之windows服务与进程

    powershell脚本之windows服务与进程 服务与进程的区别: Windows服务是指系统自动完成的,不需要和用户交互的过程,可长时间运行的可执行应用程序 进程是程序运行的实例,系统会给运行中 ...

  4. Vue学习之路3-浅析Vue-cli搭建项目后的目录结构

    1.前言 Vue并不限制你的代码结构.但是,它规定了一些需要遵守的规则:1.应用层级的状态应该集中到单个store对象中.2.提交mutation是更改状态的唯一方法,并且这个过程是同步的.3.异步逻 ...

  5. 12.scrapy框架之递归解析和post请求

    今日概要 递归爬取解析多页页面数据 scrapy核心组件工作流程 scrapy的post请求发送 今日详情 1.递归爬取解析多页页面数据 - 需求:将糗事百科所有页码的作者和段子内容数据进行爬取切持久 ...

  6. 【Linux基础】history查看历史命令

    1.history命令 “history”命令就是历史记录.它显示了在终端中所执行过的所有命令的历史. history //显示终端执行过的命令 history //显示最近10条终端执行过的命令 C ...

  7. 更高的压缩比,更好的性能–使用ORC文件格式优化Hive

    http://lxw1234.com/archives/2016/04/630.htm 关键字:orc.index.hive Hive从0.11版本开始提供了ORC的文件格式,ORC文件不仅仅是一种列 ...

  8. spark基础知识

    1.Spark是什么? UCBerkeley AMPlab所开源的类HadoopMapReduce的通用的并行计算框架. dfsSpark基于mapreduce算法实现的分布式计算,拥有HadoopM ...

  9. java的回调

    java的回调 1,明确什么是回调方法 2,采用接口来实现回调 java同步回调 一个类实现了接口,将他传递给另一个类,在另一个类调用接口中方法 public class Bar implements ...

  10. UVA1646-Edge Case(递推+斐波那契数列)

    Problem UVA1646-Edge Case Time Limit: 3000 mSec Problem Description Input For each test case, you ge ...