Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

本篇主要包括：

■  添加独立的一行
■  文字环绕
■  图片自适应
■  隐藏元素

添加独立的一行

在id为body的section和id为main的section之间，添加2张图片。


我们发现，新加的2张图片把主体内容挤到了右侧。

那么，我们如何处理新加的2张图片呢？
--我们不太可能用container，因为它是页面布局层面的类名。但我们可以把这2张图片放在class名为row的div中。

我们还可以加更多的图片。

现在的图片还没有居中。考虑到总共有12个单元格，而4张图片只占了8个单元格，还空出4个单元格。于是，我们可以让第一张图片向右偏移2个单元格。


文字环绕

为img元素增加一个class="pull-left"属性，这会让图片靠左，文字环绕。


但是，当我们把页面宽度缩小到很小的尺寸，发现图片需要拖拽水平滚动条才可以看到全貌。有没有办法让图片自适应呢？

图片自适应

我们为某个图片增加一个名称为img-thumbnail的class。



我们看到：添加img-thumbnail后，不仅为图片加了一个边框，并且，当页面尺寸变得再小，我们总能看到图片全貌，而不需要拖拽水平滚动条。

隐藏元素

有时候，当页面宽度小于或大于某个尺寸，我们希望隐藏一些元素。在有4个图片的行添加一个名为hidden-xs的class。

意思是：当页面宽度小于768像素的时候，隐藏图片行。

我们把页面宽度调到768像素以下，图片行果然被隐藏了。

同理，我们也可以为图片行加上visible-md, visible-lg,分别表示当宽度大于992像素和1200像素时显示图片行。

参考资料：WilderMinds

“Bootstrap 3之美”系列类包括:

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

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

Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

时间： 2024-10-04 00:31:33

Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素的相关文章

css文字环绕图片--遇到的问题及解决方法

一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:300px; } .img-left img { float:left; /* 对图片进行浮动就可以实现了 */ width:150px; } </style> <div class="img-left"> <img src="https://ss0.

CSS文字环绕图片 图文混排效果

CSS实现文字环绕图片效果,也就是大家常见到的文中图效果,比如文字会自动围绕一个方块状的图片广告,这一切都是自动的,不需要另外排版,对此有需要有网页,可借鉴本代码,主要是利用CSS的clear属性实现. <html> <head> <title>CSS文字环绕图片 图文混排效果丨石家庄电缆附件</title> </head> <body> <div style="float:left;"> <di

CSS文字环绕图片，文中图效果

<html> <head> <title>CSS文字环绕图片</title> </head> <body> <div style="float:left;"> <div style="float:left;height:100px;width:1px;"> </div> <div style="float:left;height:230px;w

HTML/CSS实现文字环绕图片布局

原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办法:1.利用图片属性实现代码如下: <p style="width:400px;"> <img src="images/bkjj.jpg" align="right" width="120" hspace=&qu

多行文字（图片）垂直居中

最近比较忙,没有时间更新博文.也就在这段时间遇到了些问题,其实这些问题以前遇到过,也处理了,但最近遇到这个问题突然间不知道怎么处理了.半年多没遇到过多行文字垂直居中的问题,可能是因为所处行业问题.好了废话不多说. 大家应该多遇到过这个问题,可能大家都知道怎么解决,但有多少人真的弄清楚它的原理呢? 说先我们先写出html,如下: <div class="cont"> <div class="hack"> <div class="

为什么浮动能实现文字环绕图片而不会重叠

今天看图解CSS的章节,虽然主要讲的是nth-of-type选择器的使用,但是本人却关注到了页面的排版方式,如下: HTML <body> <div class="article"> <img src="http://img.ujian.cc/nice/35.jpg" /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada f

css基础 float img 实现文字环绕图片的效果

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

本篇主要包括: ■  排版■  Button■  Icon■  Nav和NavBar■  List■  Table■  Form 排版 ● 斜体:<em>● 加粗体:<strong>● 突出段落:class="lead"● 字体颜色:class="text-success",class="text-muted",class="text-success",class="text-primary&

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells

本篇主要包括: ■  Page Header■  Breadcrumbs■  Button Groups■  Dropdowns■  Button Dropdowns■  用Button和Dropdowns模拟Select■  Input Groups■  Thumbnails■  Panels■  Wells □ Page Header Page Header是指页面最顶部. <div class="page-header"> <h1>超级球迷</h1&