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-独立行,文字环绕,图片自适应,隐藏元素
Bootstrap 3之美04-自定义CSS、Theme、Package
Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form
Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells
Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel
Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素相关推荐
- web页面下实现文字环绕图片效果
通常,我们在一段文字中插入图片时,图片都会独立显示为一行(这是因为img标签属于块级标签,会自动在上下留出一定的空白),也许我们不想这样,如果能像在word中一样实现文字环绕图片的效果多好啊! 以往, ...
- Css 文字环绕图片随笔
一.前言 1)代码部分 <style>.img-left {border: 3px solid #005588;width:300px;}.img-left img {float:left ...
- php怎么设置文字环绕图片,css文字环绕图片的方法
一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文 ...
- 计算机文字环绕图片的方式有哪些,Word2003文字环绕图片方式怎么设置
用Word2003编辑文档为了能让图片显示的效果更好,我们可能会设置文字环绕图片方式,下面是学习啦小编给大家整理的一些有关Word2003文字环绕图片方式的设置方法,希望对大家有帮助! Word200 ...
- html图片环绕文字,CSS_如何让文字环绕图片显示？
总得来说,文字环绕图片显示的实现方式有这样两种: 通过img的 align 属性, 设置img的停靠位置,文字会环绕显示: 给img单独加一个父级div容器,设置css属性:float:left ; ...
- 文字环绕图片效果实现
书接上回,我们来讲讲如何实现"文字环绕图片"的效果吧.整体预计实现的效果如下: 日常杂谈 我喜欢看动漫,接下来的所有博客都会和我日常生活结合在一起写,这样感觉会让自己的博客会有温度 ...
- 浮动，浮动初衷：文字环绕图片
[1]什么是浮动? 浮动设计的初衷为了解决文字环绕图片问题,浮动后一定不会将文字挡住,这是设计初衷,不能违背的. CSS 的 Float(浮动)使元素脱离文档流,按照指定的方向(左或右发生移动),直到 ...
- 浮动布局解决文字环绕图片问题
网页布局之浮动 用浮动解决文字环绕图片问题一 使用浮动却给网页布局带来了便捷,但同时也会带来副作用,这些问题会在后面细说,今天就先来了解一下浮动吧! 一开始float是用来解决文字环绕图片问题的,话不 ...
- html 文字显示图片左侧,CSS_如何让文字环绕图片显示？
总得来说,文字环绕图片显示的实现方式有这样两种: 通过img的 align 属性, 设置img的停靠位置,文字会环绕显示: 给img单独加一个父级div容器,设置css属性:float:left ; ...
最新文章
- java 打电话_第四十二篇----拨打电话
- c++引用matlab类,matlab调用C++函数浅谈(一)
- TeamCity 和 Nexus 的使用
- NUC970开发资源
- [Python]no encoding declared 错误解决方法
- SAP BTP 上使用 Mobile Back-End Tools(MBT)进行全栈开发的方法概述
- 谁会最先陨落：Google，苹果，Facebook，还是微软？
- T-SQL Enhancement in SQL Server 2005[下篇]
- 向量与向量空间（vector space）
- 使用submit异步提交，阻止表单默认提交
- Java多线程讲解，超详细！可获取相关笔记
- 吉林省辽源市谷歌高清卫星地图下载
- 电蚊拍GB4706检测及安规测试设备
- Dynamics AX 2012 的工业物联网解决方案
- R语言读取（加载）txt格式数据为dataframe、按照指定字段（数据列）对dataframe进行升序排序（ascending）
- Floyd最短路径算法
- 计算机组成原理之MIPS汇编:冒泡排序
- stm32设置延时函数
- 一种基于加密域的数字图像水印算法的设计与实现(附Matlab源码)
- jquery获取span标签下的第一个span子标签内容