第三篇Bootstrap网格基础
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里，可以是div,内容放置在列内，网页设计中的网格用于布局内容，让网站易于浏览，下面是一个用bootstrap网格布局的例子。
<div> <div>col2</div> <div>col10</div> </div>
显示效果如下:
加了Class=”row”的样式表示行，加了class=”col-sm-2”的样式表示列，系统将整个屏幕分为12份，col-sm-2表示该列跨2份，col-sm-10比表示该列跨10份。显示的效果就会如上图所示，表示一行两列，第一列占2份，第二列占10份。
bootstrap是一个响应式的前端框架，体现在网格系统中就是对应于不同的显示大小的设备,可以呈现出不同的显示效果。如下所示：
<div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-个4</div> </div>
Col-md-8表示在中等屏幕比如普通台式机和笔记本下该列占8份。Col-xs-12表示在小屏幕比如平板电脑下该列占12份。以上代码表示在普通台式机和笔记本下一行两列，第一列占8份，第二列占4份，在平板电脑下一行两列，第一列占12份，第二列占6份。通过此种方式达到在不同的显示设备上展示不同效果。可以通过调整浏览器的大小来模拟一下这两种情况。
下图表示Bootstrap 的网格系统是如何在多种屏幕设备上工作的
以上所述是小编给大家介绍的第三篇Bootstrap网格基础 的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了js canvas实现放大镜查看图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
javascript generator生成器函数与asnyc/await语法糖
本文主要介绍了javascript generator生成器函数与asnyc/await语法糖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题。本文就主要介绍了关于Javascript的命名规范、注释规范以及框架开发的一些问题，需要的朋友可以参考学习。2017-01-01
js导出table数据到excel即导出为EXCEL文档的方法
导出table为EXCEL文档的方法有很多，在本文为大家介绍下js中时如何做到的，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了javascript实现根据身份证号读取相关信息,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JS实现的跨浏览器解析XML文件的方法,结合实例形式分析了javascript基于ActiveXObject操作xml文件的加载与解析相关技巧,需要的朋友可以参考下2016-06-06
小程序rich-text组件如何改变内部img图片样式的方法
这篇文章主要介绍了小程序rich-text组件如何改变内部img图片样式的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
Invalid Host header问题该如何解决的几种方式
Invalid Host header是一个常见的错误信息,通常发生在Web应用程序中,下面这篇文章主要给大家介绍了关于Invalid Host header问题该如何解决的几种方式,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了js正则表达式验证邮件地址，利用javaScript语言实现一下电子邮件地址验证程序，使用的是JavaScript语言的正则表达式库，感兴趣的小伙伴们可以参考一下2015-11-11
在项目开发的过程中，为了减少提高性能，减少请求，开发者往往需要将一些不易改变的数据放入本地缓存中。本文就来用JavaScript手写一个前端存储工具库，希望对大家有所帮助2023-02-02
最新评论