当前位置:主页 > 互联网知识 >

bootstrap响应式设计visible-sm、hidden-xs等的使用

发表日期:2019-07-30 22:31文章编辑:狐灵科技浏览次数: 标签:bootstrap,响应,式,设计,visible-sm,、

启用响应式特性

通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。


  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

注意! Bootstrap在默认情况下是没有引入响应式特性的,因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。

关于响应式Bootstrap

Responsive devices

Media queries允许在一些条件基础上自定义CSS 例如:—ratios、widths、display type, etc— 但通常都是围绕着 min-width 和 max-width 这两者。

  • 修改栅格系统中列的宽度
  • 需要的时候, 用堆叠元素代替浮动
  • 调整标题和文本的大小以便适合各种设备

谨慎的使用media queries,先从你的手机用户开始吧。对于大型的项目, 应该考虑使用专门的代码库, 而不是构筑在media queries之上。

被支持的设备

Bootstrap 所支持的几个media queries都放在了一个文件中, 可以让你的项目更灵活的去适应不同设备和屏幕分辨率。包括:

类型 布局宽度 列宽 间隙宽度
大屏幕 大于等于1200px 70px 30px
默认 大于等于980px 60px 20px
平板 大于等于768px 42px 20px
手机到平板 小于等于767px 流式列,无固定宽度
手机 小于等于480px 流式列,无固定宽度

  1. /* 大屏幕 */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* 平板电脑和小屏电脑之间的分辨率 */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* 横向放置的手机和竖向放置的平板之间的分辨率 */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* 横向放置的手机及分辨率更小的设备 */
  11. @media (max-width: 480px) { ... }

响应式布局辅助class

为了更快的针对移动设备做开发, 下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class可以在 responsive.less 文件中找到。

Class 手机767px 及以下 平板979px 到 768px 电脑默认
.visible-phone 显示
.visible-tablet 显示
.visible-desktop 显示
.hidden-phone 显示 显示
.hidden-tablet 显示 显示
.hidden-desktop 显示 显示

何时使用

在有限的情况下使用, 避免创建同一个站点的不同版本。当这些class能对每种设备的展示做有益的补充的时候才使用。响应式工具不能用于table元素,而且本就不支持。

响应式工具测试案例

调整浏览器的宽度或者在不同的设备上加载该页面用以测试上述的class。

在...上显示

绿色选中标记用以指示这些class在你当前的可视窗口是可见的。

  • 手机
  • 平板
  • 电脑✔ 电脑

在...上隐藏

这里的绿色选中标记用以指示这些class在你当前的可视窗口是隐藏的。

  • 手机✔ 手机
  • 平板✔ 平板
  • 电脑
如没特殊注明,文章均为狐灵科技原创,转载请注明  http://www.hulingweb.cn/hulianwang/546.html
  • 更多 +狐灵业务单元

    营销型网站建设 品牌创意网站 企业官方网站 上市公司网站 B2C电子商务网站 大型门户网站 专题活动网站 定制化电子商务 产品商城网站 移动手机电商网站 微信会员电商

  • 更多 +我们的优势

  • 更多 +关于狐灵

    狐灵致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发, 与其他网站建设及系统开发公司不同,我们的整合解决方案结合了狐灵网络品牌建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供一体化全方位的互联网品牌整合方案!

更多 +联系我们

服务热线:15523356218大客户专线:023-68168040

业务 QQ传真:023-68168040

售后专线15082661954售后QQ:

渠道合作邮箱Foxl@hulingweb.cn

我们的认知

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候,我们已经开始把数字化品牌建设和网络传播进行了整合。只有通过整体的互联网品牌分析,帮助企业家们进行互联网品牌建设,并传播企业品牌,并围绕品牌树立品牌价值,提升企业与用户的互相交流,与用户品牌交互,让用户能找专业的方法去解决问题。传播品牌,激起消费者品牌意识,在这过程中创造价值,这是我们成功的秘诀,也是我们帮助用户成功的诀窍,更是成就一流品牌的一条直达线。

不能否认的是,建设网站,创造互联网品牌价值的过程,是一种在互联网上艺术的行为,但互联网跟涂鸦全然不同,企业的品牌价值并不体现在希望品牌成为某个这种艺术家的作品。互联网传播的对象是用户,用户拥有自己的文化体系,群落共性才是互联网传播根本,这种传播才是互联网创造价值的体现,这种价值的体现呈现多样。空洞的好看没有实质是网站建设的闹剧,网站如果不能激发品牌价值和网络营销和帮助用户,则是网站建设的悲哀,这样的网站没有灵魂!所以,网站建设运营,网络营销必须得得人心,有非常好的用户体验,能够解决问题和需求,能够为梦想者创造和传播品牌价值,最后创造价值,狐灵与你同行!


HI,Are you ready?

  • 公司名称*
  • 邮箱*
  • 姓名*电话*

您需要的服务*

现有网站改版
我需要做微信营销
建设全新的企业网站
要找长期合作公司,需要年度服务
我需要做购物商城
我需要做系统平台
我需要做营销型网站
我需要优化推广

您最关注的地方*

对功能要求比较高
对设计创意要求比较高
需要可以购物支付
搜索引擎排名

预算*

5千以下 1万以下 1-2万 2-3万 3-5万 5-10万 10万以上 大型项目需要招标
验证码 看不清?点击更换 看不清? 点击更换

售前售前
售后售后
留言微信
Top