Markdown과 Bootstrap을 결합하여 이미지 적응형 속성_javascript 기술 구현

먼저 마크다운의 기본 개념과 장점을 알려드리겠습니다

마크다운은 일반적인 텍스트 편집기를 사용하여 작성할 수 있는 마크업 언어입니다. 간단한 마크업 구문을 통해 일반적인 텍스트 콘텐츠를 특정 형식으로 만들 수 있습니다.

마크다운은 많은 장점을 지닌 경량 마크업 언어이며 현재 점점 더 많은 글쓰기 애호가와 작가가 널리 사용하고 있습니다. 마크다운의 구문은 매우 간단합니다. 일반적으로 사용되는 마크업 기호는 10개 이하입니다. 더 복잡한 HTML 마크업 언어에 비해 마크다운은 매우 가볍고 학습 비용이 많이 들지 않습니다. 이 문법 규칙에 익숙해지면 모든 결과에 대해 한 번만 얻을 수 있습니다.

마크다운 사용의 장점

레이아웃 스타일보다는 텍스트 내용에 중점을 두고 안심하고 작성하세요.

HTML, PDF 및 기본 .md 파일을 쉽게 내보낼 수 있습니다.

모든 텍스트 편집기 및 워드 프로세싱 소프트웨어와 호환되는 순수 텍스트 콘텐츠입니다.

여러 파일 버전을 생성하는 워드 프로세싱 소프트웨어처럼 혼동을 일으키지 않고 언제든지 기사 버전을 수정하세요.

읽기 쉽고 직관적이며 학습 비용이 저렴합니다.

Markdown은 좋은 마크업 언어이며 편집기 구문으로 점점 더 인기를 얻고 있습니다. Bootstrap은 프런트 엔드 프레임워크입니다. 따라서 Markdown의 이미지 태그는 다음과 같습니다. ]( url), 일반적으로 페이지에서 html로 변환됩니다. 이때 Bootstrap의 이미지 적응 속성 .img-반응성을 이미지에 추가하는 방법은 무엇입니까?

예:

<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">

이렇게 하면 부트스트랩의 적응형 레이아웃에 영향을 주지 않고 휴대폰의 작은 화면에서 이미지 크기가 자동으로 조정될 수 있습니다. .img-response 속성은 실제로 이미지에 block 및 max-width: 100%를 추가하는 속성입니다.

위 내용은 이미지의 적응적 속성을 얻기 위해 마크다운과 부트스트랩을 결합하여 편집자가 소개하는 관련 지식입니다. 도움이 되길 바랍니다!