Markdown+Bootstrap图片自适应属性详解

网友投稿 219 2023-07-16


Markdown+Bootstrap图片自适应属性详解

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

使用 Markdown 的优点

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

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

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

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

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

使用 Markdown 的误区

Markdown 旨在简洁、高效,也由于 Markdown 的易读易写,人们用不同的编程语言实现了多个版本的解析器和生成器,这就导致了目前不同的 Markdown 工具集成了不同的功能(基础功能大致相同),例如流程图与时序图,复杂表格与复杂公式的呈现,虽然功能的丰富并没有什么本质的缺点,但终归有些背离初衷,何况在编写的过程中很费神,不如使用专业的工具撰写来的更有效率,所以如果你需实现复杂功能,专业的图形界面工具会更加方便。

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

如: ”武汉光谷”

用js就好了:

$(".content img").addClass('img-responsive');

别忘了在html的head标签内加上:

http://

这样在手机小屏幕上,图片也能够自动缩放了,同时不影响Bootstrap的自适应布局。.img-responsive属性其实也就是给图片加block,max-width:100%的属性。

以上就是本文的全部内容,希望对大家的学习有所帮助。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java生成含字母和数字的6位随机字符串
下一篇:iscroll碰到Select无法选择下拉刷新的解决办法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~