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 相关文章推荐
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
php中Smarty模板初体验
2011/08/08 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
Python统计单词出现的次数
2018/04/04 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
母婴店促销方案
2014/03/05 职场文书
旅游安全协议书
2014/04/21 职场文书
班级活动总结格式
2014/08/30 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
办护照工作证明
2014/10/01 职场文书
个人事迹材料范文
2014/12/29 职场文书
护士求职自荐信范文
2015/03/04 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技