Bootstrap基本样式学习笔记之图片(6)

直接看Bootstrap图片基本样式例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>图片</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>照片样式</h1>
 </div>
 <div class="col-lg-3">
 <h3>原始照片</h3>
 <img src="../../img/girl.jpg">
 </div>
 <div class="col-lg-3">
 <h3>圆形效果</h3>
 <img src="../../img/girl.jpg" class="img-circle">
 </div>
 <div class="col-lg-3">
 <h3>圆角效果</h3>
 <img src="../../img/girl.jpg" class="img-rounded">
 </div>
 <div class="col-lg-3">
 <h3>边框效果</h3>
 <img src="../../img/girl.jpg" class="img-thumbnail">
 </div>
</div>
</body>
</html>

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Bootstrap四种图片样式

    详解Bootstrap四种图片样式

    在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了四个可对图片应用简单样式的class,分别是: img-rounded 添加 border-radius:6px 来获得图片圆角 img-circle 添加 border-radius:50% 来让整个图片变成圆形 img-thumbnail 添加一些内边距(padding)和一个灰色的边框 img-responsive 图片响应式 1.img-rounded <!doctype html> <html l

  • Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案

    UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图片)都无法正常缩放,选中图片,用鼠标点击并拖动图片边沿的小标签,图片只能缩小不能放大.尝试过很多方法都没办法解决,甚至检查了js源码,也没有发现有任何异常的地方. 后来无意中发现页面上引入了Bootstrap,而Bootstrap默认将box-sizing样式统一设成border-box了.具体内容

  • Bootstrap Img 图片样式(推荐)

    Bootstrap Img 图片样式(推荐)

    Bootstrap提供了四种用于<img>类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角: .img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形. .img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框. .img-responsive:图片响应式 (将很好地扩展到父元素). 使用: 将类样式直接添加到class中即可

  • Bootstrap基本样式学习笔记之图片(6)

    Bootstrap基本样式学习笔记之图片(6)

    直接看Bootstrap图片基本样式例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../cs

  • Bootstrap基本样式学习笔记之表格(2)

    Bootstrap实现了大量基本样式,包括表格.表单.按钮.图片等.基本的使用方法是通过添加特定的class来实现. Bootstrap 提供了一个清晰的创建表格的布局. 0x01 表格样式 (1)基本样式:不带边框和分割线: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport&qu

  • Bootstrap基本样式学习笔记之表单(3)

    Bootstrap基本样式学习笔记之表单(3)

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 0x01 样式1 一个登录界面: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

  • Bootstrap基本样式学习笔记之按钮(4)

    Bootstrap基本样式学习笔记之按钮(4)

    Bootstrap中任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观,再结合一些选项,可以定义各种按钮样式. 0x01 按钮样式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

  • Bootstrap基本样式学习笔记之标签(5)

    Bootstrap基本样式学习笔记之标签(5)

    直接看Bootstrap标签例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bo

  • Bootstrap源码学习笔记之bootstrap进度条

    基本样式 要实现进度条效果要使用两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式.例如: <div class="progress"> <div class="progress-bar" style="width:40%"></div> </div> progress样式主要设置进度条容器的背景色,容器高度.间距等,pr

  • Bootstrap基本组件学习笔记之缩略图(13)

    Bootstrap基本组件学习笔记之缩略图(13)

    Bootstrap 通过缩略图为网站布局提供了一种简洁的解决方案. 直接看例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

  • Bootstrap基本组件学习笔记之下拉菜单(7)

    Bootstrap基本组件学习笔记之下拉菜单(7)

    对于一些较为常用的功能模块,Bootstrap也进行了封装.包括下拉菜单.按钮组.导航.分页.缩略图.进度条等. 下面先总结下下拉菜单的使用. 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

  • Bootstrap基本组件学习笔记之按钮组(8)

    Bootstrap基本组件学习笔记之按钮组(8)

    按钮组允许多个按钮被堆叠在同一行上,实现起来非常简单. 0x01 基本用法 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &l

  • Bootstrap基本组件学习笔记之input输入框组(9)

    Bootstrap基本组件学习笔记之input输入框组(9)

    使用input输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

随机推荐