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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
浅析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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
如何把PHP转成EXE文件
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
js GridView 实现自动计算操作代码
2009/03/25 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
IDEA安装vue插件图文详解
2019/09/26 Javascript
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
详解python eval函数的妙用
2017/11/16 Python
设置python3为默认python的方法
2018/10/31 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
python两个list[]相加的实现方法
2020/09/23 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
信息与计算科学专业推荐信
2014/02/23 职场文书
家长对孩子的感言
2014/03/10 职场文书
工作服管理制度范本
2015/08/06 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers