Markdown is a lightweight "market language" with many advantages and is currently widely used by more and more writing enthusiasts and writers. Please don’t be confused by “marks” and “language” when you see this. Markdown’s syntax is very simple. There are no more than ten commonly used markup symbols. Compared with the more complex HTML markup language, Markdown is very lightweight and does not require too much learning cost. Once you are familiar with this syntax rule, it will have a one-time and for all effect.
Advantages of using Markdown
1. Focus on your text content instead of typeface and write with peace of mind.
2. Easily export HTML, PDF and .md files.
3. Plain text content, compatible with all text editors and word processing software.
4. Modify your article version at any time, and do not have to generate several file versions like word processing software to cause confusion.
5. Readable, intuitive, and low learning cost.
Misunderstandings of using Markdown
Markdown is designed to be concise and efficient. Due to the easy-to-read and easy-to-write Markdown, people use different programming languages to implement multiple versions of parsers and generators. This has led to the integration of different Markdown tools with different functions (basic functions are roughly the same), such as flow charts and timing charts, presentation of complex tables and complex formulas. Although the rich functions do not have any essential disadvantages, it is somewhat contrary to the original intention. Moreover, it is very troublesome in the writing process, and it is not as efficient as writing with professional tools. Therefore, if you need to implement complex functions, professional graphical interface tools will be more convenient.
Markdown is a good markup language and is becoming more and more popular as an editor syntax. Bootstrap is a front-end framework. So the question is, Markdown's image markup such as: , which is usually converted to html on the page. How to add Bootstrap's image adaptive attributes to the image at this time.img-responsive?
For example: <img alt=”Wuhan Optical Valley” src=”http://cdn.tanteng.me/uploads/2016/05/guang-gu.jpg” class=”img-responsive”>
Just use js:
<scripttype="text/javascript"> $(".content img").addClass('img-responsive');</script>Don't forget to add:
<metaname="viewport" content="width=device-width, initial-scale=1">
In this way, the pictures can be automatically scaled on the small screen of the mobile phone without affecting the adaptive layout of Bootstrap. The .img-responsive attribute is actually the attribute of blocking the image and max-width:100% of the attribute.
The above is all about this article, I hope it will be helpful to everyone's learning.