响应式网页bootstrap

2022-05-06 15:24:38 浏览数 (1)

响应式网页设计

根据设备尺寸，自动调整布局，有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 (电脑设备：笔记本，台式机)
代码语言：javascript复制
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
代码语言：javascript复制
<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视口大小估计

媒体类型

描述

all

用于所有多媒体类型设备

print

用于打印机

screen

用于电脑屏幕，平板，智能手机等。

speech

用于屏幕阅读器

移动端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示例

代码语言：javascript复制
<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

css npm jquery react https

0 人点赞