Markdown与Bootstrap相结合实现图片自适应属性


Posted in Javascript onMay 04, 2016

先给大家说下Markdown的基本概念及优点

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。

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

使用 Markdown 的优点

专注你的文字内容而不是排版样式,安心写作。

轻松的导出 HTML、PDF 和本身的 .md 文件。

纯文本内容,兼容所有的文本编辑器与字处理软件。

随时修改你的文章版本,不必像字处理软件生成若干文件版本导致混乱。

可读、直观、学习成本低。

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%的属性。

以上所述是小编给大家介绍的Markdown与Bootstrap相结合实现图片自适应属性的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
浅析Bootstrap组件之面板组件
May 04 #Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 #Javascript
js编写当天简单日历效果【实现代码】
May 03 #Javascript
javascript实现下雪效果【实例代码】
May 03 #Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 #Javascript
javascript的列表切换【实现代码】
May 03 #Javascript
jQuery中队列queue()函数的实例教程
May 03 #Javascript
You might like
PHP cron中的批处理
2008/09/16 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
python抓取网页中的图片示例
2014/02/28 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python实现自动重启本程序的方法
2015/07/09 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
酒店个人求职信范文
2014/01/25 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
医生辞职信范文
2015/03/02 职场文书
财务稽核岗位职责
2015/04/13 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
Java 数组的使用
2022/05/11 Java/Android