移动web第七天---响应式框架

--------媒体查询--------

1.媒体查询语法:

@media (min-width:768px) {
        body {
          background-color: #6cf;
        }
      }

2.媒体查询link语法:通过link标签在不同视口宽度下引入不同的css

    <!-- 视口宽度 >= 992px，引入992.css -->
    <link rel="stylesheet" href="./992.css" media="(min-width:992px)">
    <!-- 视口宽度 >= 1200px，引入1200.css -->
    <link rel="stylesheet" href="./1200.css" media="(min-width:1200px)">

3.写媒体查询时,min-width从小到大书写,max-width从大到小书写

4.通过媒体查询隐藏盒子
在视口小于等于992px时,隐藏lef盒子:

@media (max-width:992px) {
        .left {
          display: none;
        }
      }

--------BootStrap--------

1.引入bootstrap.css

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css" />

2.BootStrap流式布局容器
.container 类:响应式版心容器

<div class="container">
  ...
</div>

.container-fluid 类:通栏类,用于 100% 宽度,占据全部viewport的容器

<div class="container-fluid">
  ...
</div>

.row类自带左右外边距-15px,可以抵消.container 类和.container-fluid 类的自带左右15px内间距
3.栅格系统
一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

超小屏幕手机 (<768px)-------------------类前缀: .col-xs-
小屏幕平板 (≥768px)----------------------类前缀: .col-sm-
中等屏幕桌面显示器 (≥992px)----------类前缀: .col-md-
大屏幕大桌面显示器 (≥1200px)---------类前缀: .col-lg-

4.禁用状态
为基于 <a> 元素创建的按钮添加 .disabled 类

<a href="#" class="disabled">吼吼吼吼吼吼</a>

为多选和单选框添加.disabled 类

<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio disabled">
  <label>
    <input type="radio"  disabled>
    Option three is disabled
  </label>
</div>

为输入框设置 disabled 属性

<input class="" disabled>

为<fieldset>添加 disabled 属性
为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件,但<a> 标签的链接功能不受影响, <fieldset disabled> 内所有的原生的表单控件（<input>、<select> 和 <button> 元素）设置为禁用状态，防止键盘和鼠标与他们交互。然而，如果表单中还包含 <a ... class="btn btn-*"> 元素，这些元素将只被赋予 pointer-events: none 属性

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

为 <button> 元素添加 disabled 属性

<button type="button" disabled>Primary button</button>
<button type="button"  disabled>Button</button>

5.不同屏幕尺寸显示或隐藏页面内容
显示模块:
.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
隐藏模块:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
6.bootstrap交互效果
引入BootStrap样式

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css" />

引入js文件：jQuery.js + BootStrap.min.js

<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

7.定制bootstrap
导航菜单 → 定制
输入目标变量值
编译并下载，使用定制后的框架