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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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
随机头像PHP版
2006/10/09 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
单位提档介绍信
2014/01/17 职场文书
网络管理员岗位职责
2014/03/17 职场文书
学习雷锋活动总结
2014/04/29 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
财务负责人任命书
2014/06/06 职场文书
大国崛起英国观后感
2015/06/02 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript