开发者学堂课程【移动 Web 前端开发：Bootstrap- 响应式工具】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8446
Bootstrap-Bootstrap- 响应式工具
内容简介
一、需求
二、实现需求
创建一个新文件，把模板引入
这时有 comtainer 容器，写入：
<header> 头</ header>
<section>内容</section>
<footer>脚k/footer>
简单的页面结构完成。
一、需求：
1.在大屏设备显示头内容 脚
2.在中等屏显示 内容 脚
3.在小屏设备显示 脚
4.在超小屏设备什么都不显示
二、实现需求：
在>里
1.写入：
@media screen and (min-width: 1200px){ }
2.写入：
@media screen and (min-width: 992px) and (max-width: 1200px) { //最大宽度不超过1200
header{
display: none; }
3.写入：
@media screen and (min-width: 768px) and (max-width: 992px) {
header{
display: none;
section{
display: none; }
4.写入：
media screen and (max-width: 768px){
header{
display: none;
section{
display: none;
footer{
display: none; }
刷新，大屏设备都可以看到，中屏显示内容和脚，小屏显示脚，超小屏什么都不显示。
通过这种方式可以控制某些东西显示和隐藏，但很麻烦。
Bootstrap 已经实现了这样的功能，用某一个类就可以代表功能。
这时候用响应式工具类：
比如：头，现在只让它在中等屏幕显示，只需要写一个 visible-md 类：
<header class="visible-md">头</ header>
如果让它超小屏幕也看得见，只需要加上 visible-xs 类。
通过这些类可以很方便的控制在什么屏幕上显示。
Hidden：
头只在大屏显示，其他都要隐藏：
<header class="hidden-md hidden-sm hidden-xs">头</header>
达到了头的需求，是针对性的。
内容要在小屏和超小屏隐藏：
<section class="hidden-xs hidden-sm">内容</section>
脚只需要在超小屏下隐藏：
<footer class="hidden-xs">脚</footer>
用 hidden 来讲解是因为：.visible-xs、.visible-sm、.visible-md和 .visible-lg 类也同时存在。但是从v3.2.0版本开始不再建议使用。除了 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。
hidden-lg 控制某种屏幕下隐藏其他屏幕可见。
