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 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
js constructor的实际作用分析
Nov 15 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
使用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中函数rand和mt_rand的区别比较
2012/12/26 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
python 图片验证码代码分享
2012/07/04 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python装饰器原理与用法分析
2018/04/30 Python
python日期相关操作实例小结
2019/06/24 Python
python找出因数与质因数的方法
2019/07/25 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python中uuid模块实例浅析
2020/12/29 Python
中间件分为哪几类
2016/09/18 面试题
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
企业军训感言
2014/02/08 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
明星邀请函
2015/02/02 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python