收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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

JS功能代码集锦
1.模仿fadein(),fadeout().原理:setInterval("opacity++透明度函数,时间间隔)varalpha=0;functionplay(){timer=setInterval(function(){alpha+=2;alpha100&&(alpha=100);aImg[index].style.opaci

js实现div在页面拖动效果
本文实例讲述了js实现div在页面拖动效果。分享给大家供大家参考,具体如下:styletype="text/css"body{margin:0px;}#div1{display:none;position:absolute;z-index:1000;height:10

DWR中各种java方法的调用
DWR是一个框架,简单的说就是能够在javascript直接调用java方法,而不必去写一大堆的javascript代码。它的实现是基于ajax的,可以实现无刷新效果。网上有

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的!
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号