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插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图片)都无法正常缩放,选中图片,用鼠标点击并拖动图片边沿的小标签,图片只能缩小不能放大.尝试过很多方法都没办法解决,甚至检查了js源码,也没有发现有任何异常的地方. 后来无意中发现页面上引入了Bootstrap,而Bootstrap默认将box-sizing样式统一设成border-box了.具体内容
-
Bootstrap Img 图片样式(推荐)
Bootstrap提供了四种用于<img>类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角: .img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形. .img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框. .img-responsive:图片响应式 (将很好地扩展到父元素). 使用: 将类样式直接添加到class中即可
-
详解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基本样式学习笔记之图片(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 通过一些简单的 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中任何带有 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标签例子: <!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 通过缩略图为网站布局提供了一种简洁的解决方案. 直接看例子: <!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也进行了封装.包括下拉菜单.按钮组.导航.分页.缩略图.进度条等. 下面先总结下下拉菜单的使用. 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
-
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)
使用input输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
随机推荐
- 集合嵌套之ArrayList嵌套ArrayList实例
- javaScript 关闭浏览器 (不弹出提示框)
- asp.net 图片验证码的HtmlHelper
- PHP判断json格式是否正确的实现代码
- 跟老齐学Python之开始真正编程
- 用asp获取微软安全更新列表的代码 小偷程序
- Phonegap使用拍照功能时的内存问题
- php实现的ping端口函数实例
- JavaScript实现的GBK、UTF8字符串实际长度计算函数
- javascript获取当前ip的代码
- 一个浙江人的23条经典经商法则!想成功必看
- Oracle插入日期数据常见的2个问题和解决方法
- python 布尔操作实现代码
- Android获取apk签名指纹的md5值(防止重新被打包)的实现方法
- Android实现滑动删除操作(PopupWindow)
- php获取本地图片文件并生成xml文件输出具体思路
- C#子线程更新UI控件的方法实例总结
- PHP4实际应用经验篇(3)
- Java日期时间字符串和毫秒相互转换的方法
- Spring中@Async注解执行异步任务的方法