本篇主要包括:html
■ 添加独立的一行
■ 文字环绕
■ 图片自适应
■ 隐藏元素布局
添加独立的一行插件
在id为body的section和id为main的section之间,添加2张图片。3d
那么,咱们如何处理新加的2张图片呢?
--咱们不太可能用container,由于它是页面布局层面的类名。但咱们能够把这2张图片放在class名为row的div中。htm
如今的图片尚未居中。考虑到总共有12个单元格,而4张图片只占了8个单元格,还空出4个单元格。因而,咱们能够让第一张图片向右偏移2个单元格。图片
文字环绕ip
为img元素增长一个class="pull-left"属性,这会让图片靠左,文字环绕。pdo
可是,当咱们把页面宽度缩小到很小的尺寸,发现图片须要拖拽水平滚动条才能够看到全貌。有没有办法让图片自适应呢?
图片自适应
咱们为某个图片增长一个名称为img-thumbnail的class。
咱们看到:添加img-thumbnail后,不只为图片加了一个边框,而且,当页面尺寸变得再小,咱们总能看到图片全貌,而不须要拖拽水平滚动条。
隐藏元素
有时候,当页面宽度小于或大于某个尺寸,咱们但愿隐藏一些元素。在有4个图片的行添加一个名为hidden-xs的class。
意思是:当页面宽度小于768像素的时候,隐藏图片行。
同理,咱们也能够为图片行加上visible-md, visible-lg,分别表示当宽度大于992像素和1200像素时显示图片行。
参考资料:WilderMinds
“Bootstrap 3之美”系列类包括: