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-独立行,文字环绕,图片自适应,隐藏元素的更多相关文章
- line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
- css文字环绕图片--遇到的问题及解决方法
一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...
- html小知识点汇总（浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class，针对特定的标签进行修改）
1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...
- wps如何设置文字环绕图片
wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 首先打开wps ...
- HTML/CSS实现文字环绕图片布局
原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...
- css 多行文字，超出部分隐藏，...代替
css虽然简单,但其实也是记得常用的那些,不常用的还是要搜一搜再写
- Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel
类似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的组件,是静态的.如果涉及到交互,Bootstrap提供了插件.这些插件包括: ○ 过渡效果: bo ...
- 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 ...
- Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form
本篇主要包括: ■ 排版■ Button■ Icon■ Nav和NavBar■ List■ Table■ Form 排版 ● 斜体:<em>● 加粗体:<strong& ...
随机推荐
- 命令行执行Django脚本
命令行执行Django脚本 - #效仿manage.py加入的环境变量在脚本的文件加入 - #手动注册django所有的APP import sys,os ---------------------- ...
- 二进制方式部署Kubernetes 1.6.0集群(开启TLS)
本节内容: Kubernetes简介 环境信息 创建TLS加密通信的证书和密钥 下载和配置 kubectl(kubecontrol) 命令行工具 创建 kubeconfig 文件 创建高可用 etcd ...
- 32 从1到n整数中1出现的次数
输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数. 主要思路:设定整数点(如1.10.100等等)作为位置点i(对应n的各位.十位.百位等等),分别对每个数位上有多少包含1的点进行分析 ...
- 【BZOJ】1566: [NOI2009]管道取珠
题解 假如我们非常熟练的看出来,平方和转有序对统计的套路的话,应该就不难了 我们只需要统计(wayA,wayB)生成的序列一样的有序对个数就行 可以用一个\(n^3\)的dp解决 \(dp[i][j] ...
- 移动端css单位之 “vh” & “vw”
一.前言: 响应式web设计离不开百分比.但是,CSS百分比并不是所有的问题的最佳解决方案.CSS的宽度是相对于包含它的最近的父元素的宽度的.但是如果你就想用视口(viewpoint)的宽度或者高度, ...
- tensorflow初始化参数内存占满问题
最近使用tensorflow构建了一个浅层的网络,初始化参数的时候发现两个1080ti 22G的显存马上占满 后来发现解决办法为:在创建session的时候把显存设置为自适应即可,如下 config ...
- ref:LDAP入门
ref:https://www.jianshu.com/p/7e4d99f6baaf LDAP入门 首先要先理解什么是LDAP,当时我看了很多解释,也是云里雾里,弄不清楚.在这里给大家稍微捋一捋. 首 ...
- 洛谷P2525 Uim的情人节礼物·其之壱 [康托展开]
题目传送门 Uim的情人节礼物·其之壱 题目描述 情人节到了,Uim打算给他的后宫们准备情人节礼物.UIm一共有N(1<=N<=9)个后宫妹子(现充去死 挫骨扬灰!). 为了维护他的后宫的 ...
- MySQL大事务导致的Insert慢的案例分析
[问题] 有台MySQL服务器不定时的会出现并发线程的告警,从记录信息来看,有大量insert的慢查询,执行几十秒,等待flushing log,状态query end [初步分析] 从等待资源来看, ...
- poj-1251-最小生成树
title: poj-1251-最小生成树 date: 2018-11-20 16:38:14 tags: acm 刷题 categories: ACM-最小生成树 概述 前段时间数据结构的课上提到了 ...