Markdown+Bootstrap图片自适应属性详解


Posted in Javascript onMay 21, 2016

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

使用 Markdown 的优点
1、专注你的文字内容而不是排版样式,安心写作。
2、轻松的导出 HTML、PDF 和本身的 .md 文件。
3、纯文本内容,兼容所有的文本编辑器与字处理软件。
4、随时修改你的文章版本,不必像字处理软件生成若干文件版本导致混乱。
5、可读、直观、学习成本低。

使用 Markdown 的误区
Markdown 旨在简洁、高效,也由于 Markdown 的易读易写,人们用不同的编程语言实现了多个版本的解析器和生成器,这就导致了目前不同的 Markdown 工具集成了不同的功能(基础功能大致相同),例如流程图与时序图,复杂表格与复杂公式的呈现,虽然功能的丰富并没有什么本质的缺点,但终归有些背离初衷,何况在编写的过程中很费神,不如使用专业的工具撰写来的更有效率,所以如果你需实现复杂功能,专业的图形界面工具会更加方便。

Markdown是一个很好的标记语言,越来越流行作为编辑器的语法,Bootstrap是一个前端框架,那么问题来了,Markdown的图片标记如:![alt](url),在页面上通常会转换成html,这个时候如何给图片加Bootstrap的图片自适应属性.img-responsive?

如: <img alt=”武汉光谷” src=”http://cdn.tanteng.me/uploads/2016/05/guang-gu.jpg” class=”img-responsive”>

用js就好了:

<scripttype="text/javascript">
  $(".content img").addClass('img-responsive');
</script>

别忘了在html的head标签内加上:

<metaname="viewport" content="width=device-width, initial-scale=1">
这样在手机小屏幕上,图片也能够自动缩放了,同时不影响Bootstrap的自适应布局。.img-responsive属性其实也就是给图片加block,max-width:100%的属性。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 #Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 #Javascript
IScroll5 中文API参数说明和调用方法
May 21 #Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 #Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 #Javascript
jQuery插件pagination实现无刷新分页
May 21 #Javascript
JavaScript中对JSON对象的基本操作示例
May 21 #Javascript
You might like
php学习之数据类型之间的转换代码
2011/05/29 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php-app开发接口加密详解
2018/04/18 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
个人委托书范本
2014/04/02 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
精神病医院见习报告
2014/11/03 职场文书
预备党员入党感想
2015/08/10 职场文书
Java spring单点登录系统
2021/09/04 Java/Android