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

글쎄: 스타일의 효과는 대형 화면 디스플레이 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으로 문의하세요.

저자별 최신 기사

• NameValuePair 메소드를 사용하여 매개변수 전달에 대한 예제 튜토리얼
  1970-01-01 08:00:00
• dom4j를 사용하여 XML 문서 예제 구문 분석
  1970-01-01 08:00:00
• 카탈로그 서비스 - Microsoft 마이크로서비스 아키텍처 예제 코드 분석
  1970-01-01 08:00:00
• .net Elasticsearch 예제 시작에 대한 자세한 설명
  1970-01-01 08:00:00
• JSP 지원 구성 예제를 추가하는 Spring 부트에 대한 자세한 소개
  1970-01-01 08:00:00
• JS는 window.open으로 열린 창이 닫혔는지 여부를 어떻게 감지합니까?
  1970-01-01 08:00:00
• 데이터베이스 및 해당 솔루션에 연결하는 sqlyog의 잘못된 문제 공유
  1970-01-01 08:00:00
• Java에서 가변 길이 매개변수를 사용하는 예
  1970-01-01 08:00:00
• 최신 Amap API WEB 개발 예제 튜토리얼
  1970-01-01 08:00:00
• AJAX의 장점과 단점
  1970-01-01 08:00:00

최신 이슈

페이지가 갑자기 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

관련 주제

더>

• 가상 화폐 거래 플랫폼
• 자바 멀티스레드 프로그래밍
• 탭 페이지를 공유하지 않는 Win7 폴더 속성에 대한 솔루션
• 컴퓨터가 충돌할 때 복구하려면 어떤 키를 누르나요?
• 상위 10개 암호화폐 거래 앱
• C언어 랜덤함수 사용법
• 2024년에는 저평가된 코인이 비축될 것
• 파이썬 평가