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

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

使用 Markdown 的优点
1、专注你的文字内容而不是排版样式，安心写作。
2、轻松的导出 HTML、PDF 和本身的 .md 文件。
3、纯文本内容，兼容所有的文本编辑器与字处理软件。
4、随时修改你的文章版本，不必像字处理软件生成若干文件版本导致混乱。
5、可读、直观、学习成本低。

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

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%的属性。

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

赞 (0)

相关推荐

  • BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

  • Bootstrap表单布局

    Bootstrap表单布局

    Bootstrap 提供了下列类型的表单布局: •垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: •内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖排. •水平表单 -> 用栅格系统控制显示 一.垂直表单 垂直表单使用的标准步骤 1.<form> 元素添加 role="form". 2.把标签和控件放在一个带有"form-group"的<div> 中,获取最佳间距. 3.向所有的文

  • Bootstrap页面布局基础知识全面解析

    Bootstrap页面布局基础知识全面解析

    Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西. Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系统包裹一个

  • bootstrap配合Masonry插件实现瀑布式布局

    bootstrap配合Masonry插件实现瀑布式布局

    问题是这样的,使用bootstrap的栅格进行布局的时候,如果大小超过了,会自动的转到下一行,但是在显示图片的时候就会出现缝隙,下面介绍masonry进行缝隙的填补. 好,下面上货. 1.首先是html <html> <head> <title>Title</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/cs

  • BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)

    布局组件 下拉按钮 <div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown"> 帮助<span class="caret"></span> </button> <ul class="dropdown-menu" ro

  • Markdown与Bootstrap相结合实现图片自适应属性

    先给大家说下Markdown的基本概念及优点 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. Markdown 是一种轻量级的标记语言,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被标记.语言所迷惑,Markdown 的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永

  • 使用jQuery和Bootstrap实现多层、自适应模态窗口

    使用jQuery和Bootstrap实现多层、自适应模态窗口

    本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即第二层模态窗口打开的时候,无法关闭第一层模态窗口. 具体页面实现部分如下: 复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  • bootstrap实现的自适应页面简单应用示例

    bootstrap实现的自适应页面简单应用示例

    本文实例讲述了bootstrap实现的自适应页面简单应用.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1'&g

  • Bootstrap 布局组件（全）

    Bootstrap 布局组件（全）

    Bootstrap 布局组件 1.Bootstrap字体图标 (1).字体图标列表链接 http://www.runoob.com/bootstrap/bootstrap-glyphicons.html (2).用法 如需使用图标,只需要简单地使用下面的代码即可.请在图标和文本之间保留适当的空间.没有glyphicon的css. <span class="glyphicon glyphicon-search"></span> (3).定制字体图标 我们已经看到如

  • BootStrap整体框架之基础布局组件

    1 基础布局组件 在12栅格系统上基础上,BootStrap还提供了多种基础布局组件. CSS组件,总结为8大类型的样式: 基础样式.颜色样式.尺寸样式.状态样式.特殊元素样式.并列元素样式.嵌套子元素样式.动画样式 1.1基础样式 基本样式,一般包含文本字体,颜色背景,边框,定位等,如下面警告框: //源码 .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px

随机推荐