在Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

使用方法非常简单，只需要在<img>标签上添加对应的类名。

<img  alt="140x140" src="http://placehold.it/140x140">

<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">

<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">

<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">

<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

Bootstrap_表单_图像的更多相关文章

  1. Bootstrap_表单_表单提示信息

    平常在制作表单验证时,要提供不同的提示信息.在Bootstrap框架中也提供了这样的效果.使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部. < ...

  2. Bootstrap_表单_表单控件状态

    一.焦点状态 焦点状态是通过伪类“:focus”来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果. <form role="form& ...

  3. Bootstrap_表单_表单控件

    一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确 ...

  4. Bootstrap_表单_表单样式

    一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <inp ...

  5. Bootstrap_表单_图标

    在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现,然后通过伪元素“:before”的“content”属性调取对应的icon编码: <span class=" ...

  6. Bootstrap_表单_按钮

    一.多标签支持 一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等. 同样,在 ...

  7. Bootstrap_表单

    表单样式 一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> &l ...

  8. vue_表单_组件

    表单.组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  9. django实现密码加密的注册（数据对象插入）-结合forms表单实现表单验证

    forms表单 #_*_coding:utf-8_*_ from django import forms class regis(forms.Form): username = forms.CharF ...

随机推荐

  1. ReactiveCocoa Tutorial

    ReactiveCocoa Tutorial – The Definitive Introduction: Part 1/2 ReactiveCocoa教程——明确的介绍:第一部分(共两部分) As ...

  2. hdu 4284 状态压缩

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4284 #include<cstdio> #include<cstring> # ...

  3. Validate XML using a XSD (XML Schema)

    Consider this XML file howto.xml : <?xml version="1.0" encoding="ISO-8859-1"? ...

  4. poj 2367 Genealogical tree【拓扑排序输出可行解】

    Genealogical tree Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3674   Accepted: 2445 ...

  5. zoj 1671 Walking Ant【简单bfs】

    Walking Ant Time Limit: 2 Seconds      Memory Limit: 65536 KB Ants are quite diligent. They sometime ...

  6. Oracle中trunc函数、round 函数、ceil函数和floor函数的使用

    Oracle中trunc函数.round 函数.ceil函数和floor函数的使用 1.1trunc函数处理数字 trunc函数返回处理后的数值,其工作机制与ROUND函数极为类似,只是该函数不对指定 ...

  7. 389. Find the Difference

    一开始没看见shuffle...觉得同时遍历不就完事了.. 和那个所有数字出现2,有一个出现3次还是什么的一样,CHAR可以完美和INT相互切换. public class Solution { pu ...

  8. memcached与redis 对比

    一. 综述 读一个软件的源码,首先要弄懂软件是用作干什么的,那memcached和redis是干啥的?众所周知,数据一般会放在数据库中,但是查询数据会相对比较慢,特别是用户很多时,频繁的查询,需要耗费 ...

  9. c#委托和事件(上)

    C# 中的委托和事件 引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真 ...

  10. 初次接触GWT，知识点总括

    初次接触GWT,知识点概括 前言 本人最近开始研究 GWT(Google Web Toolkit) ,现将个人的一点心得贴出来,希望对刚开始接触 GWT的程序员们有所帮助,也欢迎讨论,共同进步. 先说 ...