부트스트랩이 매일 배워야 할 패널_자바스크립트 기술

1. 패널

패널은 Bootstrap 프레임워크의 새로운 구성 요소입니다. 주요 기능은 다른 구성 요소로 완료할 수 없는 일부 기능을 처리하는 것입니다. 또한 버전마다 소스 코드가 다릅니다:

덜 버전: 해당 소스코드 파일은 panel.less입니다

🙌 Sass 버전: 해당 소스코드 파일은 _panels.scss

✓ 컴파일된 Bootstrap: 은 bootstrap.css 파일의 4995~5302행에 해당합니다

2. 패널 - 기본 패널

기본 패널은 테두리가 있는 텍스트 표시 블록을 생성하기 위해 "패널" 스타일을 사용하는 div 컨테이너입니다. "panel"은 테마 색상을 제어하지 않으므로 "panel"을 기반으로 색상 제어 테마 "panel-default"가 추가되고 패널의 주요 내용을 배치하기 위해 "div.panel-body"가 내부에 추가됩니다.

<div class="panel panel-default">
 <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>

작동 효과는 다음과 같습니다.

원리 분석:

"패널"은 주로 특정 테두리, 간격 및 둥근 모서리를 설정합니다.

/boottrap.css 파일의 4995번째 줄~5005번째 줄/

.panel {
 margin-bottom: 20px;
 background-color: #fff;
 border: 1px solid transparent;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
 padding: 15px;
}

3. 패널 – 머리와 꼬리가 있는 패널

기본 패널이 너무 단순해 보입니다. 패널의 기능을 풍부하게 하기 위해 Bootstrap은 특별히 패널에 "패널 머리글" 및 "페이지 바닥글" 효과를 추가합니다.

✓ panel-heading: 은 패널 헤더 스타일을 설정하는 데 사용됩니다

✓ panel-footer: 는 패널 바닥글 스타일을 설정하는 데 사용됩니다

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者：大漠</div>
</div>

작동 효과는 다음과 같습니다.

원리 분석:

패널 머리글과 패널 바닥글에는 간격과 둥근 모서리만 설정되어 있습니다.

/boottrap.css 파일의 5006번째 줄~5030번째 줄/

.panel-heading {
 padding: 10px 15px;
 border-bottom: 1px solid transparent;
 border-top-left-radius: 3px;
 border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
 color: inherit;
}
.panel-title {
 margin-top: 0;
 margin-bottom: 0;
 font-size: 16px;
 color: inherit;
}
.panel-title > a {
 color: inherit;
}
.panel-footer {
 padding: 10px 15px;
 background-color: #f5f5f5;
 border-top: 1px solid #ddd;
 border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;
}

4. 패널 – 컬러 패널

기본 패널 섹션에서는 패널 스타일이 테마 스타일을 설정하는 것이 아니라, 패널 기본값을 통해 테마 스타일을 설정한다는 것을 배웠습니다. 기본 테마 스타일 외에도 Bootstrap 프레임워크의 패널 구성 요소에는 다채로운 패널을 구성하는 다음 테마 스타일도 포함되어 있습니다.

🙌 패널-1차: 키 블루

plain-success: 성공 녹색

plain-info:Information Blue

√ 패널 경고: 노란색 경고

✽패널 위험: 데인저 레드

사용 방법은 매우 간단합니다. 패널의 클래스 이름을 기준으로 필요한 클래스 이름만 추가하면 됩니다.

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者：大漠</div>
</div>
…
…
…
…
…

작동 효과는 다음과 같습니다.

이러한 스타일은 패널의 배경색, 텍스트 및 테두리 색상만 변경한다는 효과를 찾는 것은 어렵지 않습니다. 특정 소스 코드의 경우 bootstrap.css 파일의 5195~5302행을 볼 수 있습니다.

5. 패널 - 패널의 중첩 목록 그룹

이전 섹션에서는 패널에 테이블을 배치하는 방법을 소개했습니다. 이제 패널에 목록 그룹을 배치하는 방법을 알아보겠습니다.

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">
  <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  </p>
  <ul class="list-group">
   <li class="list-group-item">我是列表项</li>
   <li class="list-group-item">我是列表项</li>
   <li class="list-group-item">我是列表项</li>
  </ul>
 </div>
 <div class="panel-footer">作者：大漠</div>
</div>

작동 효과는 다음과 같습니다.

코드 최적화:

중첩 테이블과 마찬가지로 간격이 좋지 않다고 생각되면 목록 그룹을 추출할 수 있습니다.

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <ul class="list-group">
  <li class="list-group-item">我是列表项</li>
  <li class="list-group-item">我是列表项</li>
  <li class="list-group-item">我是列表项</li>
 </ul>
 <div class="panel-footer">作者：大漠</div>
</div>

작동 효과는 다음과 같습니다.

같은 이유로 Bootstrap은 패널에 중첩된 목록 그룹에 대해 특정 스타일 최적화를 수행했습니다. 특정 소스 코드의 경우 bootstrap.css 파일의 5031~5053행을 볼 수 있습니다.

패널의 경우, 부트스트랩 패널을 좀 더 종합적으로 학습할 수 있도록 기본 패널, 컬러 패널 등을 소개하고 있습니다.