DDR爱好者之家

Markdown与Bootstrap相结合实现图片自适应属性
站长资源 2024/11/29 佚名
59 1538
DDR爱好者之家 Design By 杰米

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

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

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

使用 Markdown 的优点

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

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

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

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

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

Markdown是一个很好的标记语言，越来越流行作为编辑器的语法，Bootstrap是一个前端框架，那么问题来了，Markdown的图片标记如：![alt](url)，在页面上通常会转换成html，这个时候如何给图片加Bootstrap的图片自适应属性.img-responsive"htmlcode"> 

<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相结合实现图片自适应属性的相关知识，希望对大家有所帮助！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米