其实理解栅栏模式之后,自适应功能就简单很多了,根据浏览器的大小,Boostrap有四种栅栏类名提供使用,用法与Css样式表类名选择器样式调用是一样的:

xs:col-xs-1 ~ col-xs-12,多列始终在一行内。
sm:col-sm-1 ~ col-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。
md:col-md-1 ~ col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。
lg:col-lg-1 ~ col-lg-12,多列在浏览器像素宽度大于等于1200px时才在一行内。
我贴一段伪代码:
<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>
    <div class="col-sm-4  col-md-10"></div>
</div>
这段的意思是当浏览器的宽度在768——992之间时,采取4:4:4的模式呈现,当浏览器宽度大于992时,就按1:1:10的模式呈现。当然你也可以四种都是用,细分的在仔细点,不管怎么样,Boostrap会根据浏览器的宽度自动分配列宽度,从而匹配你所想要的呈现模式。至于它怎么做到的,你不用关心,你只需要考虑你在手机上的网页呈现样式,或者PC上的呈现样式的设计就行了,接下来,就交给Boostrap吧。

Boostrap的自适应功能的更多相关文章

  1. 浅谈Bootstrap自适应功能在Web开发中的应用

    随着移动端市场的强势崛起,web的开发也变得愈发复杂,对于个体开发者来说,自己开发的网站,在电脑.手机.Pad等上面都要有正常的显示以及良好的用户体验.如果每次都要自己去调整网页去匹配各个不同的客户端 ...

  2. 【DevExpress v17.2新功能预告】DevExpress ASP.NET Scheduler新的自适应功能

    自适应Web设计可以帮助您解决各种尺寸的屏幕问题,网站的自适应网页设计可帮助您解决用户使用不同大小屏幕显示数据的问题. 在v17.2中,我们最大化了ASP.NET Scheduler的视图和可视化元素 ...

  3. Dubbo SPI机制之三Adaptive自适应功能

    JDK标准中SPI机制的一个问题就是其一次性实例化扩展点所有实现,如果有扩展实现初始化很耗时,但如果没用上也加载,会很浪费资源:扩展点加载失败,其他扩展点都用不了了.Dubbo是如何解决该问题动态的选 ...

  4. intouch 趋势图Y轴自适应功能完善

    在项目中有利用到历史趋势,其y轴往往展示的是该点的最小/最大值范围,对于曲线波动展示不够友好.故而利用自带方法进行完善,以此记录. Histrend1.MinRange=HTGetAutoScaleV ...

  5. 为Form中的控件增加自适应功能 转

    创建一个基于Custom的类resizeable,并新建属性和方法程序,其说明如下: a) 新建属性: posiTyperList 可调整位置的控件类型列表sizeTypeList 可调整大小的控件类 ...

  6. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

  7. 【原】现有市场上H264 IPCamerad的功能

    网络: 1.内置Web Server,通过IE实现远程监看.控制.设置等操作: 2.支持UPnP路由器,自动配置端口映射: 3.支持DDNS(动态域名解析).PPPoE拨号.DHCP网络协议: 4.支 ...

  8. 从好用到更好用 —— 2017 年又拍云 CDN 功能更新回顾

    又拍云一直致力于为客户带来更好的服务,在 2017 年又拍云 CDN 服务进行了数次重大更新,在功能上更加全面.完善,进一步提升了 CDN 的稳定性与安全性. 在过去一年里又拍云 CDN 服务共进行了 ...

  9. Winfon 页签切换及窗体控件自适应

    由于公司的业务调整,最近不仅开发bs,还有不熟悉的cs,人手也不足,项目还多,对于cs来说,算是小白,虽然是一个人,也是硬着头皮写,拖拽控件,自定义控件.一个项目下来,对cs有了很深的认识,这里好好感 ...

随机推荐

  1. PAT刷题记录

    1. 1007 素数对猜想 :运行超时 算法问题还是语言本身效率低下? import math def is_prime(num): if num == 2: return num temp = in ...

  2. Hive进阶_Hive数据查询

    简单查询和fetch task 简单查询:   简单查询的 fetch task 功能,从HDFS拉取,不用map reduce. 前两种配置,当前session有效.修改hive-site.xml永 ...

  3. 网页抓取解析,使用JQuery选择器进行网页解析

    最近开发一个小功能,数据库中一个基础表的数据从另一个网站采集. 因为网站的数据不定时更新,需要更新后自动采集最新的内容. 怎么判断更新数据没有? 好在网站有一个更新日志提示的地方,只需要对比本地保留的 ...

  4. 为什么数据库ID不能作为URL中的标识符

    最近公司在进行网站的SEO优化,将所有主要页面的URL统一更改为新的格式,其中重要的一项改变是将所有URL的标识符统一为ID,例如过去我们的一个用户的公共页面URL是这样的 https://www.e ...

  5. dynomite:高可用多数据中心同步

    https://github.com/Netflix/dynomite Dynomite, inspired by Dynamo whitepaper, is a thin, distributed ...

  6. vue.js数据绑定语法

    原始高清大图下载 1.数据绑定 html代码: <div id="first" class="first">msg:{{msg}}</div& ...

  7. JS的使用

    Javascript代码在浏览器中运行,做出更流畅.优美的页面效果,增强用户体验与java是完全不同的东西,只是名称类似而已写在<script></script>标签中 大小写 ...

  8. vue学习之路之需要了解的知识汇总

    一.vue是什么? 相关网页:  https://vuejs.bootcss.com/v2/guide/       及菜鸟教程       https://www.runoob.com/vue2/v ...

  9. AngularJS(三):重复HTML元素、数据绑定

    本文也同步发表在我的公众号“我的天空” 重复HTML元素 在前端的页面编写中,我们会经常遇到重复HTML元素,譬如绘制表格.菜单等,如以下代码显示一个简单的li列表: <body>    ...

  10. zblog去除底部版权信息 “请勿修改或删除主题版权及作者信息”

    场景:使用了免费模板,但底部带作者版权.删除版权信息的代码后访问前台弹窗:请勿修改或删除主题版权及作者信息... 1. 删除版权信息代码 使用notepad++搜索功能,搜索版权信息:如ABC,找到相 ...