技术帮
 

BootStrap栅格布局初探

本网站内容基本都是原创作品,未得到作者同意也欢迎转载
转载请注明出处:技术帮
说你呢,赶紧长按二维码,然后点击识别图中二维码

任何技术难题可进QQ群提问:【小崔说编程
对于提问的原则是:没有你不能问的,只有我不会答的

1472955908895017376.png说两句


小崔认为,在H5页面设计和制作中,布局是最重要,也是最难的部分。所谓布局就是让每个元素都在设计者希望它在的位置待着,别乱动。

BootStrap在开篇最重要的位置就是介绍其“栅格系统”,我认为确实是很重要的。

官方文档写的最详细,有能力的看那个,小崔写的这个业余了。https://v3.bootcss.com/css/#grid

当然,对于苦劝不听的,我更欢迎,这里简单聊聊BootStrap的栅格系统。

1472955908895017376.png原理


别管啥布局,在Html+Css中,就两种

1 表格布局。用table > tr > td标签,最简单,也最恶心,强烈不建议。个人只在偶尔才用这样的布局。比如你做一个表单页面,用表格布局就挺不错的选择。

2 Div+CSS布局。基本现在差不多的网页都是这样布局的。

在布局中,主要是基于块元素和内联元素的特性。

内联元素:这个简单,想复杂也复杂不起来,直接向右排,到了页面最右边就换行。比如文字、图片、超级链接等都是内联元素。这个听起来不错哦?但其实特别难控制。因为~~它很难控制高度和位置,你用如果打算将一个文字、一个图片、一个按钮放在一行,然后还希望它们几个上下位置看起来比较优美,那就费死劲了。所以,这个其实是无法布局的。

块元素之Position定位:position有4种类型,默认的,相对的,绝对的,超级绝对的。

  默认(static) 按照本身的特性显示,该独占一行就独占一行,该向右排就向右排。

  相对(relative) 这个就有点儿可控制了,可以在默认(static)的位置基础上,相对移动。请一定要注意这个相对是相对什么的 -- 是相对自己本身应该待的位置

  绝对(absolute) 基于上级容器的位置来绝对定位,注意:这个上级容器绝对不允许是默认(static)的

  超级绝对(fixed) 这个名字是小崔给它起的,其实也是绝对,只是这个绝对的参照物是整个窗口

好了,经过上面的描述读者应该有点儿想法了吧?好用啊,就用这个来定位和布局吧。不好,很不好用,因为这样定位后,你的元素的大小位置就要写死了,很难适应不同的终端设备。简单的说就是,你绝对定位在1024宽度的电脑上,在居于左侧500的位置,换成手机上,500的位置就看不到了,跑手机外面了。

浮动布局之float属性:这个好用,块元素采用左右浮动,就很容易布局了。唯一要注意的就是:浮动元素不能再撑开外部的容器了,因此在若干个浮动容器之后,再增加一行清除浮动的div。

如下:

<div style="clear:both"></div>

1472955908895017376.pngBootStrap栅格系统


好了,原理说完了,开始说BootStrap采用的栅格系统了。

万变不离其宗,肯定也是基于以上的若干方式实现的栅格布局。

BootStrap的基本思想就是将常用的页面效果都封装成标准的类名(class),用户随时可以调用了。

在实现栅格布局的时候,BootStrap是这样考虑的

1 页面布局容器采用浮动方式。这样元素就从左向右顺序排排队,你需要操心的只是宽度和高度了。

2 先说高度,高度的问题就是自己控制了。BootStrap的栅格布局不管你的高度。

3 再说宽度,BootStrap认为一个页面宽度分成12份就足够细了,你的每个容器在宽度上占用1份还是3份都行啊。

看看下图,总宽度是12份,第一个白色背景的,宽度为3份,第二个蓝色背景的宽度为4份,第三个黄色背景的宽度为3份。

image.png

这样,分别用百分比给他们设置宽度就行了。

所以,BootStrap在设置每个容器栅格布局的时候,是强烈推荐采用百分比来设置宽度的


BootStrap的栅格化类名有如下几种,(说明:**代表1-12的数字,比如col-sm-4):

col-lg-**:对超大屏幕采用的布局,如果你的显示器查过了1200px的宽度,就这个生效。

col-md-**:对中等屏幕的布局。显示器在992px-1200px之间的有效。

col-sm-**:对小屏幕的布局。譬如ipad

col-xs-**:超小屏幕的布局。譬如手机


如果你希望能自动适应多屏幕,那就要综合的使用这些类名。

<link rel="stylesheet" 
href="https://cdn.bootcss.com/bootstrap/3.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的宽度,如果在手机上,就占满屏了。