本文共 1707 字,大约阅读时间需要 5 分钟。
简单的介绍了一下BootStrap
入门介绍,我们知道了BootStrap
框架对于同一套代码在PC端和移动端页面展示能够进行自动适配,从而给予良好的用户体验,这也就是响应式布局。下面看一下具体是如何实现的。
栅格系统 |
而BootStrap
框架能够自动根据设备类型来自动调整页面布局,其依赖的就是栅格系统
。什么是栅格系统
?
栅格系统
的步骤: <table>
(分为.container (固定宽度)
和 .container-fluid (100% 宽度)
)<tr>
。行的定义使用的是row
的样式。BootStrap
的中,有对栅格系统
的详细介绍。从下图中我们可以知道,在栅格系统中分为了4中不同分辨率的设备,没中设备有一个不同的类前缀,这样根据我们项目中对于设备的需求不同而采用不同的类前缀进行定义。 下面我们简单的写一个栅格系统的实现案例。栅格系统案例 |
我们直接在所修改的html
基础模板上面进行修改页面代码。
Bootstrap 101 Template 格子格子格子格子格子格子格子格子格子格子格子格子
启动项目,看到的页面如下图所示:
然后我们拖动页面的边框,将页面缩小之后,发现格子的数量还是12个,但是分为了2行进行展示: 这个案例中,我们使用的是BootStrap
提供一两种容器中的一种container-fluid
,这种容器官方解释就是栅格宽度为100%
,就是栅格会沾满整个屏幕。另外一种容器container
是固定宽度
,从官方文档中我们就可以看出,此种容器的栅格宽度是比屏幕实际宽度要小一点,也就是说栅格在屏幕上会留白。 这里我们可以将代码中的容器由container-fluid
改为container
,然后重启项目查看一下这种容器的效果: 发现屏幕的两边都留白了一部分,这也就是两种容器最主要的区别。
同一套代码,但是却能够根据我们屏幕的分辨率来进行相应的调整适配。这就是我们BootStrap
框架带来的便利-----响应式开发。
转载地址:http://mjhwi.baihongyu.com/