> 웹 프론트엔드 > CSS 튜토리얼 > BootStrap 학습 보조 수업 및 반응형 도구 소개

BootStrap 학습 보조 수업 및 반응형 도구 소개

青灯夜游
풀어 주다: 2018-10-13 17:48:41
앞으로
1903명이 탐색했습니다.

이 글에서는 BootStrap 학습을 위한 보조 그룹 수업과 반응형 도구를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 부트스트랩 관련 비디오 튜토리얼을 더 배우고 얻으려면 부트스트랩 튜토리얼을 방문하세요!

text-*는 글꼴 색상을 나타내고, bg-*는 글꼴의 배경색을 나타냅니다.

닫기 버튼.close

BootStrap 학습 보조 수업 및 반응형 도구 소개

<button>×</button>
로그인 후 복사

기본 위치는 글꼴의 오른쪽 상단입니다. 상위 요소

작은 삼각형 icon.caretre

<span></span>
로그인 후 복사

빠른 부동 .pull-heft 및 .pull-Right

<p>我是文字</p>
<p>我是文字</p>
로그인 후 복사

이 부동은 실제로 Float이지만 중요 입니다. 강화 우선순위. Center-block

<p>我是文字</p>
로그인 후 복사

Clean upFloatingclearfix

<p>我是文字</p>
		

<p>我是文字</p>
로그인 후 복사
이 p는 클리어가 필요한 플로팅 블록 앞에 배치할 수 있습니다.

표시(.show) 및 숨기기(.hidden)

<p>我是文字</p>
		
<p>我是文字</p>
로그인 후 복사

사실 표시: 차단 또는 없음 추가! 중요는 우선순위를 강화합니다

반응형 도구

초소형 화면휴대폰(

작음 화면

태블릿(≥ 768px )데스크톱(≥992px)데스크톱(≥1200px)hide Hidden 추가된 모든 스타일에는 !important 추가 우선순위가 있습니다. 요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

중형 화면

대형 화면

.visible-xs- 표시 -sm-*
표시 .visible-lg-*
show .hiddem-xs 숨기기
.hidden-sm
표시되는 내용에는 블록, 인라인 블록, 인라인의 세 가지 변형이 있습니다.

위 내용은 BootStrap 학습 보조 수업 및 반응형 도구 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿