Bootstrap全局css样式_图片,响应式工具
响应式图片
在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><img src="001.jpg" class="img-responsive" lt="这是一张桌面的图片"></div></body>
</html>
图片形状
通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><img src="1.png" class="img-responsive img-round" ><img src="1.png" class="img-responsive img-circle" ><img src="1.png" class="img-responsive img-thumbnail" ></div></body>
</html>
为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示
或隐藏页面内容<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>响应式工具</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body> <div class="container"><p class="visible-sm-block">hello</p></div>
</body>
</html>
打印类
和常规的响应式类一样,使用下面的类可以针对打印机隐藏或显示某些内容。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>响应式工具</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body> <div class="container"><p class="hidden-print">hello</p></div>
</body>
</html>
Bootstrap全局css样式_图片,响应式工具相关推荐
- Bootstrap全局css样式_表格
条纹状表格 通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式.<!DOCTYPE html> <html lang=" ...
- Bootstrap全局css样式_按钮
链接被作为按钮使用时的注意事项 如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接 当前页面中的其他部分,那么,务必为其设置 role ...
- Bootstrap全局css样式_代码
内联代码 通过 <code> 标签包裹内联样式的代码片段.<!DOCTYPE html> <html lang="en"> <head&g ...
- Bootstrap全局css样式_辅助类
情境文本颜色通过颜色来展示意图,Bootstrap 提供了一组工具类.这些类可以应用于链接,并且在鼠标经过时颜色可以 还可以加深,就像默认的链接一样.<!DOCTYPE html> < ...
- Bootstrap全局css样式_表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
- 前端基础之《Bootstrap(2)—全局CSS样式_栅格系统》
一.Bootstrap要点 1.bootstrap全局CSS样式 2.bootstrap CSS组件 3.bootstrap javascript插件 其实就是官网上的这三个. 二.项目引入Boots ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- bootstrap全局css样式
一.富文本编辑器 富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于比如谷歌.火狐效果都非常不错, 在功能的丰富性来说,还是IE强些(但 ...
最新文章
- smarty学习——编程知识
- 川大计算机考研2020招生数,四川大学等大学,2020年研究生招生简章发布,这3个信息很重要!...
- 红旗6SP1版不克不及显示NTFS内的中文文件
- 【Android 插件化】现有的针对插件化恶意应用的解决方案 | 插件化应用开发推荐方案
- tensorflow怎样调用gpu_tensorflow / tensorflow-gpu / tensorflow-cpu区别?
- 分词之后的如何做特征选择_干货分享!做外贸遇到空运订舱之后走不了如何处理,你知道吗?收藏...
- android 串口通信_使用UART与ZYBO进行通信常用外设设计方案
- Sargable 与 谓语下推 (predicate pushdown) 简介
- python 字符串加密 唯一数字_python实现字符串加密 生成唯一固定长度字符串
- PHP生成UTF-8编码的CSV文件用Excel打开乱码的解决办法
- 常用高性价比的LCD液晶屏驱动芯片VK1088B
- c#程序设计实训报告心得体会_C程序设计实训个人总结(推荐五篇)
- macbook pro配置maven环境变量
- csp是什么比赛_2020年CSP-J/S来了,你想知道的都在这里
- 路在脚下,何去何从?
- SQL Server 2019的下载与安装
- 增加虚拟android内存,怎么给安卓手机增加虚拟内存?
- Git 应用补丁报错 “sha1 information is lacking or useless”
- nodejs 传递参数
- WAF是干什么的 有哪些功能
热门文章
- DBCC--CHECKIDENT
- Socket 套接字
- Oracle 11gR2发布11.2.0.3 Patchset补丁集-又一重量级更新
- 单片机低功耗设计杂谈
- JS判断当前的浏览器类型
- docker快速入门01——docker安装与简单应用
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中实现按部门组织机构设置权限...
- Hive:表1inner join表2结果group by优化
- IDA Pro安装教程
- Ubuntu录制GIF动画