찾다
웹 프론트엔드부트스트랩 튜토리얼부트스트랩 col-sm col-md 차이
부트스트랩 col-sm col-md 차이Jul 17, 2019 am 11:49 AM
bootstrap

부트스트랩 펜스 시스템 CSS에서 col-xs-*, col-sm-*, col-md-*의 의미는 디스플레이 화면의 너비에 따라 해당 클래스 스타일을 자동으로 선택한다는 것입니다:

부트스트랩 col-sm col-md 차이

.col-xs- 초소형 화면 휴대폰((추천 학습: Bootstrap 비디오 튜토리얼)

.col-sm- 소형 화면 태블릿(≥768px)

.col-md- 중형 화면 데스크톱 모니터(≥992px)

.col-lg- 대형 화면 데스크톱 모니터(≥1200px)

우선:

1, col-column,

2, xs-maxsmall, super small; sm-medium, Medium;

3, -*는 열을 차지하는 것을 의미합니다. 즉, 각 행을 12개의 열로 자동으로 나누는 그리드 시스템 비율을 차지합니다. 4, col- xs-*초소형 화면 휴대폰(

.col-sm-*소형 화면 태블릿(≥768px),

.col-md-*중형 화면 데스크톱 모니터( ≥992px) (게이트 그리드 매개변수).

5. 화면 종류에 관계없이 그리드 시스템은 자동으로 각 행을 12개의 열로 나누고 매개변수 뒤에 col-xs-* 및 col-가 표시됩니다. sm-* 및 col-md-* 현재 화면에서 각 div가 차지하는 열 수입니다.

예를 들어

화면에서 이 div가 차지하는 위치는 다음과 같습니다. .col-xs-6은 초소형 화면에서 6열을 차지합니다. 이는 화면 절반(12/6열 = 2div)이고, .col-md-3은 중간 차선 화면에서 3열을 차지하며 이는 1/4(12/3열 = 4div)입니다.

6. 반대로 작은 화면에 3개의 div를 나란히 표시하려면(12/3 = 각각 4개의 열을 차지함) 큰 화면에 6개의 div를 표시합니다(12/6). = 각각 2개의 열을 차지함), col-md-2를 사용하면 원하는 조판을 제어할 수 있습니다.

Bootstrap과 관련된 더 많은 기술 기사를 보려면

Bootstrap Tutorial

칼럼을 방문하여 알아보세요!

위 내용은 부트스트랩 col-sm col-md 차이의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
10款好看又实用的Bootstrap后台管理系统模板(快来下载)10款好看又实用的Bootstrap后台管理系统模板(快来下载)Aug 06, 2021 pm 01:55 PM

一个好的网站,不能只看外表,网站后台同样很重要。本篇文章给大家分享10款好看又实用的Bootstrap后台管理系统模板,可以帮助大家快速建立强大有美观的网站后台,欢迎下载使用!如果想要获取更多后端模板,请关注php中文网后端模板栏目!

bootstrap与jquery是什么关系bootstrap与jquery是什么关系Aug 01, 2022 pm 06:02 PM

bootstrap与jquery的关系是:bootstrap是基于jquery结合了其他技术的前端框架。bootstrap用于快速开发Web应用程序和网站,jquery是一个兼容多浏览器的javascript库,bootstrap是基于HTML、CSS、JAVASCRIPT的。

7款实用响应式Bootstrap电商源码模板(快来下载)7款实用响应式Bootstrap电商源码模板(快来下载)Aug 31, 2021 pm 02:13 PM

好看又实用的Bootstrap电商源码模板可以提高建站效率,下面本文给大家分享7款实用响应式Bootstrap电商源码,均可免费下载,欢迎大家使用!更多电商源码模板,请关注php中文网电商源码​栏目!

8款Bootstrap企业公司网站模板(源码免费下载)8款Bootstrap企业公司网站模板(源码免费下载)Aug 24, 2021 pm 04:35 PM

好看又实用的企业公司网站模板可以提高您的建站效率,下面PHP中文网为大家分享8款Bootstrap企业公司网站模板,均可免费下载,欢迎大家使用!更多企业站源码模板,请关注php中文网企业站源码栏目!

bootstrap中sm是什么意思bootstrap中sm是什么意思May 06, 2022 pm 06:35 PM

在bootstrap中,sm是“小”的意思,是small的缩写;sm常用于表示栅格类“.col-sm-*”,是小屏幕设备类的意思,表示显示大小大于等于768px并且小于992px的屏幕设备,类似平板设备。

bootstrap modal 如何关闭bootstrap modal 如何关闭Dec 07, 2020 am 09:41 AM

bootstrap modal关闭的方法:1、连接好bootstrap的插件;2、给按钮绑定模态框事件;3、通过“ $('#myModal').modal('hide');”方法手动关闭模态框即可。

bootstrap默认字体大小是多少bootstrap默认字体大小是多少Aug 22, 2022 pm 04:34 PM

bootstrap默认字体大小是“14px”;Bootstrap是一个基于HTML、CSS、JavaScript的开源框架,用于快速构建基于PC端和移动端设备的响应式web页面,并且默认的行高为“20px”,p元素行高为“10px”。

bootstrap是免费的吗bootstrap是免费的吗Jun 21, 2022 pm 05:31 PM

bootstrap是免费的;bootstrap是美国Twitter公司的设计师“Mark Otto”和“Jacob Thornton”合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,开发完成后在2011年8月就在GitHub上发布了,并且开源免费。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경