本篇主要包括：

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

添加独立的一行

在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-独立行,文字环绕,图片自适应,隐藏元素的更多相关文章

  1. line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

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

    一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...

  3. html小知识点汇总（浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class，针对特定的标签进行修改）

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  4. wps如何设置文字环绕图片

    wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 首先打开wps ...

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

    原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...

  6. css 多行文字，超出部分隐藏，...代替

    css虽然简单,但其实也是记得常用的那些,不常用的还是要搜一搜再写

  7. Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

    类似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的组件,是静态的.如果涉及到交互,Bootstrap提供了插件.这些插件包括: ○ 过渡效果: bo ...

  8. 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和Dropdo ...

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

    本篇主要包括: ■  排版■  Button■  Icon■  Nav和NavBar■  List■  Table■  Form 排版 ● 斜体:<em>● 加粗体:<strong& ...

随机推荐

  1. PL/SQL开发中动态SQL的使用方法

    一般的PL/SQL程序设计中,在DML和事务控制的语句中可以直接使用SQL,但是DDL语句及系统控制语句却不能在PL/SQL中直接使用,要想实现在PL/SQL中使用DDL语句及系统控制语句,可以通过使 ...

  2. 开源的python机器学习模块

    1. Scikit-learn Scikit-learn 是基于Scipy为机器学习建造的的一个Python模块,他的特色就是多样化的分类,回归和聚类的算法包括支持向量机,逻辑回归,朴素贝叶斯分类器, ...

  3. LAMP：用yum安装

    LAMP:用yum安装 Table of Contents 1 什么是LAMP 1.1 L 1.2 A 1.3 M 1.4 P 2 什么是yum 3 如何使用yum 3.1 基本的yum命令 3.1. ...

  4. SSIS 学习之旅 序章 和 简介

    SSIS 学习之旅目录: 第一章: SSIS 学习之旅 第一个SSIS 示例(一) 第二章: SSIS 学习之旅 第一个SSIS 示例(二) 第三章: SSIS 学习之旅 数据同步 第四章: SSIS ...

  5. C++有super关键字么？

    很多人在学习Java之后,看到Java里面有super关键字,用来表示父类,那么C++里面有super关键字么? 答案是否定的.这也很容易理解,C++由于支持多继承,所以假设存在super关键字,那么 ...

  6. Jenkins+Docker持续集成

    本节内容: Jenkins介绍 安装部署Jenkins Jenkins构建maven风格的job Jenkins邮件通知设置 Sonar Jenkins与Docker结合 一.Jenkins介绍 Je ...

  7. 面试题49：把字符串转换成整数（atoi）

    需要考虑的问题都已在程序中注释 bool isValid; int StrToInt(const char* str) { isValid = false; //不合法情形1:空指针 if (str ...

  8. 使用开源my-deploy工具实现开发环境的代码自动化部署

    @编者按: 由于公司内部存在的开发系统:内网开发--外网预发布--外网生产环境,程序员频繁的更新代码造成运维人员大量时间被占用,于是有了使用该开源工具的部署测试环节.在这里感谢该开源工具的作者,也希望 ...

  9. vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html & ...

  10. 【转】 LINUX中IPTABLES和TC对端口的带宽限制 端口限速

    不管是iptables还是tc(traffic control)功能都很强大,都是与网络相关的工具,那么我们就利用这两个工具来对端口进行带宽的限制. 1.使用命令ifconfig查看服务器上的网卡信息 ...