一、下载和基本使用

　　官方地址：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. mac 全角/半角标点符号切换

    快捷键:option+shift+H 背景是这样的,前段时间sublimeText新装了HTML/CSS/JS Prittify,JS代码格式化的快捷键是:command+shift+H. 记性有点差 ...

  2. 洗礼灵魂，修炼python（70）--爬虫篇—补充知识：json模块

    在前面的某一篇中,说完了pickle,但我相信好多朋友都不懂到底有什么用,那么到了爬虫篇,它就大有用处了,而和pickle很相似的就是JSON模块 JSON 1.简介 1)JSON(JavaScrip ...

  3. Error in Log_event::read_log_event(): 'Event too small', data_len: 0, event_type: 0

    MySQL主从复制报错如下: 2018-04-11 09:11:16 2400 [Note] Slave SQL thread initialized, starting replication in ...

  4. May 23. 2018 Week 21st Wednesday

    You should love and take care of yourself because after all, it is your own life. 要学会爱自己,照顾自己,毕竟生活是你 ...

  5. @ResponseBody注解和@RequestBody注解

    @ResponseBody:表示该方法的返回结果直接写入HTTP response body中一般在异步获取数据时使用, 在使用@RequestMapping后,返回值通常解析为跳转路径,加上@Res ...

  6. Java Native Interface（JNI）

    JNI能让Java代码在Java虚拟机里调用其他编程语言(例如C.C++)写的应用或库,且不会影响任何Java虚拟机的实现. 什么时候用JNI? 1.应用程序所需的平台相关功能,标准的Java类库不支 ...

  7. 【ctags/cscope/project安装使用】给神编辑器vim添加新的翅膀

    本文地址 分享提纲: 1.安装 2.使用cscope 3.使用project 1.安装 1.1)linux(yum下安装) yum -y install cscope 1.2)linux(unbunt ...

  8. grep正则表达式搜索

    grep -n -e "INT32 *AdaptorPrmOp" --include "*.c"  -r ./ 搜索函数的定义 中间有n个空格

  9. （转）Spring Boot (十四)： Spring Boot 整合 Shiro-登录认证和权限管理

    http://www.ityouknow.com/springboot/2017/06/26/spring-boot-shiro.html 这篇文章我们来学习如何使用 Spring Boot 集成 A ...

  10. Django-rest-framework 接口实现 认证:(auth | authentication)

    认证:(auth | authentication) REST framework提供了一些开箱即用的身份验证方案,并且还允许你实现自定义方案. 在 rest_framework.authentica ...