响应式网页bootstrap

响应式网页设计

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

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

网格系统

相当于C#UI里面的容器系统，bootstrap对css进行扩展，使用了类似less文件中的变量定义，sacc不仅增加了变量还多了继承、混合、嵌套等功能

布局中必须row包含col，不能单独col

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再html的display css属性上封装了三种布局方式，使用控件嵌套方式布局，设置宽度最大值和最小值 .container, which sets a max-width at each responsive breakpoint .container-fluid, which is width: 100% at all breakpoints .container-{breakpoint}, which is width: 100% until the specified breakpoint

bootstrap插件

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

nodejs安装bootstrap

安装bootstrap4

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

安装bootstrap3

npm install bootstrap@3（使用的时候需要css） npm install jquery(node导入jquery） import from ‘jquery’ window. = window.jQuery = //jquery设置window变量，window变量可以delete 或者修改node_modules/react-scripts/config/webpack.config.js设置，scripts文件夹下react-script执行的进程文件

参考：https://www.cnblogs.com/zaifeng0108/p/7268260.html

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

npm install react-bootstrap

css多媒体

@media=“mediatype and|not|only (expressions)”

• orientation : landscape| portrait 横屏、竖屏
• min-width、max-width视口大小估计

移动端viewport自适应

< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

html全屏，position：fixed

classname

bootstrap类名，一个字母属性简写，"-"后是取值

• d-inline，display
• m-0，margin
• p-0，pading
• bg-dark，背景色，bootstrap的背景色和css不同，使用red等颜色，bootstrap不会接受的

primary 深蓝 secondary 灰 success 绿 warning 黄 danger 红 info 浅蓝 dark 黑 white 白 light 亮白

formgroup示例

<FormGroup row>
   <Label className="col-2">用户名</Label>
   <Input className="col-6"></Input>
</FormGroup>

参考：https://blog.csdn.net/weixin_39987434/article/details/97111457 https://blog.csdn.net/qq_32719215/article/details/99082629