栅格布局初探"/>
BootStrap栅格布局初探
说你呢,赶紧长按二维码,然后点击 识别图中二维码任何技术难题可进QQ群提问:【 小崔说编程】
对于提问的原则是: 没有你不能问的,只有我不会答的
说两句
小崔认为,在H5页面设计和制作中,布局是最重要,也是最难的部分。所谓布局就是让每个元素都在设计者希望它在的位置待着,别乱动。
BootStrap在开篇最重要的位置就是介绍其“栅格系统”,我认为确实是很重要的。
官方文档写的最详细,有能力的看那个,小崔写的这个业余了。
当然,对于苦劝不听的,我更欢迎,这里简单聊聊BootStrap的栅格系统。
原理
别管啥布局,在Html+Css中,就两种。
1 表格布局。用table > tr > td标签,最简单,也最恶心,强烈不建议。个人只在偶尔才用这样的布局。比如你做一个表单页面,用表格布局就挺不错的选择。
2 Div+CSS布局。基本现在差不多的网页都是这样布局的。
在布局中,主要是基于块元素和内联元素的特性。
内联元素:这个简单,想复杂也复杂不起来,直接向右排,到了页面最右边就换行。比如文字、图片、超级链接等都是内联元素。这个听起来不错哦?但其实特别难控制。因为~~它很难控制高度和位置,你用如果打算将一个文字、一个图片、一个按钮放在一行,然后还希望它们几个上下位置看起来比较优美,那就费死劲了。所以,这个其实是无法布局的。
块元素之Position定位:position有4种类型,默认的,相对的,绝对的,超级绝对的。
默认(static) 按照本身的特性显示,该独占一行就独占一行,该向右排就向右排。
相对(relative) 这个就有点儿可控制了,可以在默认(static)的位置基础上,相对移动。请一定要注意这个相对是相对什么的 -- 是相对自己本身应该待的位置。
绝对(absolute) 基于上级容器的位置来绝对定位,注意:这个上级容器绝对不允许是默认(static)的
超级绝对(fixed) 这个名字是小崔给它起的,其实也是绝对,只是这个绝对的参照物是整个窗口。
好了,经过上面的描述读者应该有点儿想法了吧?好用啊,就用这个来定位和布局吧。不好,很不好用,因为这样定位后,你的元素的大小位置就要写死了,很难适应不同的终端设备。简单的说就是,你绝对定位在1024宽度的电脑上,在居于左侧500的位置,换成手机上,500的位置就看不到了,跑手机外面了。
浮动布局之float属性:这个好用,块元素采用左右浮动,就很容易布局了。唯一要注意的就是:浮动元素不能再撑开外部的容器了,因此在若干个浮动容器之后,再增加一行清除浮动的div。
如下:
1 | < div style = "clear:both" ></ div > |
BootStrap栅格系统
好了,原理说完了,开始说BootStrap采用的栅格系统了。
万变不离其宗,肯定也是基于以上的若干方式实现的栅格布局。
BootStrap的基本思想就是将常用的页面效果都封装成标准的类名(class),用户随时可以调用了。
在实现栅格布局的时候,BootStrap是这样考虑的 :
1 页面布局容器采用浮动方式。这样元素就从左向右顺序排排队,你需要操心的只是宽度和高度了。
2 先说高度,高度的问题就是自己控制了。BootStrap的栅格布局不管你的高度。
3 再说宽度,BootStrap认为一个页面宽度分成12份就足够细了,你的每个容器在宽度上占用1份还是3份都行啊。
看看下图,总宽度是12份,第一个白色背景的,宽度为3份,第二个蓝色背景的宽度为4份,第三个黄色背景的宽度为3份。
这样,分别用百分比给他们设置宽度就行了。
所以,BootStrap在设置每个容器栅格布局的时候,是强烈推荐采用百分比来设置宽度的。
BootStrap的栅格化类名有如下几种,(说明:**代表1-12的数字,比如col-sm-4):
col-lg-**:对超大屏幕采用的布局,如果你的显示器查过了1200px的宽度,就这个生效。
col-md-**:对中等屏幕的布局。显示器在992px-1200px之间的有效。
col-sm-**:对小屏幕的布局。譬如ipad
col-xs-**:超小屏幕的布局。譬如手机
如果你希望能自动适应多屏幕,那就要综合的使用这些类名。
1 2 3 4 5 6 7 8 9 10 11 | < link rel = "stylesheet" href = ".3.7/css/bootstrap.min.css" crossorigin = "anonymous" > < div class = "col-md-9 col-xs-12" > < div class = "input-group" > < input type = "text" class = "form-control" placeholder = "关键字..." > < span class = "input-group-btn" > < button class = "btn btn-default" type = "button" >搜索模板</ button > </ span > </ div > </ div > |
看看上面的例子,就是在普通电脑显示器上占9/12的宽度,如果在手机上,就占满屏了。
更多推荐
BootStrap栅格布局初探
发布评论