响应式网页

响应式网页设计

根据设备尺寸，自动调整布局，有bootstrap和foundation等

• bootstrap没有自定义标签，主要通过css扩展class
• foundation不兼容旧版本的ie

网格系统

相当于C#UI里面的容器系统

bootstrap网格系统

• col- 针对所有设备
• col-sm- 平板 - 屏幕宽度等于或大于 576px
• col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
• 针对每一行设置，container (固定宽度) 或 container-fluid (全屏宽度)

foundation网格系统

• small (手机端)
• medium (平板设备)
• large (电脑设备：笔记本，台式机)

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">     //兼容多个设备，并排写
      <p>RUNOOB</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>test</p>
    </div>
  </div>
</div>

bootstrap插件

bootstrap3支持字体图标Glyphicons，bootstrap4不支持

nodejs安装bootstrap

npm install bootstrap（使用的时候需要css） npm install jquery npm install popper.js (不要安装popper，要带js的)

安装react-bootstrap（react-bootstrap标签自定义，属性和bootstrap相同）

npm install react-bootstrap