专栏首页sofu456响应式网页

响应式网页

响应式网页设计

根据设备尺寸,自动调整布局,有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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • canvas动画

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    sofu456
  • opencv

    http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/tutorials.html

    sofu456
  • 软件搬家

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    sofu456
  • css中div垂直居中的方法。

    多谢@alexxxcs1提供的另一种方式(不晓得这样能否@到^_^),嘛其实网上实现居中的方式确实很多,互相探讨加深印象。

    前端博客 : alili.tech
  • kafka streams的join实例

    这里使用的是inner join,也有left join,也有outer join。如果要记录在时间窗口没有匹配上的记录,可以使用outer join,额外存储...

    codecraft
  • Python property属性 - 将方法转化为变量的故事

    为什么需要m和n的数字,首先需要知道例如mysql的分页查询的sql:select * from table_name limit m,n

    Devops海洋的渔夫
  • linux下安装rzsz

    wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz

    流柯
  • VMworld 2015:VMware CEO表示人工智能将降临IT界

    VMware CEO Pat Gelsinger在周二的VMworld大会上表示,随着业务日益数字化、移动化和云计算化,我们经营企业的方式也应该发生改变,人工智...

    SDNLAB
  • 第二十六章:SpringBoot使用@Scheduled创建定时任务

    恒宇少年
  • Party hdu 6521

    题意:给一组边,i 到 j,要求 i 到 i+1到 j 每个点有边,i 从 i 到 j-1。 

    用户2965768

扫码关注云+社区

领取腾讯云代金券