首页 / HTML / Bootstrap3之美02-Grid简介和应用_html/css_WEB-ITnose

Bootstrap3之美02-Grid简介和应用_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Bootstrap3之美02-Grid简介和应用_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2711字，纯文字阅读大概需要4分钟。

内容图文

本篇主要包括：

■ Grid简介
■ 应用Grid
■ Multiple Grids

Grid简介

Bootstrap中，把页面分成12等份，这就是所谓的Grid。

在Bootstrap中，用类名控制，这些类型遵循".col-xx-6"类似的形式。

2个6就占满整个页面。所以，类名最后面的数字表示要占几个格子。

又比如，3个4也占满整个页面。

又比如，4个3也占满整个页面。

又比如，6个2也占满整个页面。

另外，类似".col-xx-10 .col-xx-offset-2"这样的类名，offset表示偏移，2表示向右偏移2个单元格。


以上值得注意的是：在倒数第二行，当把".col--xx-3"放在".col-xx-3 .col-xx-offset-2"之后的时候，由于超过了12个单元格的大小，".col--xx-3"会自动跑到下一行的最开头。

应用Grid

id为body的section如何应用Grid呢？
→在index.html中，给id为body的section加上class="container"属性
→给id为main的section加上class="col-md-8"属性
→给id为sidebar的section加上class="col-md-4"属性


如何让header和footer部分也应用Grid呢？
→去掉id为page的div的class="container"属性，变为：


→给header加上class="container"属性，变为：

→给footer加上class="container"属性，变为：


以上，header, body, footer部分都应用了Grid，body的main部分占8个单元格，body的sidebar部分占4个单元格。

so far so good。但是，如果我们把浏览器的宽度缩小到像智能手机屏幕般大小，一些不和谐的方面呈现了出来：

比如，本来一行的标题撑成了2行：

比如，本来可以完整呈现的图片，现在需要滑动水平滚动条才可以窥其全貌：

还比如，原先在右边的部分，被挤到了下方，等等。


如何解决这些问题呢？

Multiple Grids

Multiple Grids的意思是：一个页面元素可以有多个表示单元格大小的类名。不同的页面宽度，启用不同的类。

在Bootstrap 3中，
".col-lg-xx"表示页面宽度>=1200像素。
".col-md-xx"表示页面宽度>=992像素。
".col-sm-xx"表示页面宽度>=768像素。
".col-xs-xx"表示页面宽度<768像素。

我们可以为一个html元素赋予多个类名，区分地表示，在ld情况下占几个单元格，在md情况下占几个单元格,等等。

假设我们需要考虑sm的情况，即面宽度>=768像素的情况。
→在id为main的section中，为class增加col-sm-9
→在id为sidebar的sectioin中，为class增加col-sm-3

现在，把页面宽度调整到大概800像素的大小。

可见，这时候，正如之前设置的，id为main的section占了9个单元格，id为sidebar的sectioin占了3个单元格。


接着，我们再考虑xs的情况，即页面宽度<768像素的情况。
→在id为main的section中，为class增加col-xs-6
→在id为sidebar的sectioin中，为class增加col-xs-6

现在，把页面宽度调整到大概590像素的大小。

可见，这时候，正如之前设置的，id为main的section占了6个单元格，id为sidebar的sectioin占了6个单元格。

但是，当页面宽度<768像素的时候，把左右2边都设置成占6个单元格的做法，不太可能出现在实际项目中，以上这么做只是为了演示。我们还需要把这种情况对应的类名删除。回到如下的状态：


参考资料：WilderMinds

Bootstrap 3之美系类包括:

Bootstrap 3之美01-下载并引入页面

Bootstrap 3之美02-Grid简介和应用

内容总结

以上是互联网集市为您收集整理的Bootstrap3之美02-Grid简介和应用_html/css_WEB-ITnose全部内容，希望文章能够帮你解决Bootstrap3之美02-Grid简介和应用_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/398487.html

来源：【匿名】