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

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

赞 (0)

相关推荐

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

    Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果. 使用 Markdown 的优点 1.专注你的文字内容而不是排版样式,安心写作. 2.轻松的导出 HTML.PDF 和本身的 .md 文件.

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

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

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

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

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

  • 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学习系列之布局组件(下拉,按钮组[toolbar],上拉)

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

  • Bootstrap表单布局

    Bootstrap表单布局

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

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

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

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

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

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

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

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

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

随机推荐