지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 부트스트랩 습지란 무엇입니까?

부트스트랩 습지란 무엇입니까?

零下一度
풀어 주다： 2017-07-19 17:17:07
원래의
1370명이 탐색했습니다.

글쎄: 스타일의 효과는 대형 화면 디스플레이 Jumbotron 스타일과 유사합니다. 차이점은 웰 스타일에 테두리 설정이 있고 기본 높이가 적응형 텍스트의 높이라는 것입니다.

샘플 코드: 

<div class="well">   <p> sorry I have no word to say</p>   <blockquote>this is a 引用内容</blockquote></div>
로그인 후 복사

　 이는 웹사이트의 주요 콘텐츠를 표시하기 위해 전체 브라우저 뷰포트로 확장할 수 있는 가볍고 유연한 구성 요소입니다. 이번 글에서는 부트스트랩 스웨일에 대해 자세히 소개하겠습니다

개요

우물 스타일의 효과는 점보트론 스타일과 유사하지만, 우물 스타일에는 테두리 설정이 있고 기본 높이는 의 높이입니다. 적응형 텍스트. 요소에 Well을 사용하면 간단한 삽입 효과를 얻을 수 있습니다

　Well 스타일을 사용하는 방법은 매우 간단합니다. .well 클래스를 사용하면 됩니다.

.well {min-height: 20px;padding: 19px;margin-bottom: 20px;background-color: #f5f5f5;border: 1px solid #e3e3e3;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
로그인 후 복사
<div class="well">小火柴的蓝色理想</div>
로그인 후 복사

Size

well 스타일은 다양한 기능을 제공합니다. 크기 스타일(주로 패딩 및 필렛 크기)은 각각 Well-lg 및 Well-SM입니다. 사용시에는 동일한 요소에 웰을 이용하여 직접 적용해주시면 됩니다

.well-lg {padding: 24px;border-radius: 6px;
}.well-sm {padding: 9px;border-radius: 3px;
}
로그인 후 복사
<div class="well">小火柴的蓝色理想</div>
小火柴的蓝色理想
小火柴的蓝色理想
로그인 후 복사


위 내용은 부트스트랩 습지란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
bootstrap
원천：php.cn
이전 기사：6가지 프로토타입 파일 형식의 차이점 다음 기사：iOS에서 iframe이 지원되지 않는 문제를 해결하는 방법은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
에서 2024-04-05 08:45:39
0
1
3443
Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...
에서 2024-04-04 22:16:18
0
1
1450
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿